navigator.mediaDevices.getUserMedia)函数打开摄像头并输出流
videoEle.srcObject将流媒体数据输出到video中
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webRTC摄像头调用</title> <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> #video { width: 100%; max-height: 500px; background-color: black; transform: rotateY180deg); /*镜像翻转 解决前置摄像头镜像问题*/ } #errorMsg { background-color: chocolate; margin-bottom: 4px; } #tipMsg { background-color: cyan; margin-bottom: 4px; } </style> </head> <body> <div id="container"> 画面：<br> <video id="video" autoplay playsinline></video><br> <p> <button id="showVideo">打开前置摄像头</button> </p> <p> <button id="stopVideo">关闭摄像头</button> </p> <p>点击打开摄像头按钮后，浏览器会询问是否允许，请点击“允许”。</p> <div id="tipMsg"></div> <div id="errorMsg"></div> </div> <script> const constraints = window.constraints = { audio: false, video: { // facingMode: 'environment', //后置摄像头 facingMode: 'user', //前置摄像头 }, }; function showErrMsgmsg, error) { const errorElement = document.querySelector'#errorMsg'); errorElement.innerHTML += `<div>-> ${msg}</div>`; if typeof error !== 'undefined') { console.errorerror); } } function showMsgmsg) { const msgEle = document.querySelector'#tipMsg'); msgEle.innerHTML += `<div>-> ${msg}</div>`; console.logmsg); } //打开摄像头 async function openCamerae) { try { showMsg'正在打开摄像头'); const stream = await navigator.mediaDevices.getUserMediaconstraints); showMsg'获取到了stream'); gotStreamstream); e.target.disabled = true; } catch err) { showErrMsg'没有摄像头设备') } } //将视频流输出到video function gotStreamstream) { const videoEle = document.querySelector'#video'); const videoTracks = stream.getVideoTracks); showMsg`正在使用的设备: ${videoTracks[0].label}`); window.stream = stream; videoEle.srcObject = stream; } //停止视频流 function stopVideoe) { showMsg"停止视频"); const videoElem = document.querySelector'#video'); const stream = videoElem.srcObject; document.querySelector'#showVideo').disabled = false; // 允许开启 if stream == null) { return; } const tracks = stream.getTracks); tracks.forEachfunction track) { track.stop); }); videoElem.srcObject = null; } //点击打开前置摄像头 $'#showVideo').clicke) => { openCamerae) }) //点击关闭摄像头 $'#stopVideo').clicke => { stopVideoe) }) </script> </body> </html>
博客园作者：herry菌，原文链接：
https://www.cnblogs.com/wuhairui/p/15619774.html朋友，看到这里，关注作者的公众号吧，不漏掉更新哦
