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

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

環境

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

getUserMedia使い方

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

<video id="video"></video>

<script>

'use strict';

const v = document.getElementById("video")

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

</script>

「http」でアクセスするとgetUserMediaはセキュアな通信のみ使用できるので以下のエラーが発生します。
※「localhost」からのアクセスは、大丈夫でした。

Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')

許可を行うと、webカメラにブラウザからアクセスできると思います。
※「firefox102」でも「safari15.5」でも使用可能です。

また、以下のコードを、

const v = document.getElementById("video")

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

const v = video