- 初始化button、video控件
- 绑定"打开摄像头"响应事件onOpenCamera
- .如果要打开摄像头则点击"打开摄像头“按钮，以触发onOpenCamera事件的调用
- .当触发onOpenCamera调用时
a、设置约束条件，即是getUserMedla函数的入参
b、 getUserMedia有两种情况，一种是正常打开摄像头， 使用handleSuccess处理;一 种是打开摄像头失败， 使用handleError处理
C、当正常打开摄像头时，则将getUserMedia返向的stream对象赋值给video控件的srcObject即可将视频显示出来
navigator.mediaDevices: navigator.mediaDevices官网学习地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打开摄像头</title>
</head>
<body>
<video id="local-video" autoplay playsinline></video>
<button id="showVideo">打开摄像头</button>
<p>通过getUserMedia()获取视频</p>
</body>
<script type="text/javascript">
document.querySelector('#showVideo').addEventListener('click', onOpenCamera);
const constraints = {
audio: false,
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>
