記事ディレクトリ
まずは効果を見てみましょう
ビデオ会話のソースコード
html
Vue のプロジェクトですが、テストのためにホームページのインデックスページに書いてみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<video id="local‐video" autoplay playsinline></video>
<button id="showVideo">打开摄像头</button>
<p>通过getUserMedia()获取视频</p>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<script>
const constraints = {
audio: false,
video: true
};
// 处理打开摄像头成功
function handleSuccess(stream) {
const video = document.querySelector("#local‐video");
video.srcObject = stream;
}
// 异常处理
function handleError(error) {
console.error("getUserMedia error: " + error);
}
function onOpenCamera(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
document.querySelector("#showVideo").addEventListener("click", onOpenCamera);
</script>
</html>
ビュー2
<script>
export default {
methods: {
handleSuccess(stream) {
this.$refs.localVideo.srcObject = stream;
},
handleError(error) {
console.error("getUserMedia error: " + error);
},
onOpenCamera() {
const constraints = {
audio: false, video: true };
navigator.mediaDevices
.getUserMedia(constraints)
.then(this.handleSuccess)
.catch(this.handleError);
},
},
};
</script>
<template>
<video ref="localVideo" autoplay playsinline></video>
<button @click="this.onOpenCamera">打开摄像头</button>
<p>通过getUserMedia()获取视频</p>
</template>
音声会話のソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<audio id="local‐audio" autoplay controls>播放麦克风捕获的声音</audio>
<button id="playAudio">打开麦克风</button>
<p>通过getUserMedia()获取音频</p>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<script>
// 约束条件
const constraints = {
audio: true,
video: false
};
// 处理打开麦克风成功
function handleSuccess(stream) {
const audio = document.querySelector("#local‐audio");
audio.srcObject = stream;
}
// 异常处理
function handleError(error) {
console.error("getUserMedia error: " + error);
}
function onOpenMicrophone(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone);
</script>
</html>
発生した問題の解決策
もちろん、ブラウザ上で直接テストしたい場合は、https ポリシー、LAN に接続されているかどうかなど、その他の知識を知る必要があります。 https セキュリティ グループ ポリシーについては、https セキュリティに関する関連メモをここに示します
。
グループポリシーの設定
他に質問があれば追加します。仕事が休みなので急いでいます。