ブラウザからPCに接続したカメラ・マイクを接続する

scriptで以下。

<template>
<div>
    <video id="my-video" width="400px" height="300px" autoplay muted playsinline></video>
</div>
</template>

<script>
// カメラ映像取得
navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
    })
    .then(stream => {
        // 成功時にvideo要素にカメラ映像をセットし、再生
        const videoElm = document.getElementById('my-video');
        videoElm.srcObject = stream;
        videoElm.muted = true;
        videoElm.play();
    }).catch(error => {
        // 失敗時にはエラーログを出力
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
    });
</script>

おそらくセキュリティの関係でhttpsのサイトじゃないとカメラにアクセスできない。（navigator.mediaDevicesが利用できない）

ブラウザはchromeを利用しており、カメラ利用できないかいろいろ試してみたが、chromeではhttpのサイトにおけるカメラ・音声の利用設定が不可の状態から変更できない。 ただし、ホスト名がlocalhostの場合はhttpでもカメラ利用可能。

MDN Web Docsに書いてありましたわ。

httpsを利用しない理由は特に無いのでhttps化するのが良いかと。
今回はwebサーバにはlaradockのnginxを利用しているのでhttps化の設定はそちらで行う。

ちなみに以下は古い書き方らしい。

navigator.getUserMedia(constraints, successCallback, errorCallback)