<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打开摄像头</title>
</head>
<body>
<!--添加muted后，就无法捕获到麦克风的声音-->
<!--<video id="local-video" autoplay playsinline muted></video>-->
<!--controls：是否显示控件-->
<video id="local-video" autoplay playsinline controls></video>
<button id="showVideo">打开摄像头+麦克风</button>
<p>通过getUserMedia()获取视频+麦克风</p>
</body>
<script type="text/javascript">
document.querySelector('#showVideo').addEventListener('click', onOpenCamera);
const constraints = {
audio: true,
video: true
}
const handleSuccess = (stream => {
const video = document.querySelector("#local-video")
video.srcObject = stream
})
const handleError = (err => {
console.error("getUserMedia error:" + err)
})
function onOpenCamera(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError)
}
</script>
</html>
