javascript WebカメラにWeb APIを使用してアクセスする

2021.03.17
javascript
javascript

javascriptで、navigator.mediaDevicesオブジェクトのgetUserMediaメソッドを使用して、Webカメラにアクセスするサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. getUserMedia使い方

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

getUserMedia使い方

getUserMediaを使用すると、Webカメラにアクセスすることが可能です。

/** html **/
<video id="video"></video>

/** js **/

'use strict';

const v = document.getElementById("video")

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false,
}).then(s => {
    v.srcObject = s;
    v.play()
}).catch(e => {  
})

/** html **/

/** js **/

'use strict';

const v = document.getElementById("video")

navigator.mediaDevices.getUserMedia({

video: true,

audio: false,

}).then(s => {

v.srcObject = s;

v.play()

}).catch(e => {

})

use strictについてはこちら

許可を行うと、webカメラにブラウザからアクセスできると思います。

また、以下のコードを、

const v = document.getElementById("video")

1	const v = document.getElementById("video")

document.getElementByIdの省略を使用して、簡潔に記述することもできます。

const v = video

1	const v = video

document.getElementByIdの省略して記述する

javascript WebカメラにWeb APIを使用してアクセスする

環境

getUserMedia使い方

python multiprocessingを使って並列処理を行う 2021.03.17

Ruby 末尾にある改行を取り除く 2021.03.17