기사 디렉토리
효과를 먼저 보세요
영상대화 소스코드
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 보안이
있습니다.
그룹 정책 구성
다른 궁금한 사항 있으면 추가하겠습니다. 퇴근이라 급합니다.