javascript - 使用 getusermedia 显示 html 视频

Question

我希望在用户单击按钮后使用 getusermedia 显示 html 视频(使用网络摄像头捕获)。视频标签将使用innerhtml显示。

当用户单击按钮时，会显示视频，但不会捕获网络摄像头。

<button id="rec" onclick="onBtnRecordClicked()">Record</button>
<button id="stop"  onclick="onBtnStopClicked()" disabled>Stop</button>

 <div id="videos-container"></div>

<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    document.getElementById('rec').onclick = function() {
    var htmlElement = document.createElement('video');
    htmlElement.setAttribute('autoplay', true);
    htmlElement.setAttribute('controls', true);
    videosContainer.insertBefore(htmlElement, videosContainer.firstChild);

    var mediaConfig = {
            video: htmlElement,
            onsuccess: function(stream) {
                src: URL.createObjectURL(stream);
            },
            onerror: function() {
                alert('unable to get access to your webcam');
            }
        };
        getUserMedia(mediaConfig);
    }

var videosContainer = document.getElementById('videos-container') || document.body;

</script>

我发现 getUserMedia 未在控制台中定义。

jsfiddle 中的代码 https://jsfiddle.net/590c2mcp/

Answer 1

要使 getUserMedia 在所有浏览器(包括 Chrome)中运行，您有两个选择:

1. 最佳选择:使用adapter.js ，官方 WebRTC polyfill，直到 Chrome unprefs the latest APIs 。 (https fiddle 对于 Chrome):

   navigator.mediaDevices.getUserMedia({ video:true, audio:true })
     .then(stream => video.srcObject = stream)
     .catch(log);
   
   var log = msg => div.innerHTML += "<br>" + msg;

   <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
   <video id="video" height="120" width="160" autoplay></video><br>
   <div id="div"></div>

   它同时对 navigator.mediaDevices 和 srcObject 进行填充。

2. 使用已弃用的 API 一段时间(Chrome 为 https fiddle):

   navigator.getUserMedia = navigator.mozGetUserMedia ||
                            navigator.webkitGetUserMedia;
   
   new Promise((y, n) => navigator.getUserMedia({ video:true, audio:true }, y, n))
     .then(stream => video.src = URL.createObjectURL(stream))
     .catch(log);
   
   var log = msg => div.innerHTML += "<br>" + msg;

   <video id="video" height="120" width="160" autoplay></video><br>
   <div id="div"></div>

   尽管这在 MS Edge 中可能不起作用。

我不推荐第二个选项，更多地包括它的历史背景，因为仍然有很多代码看起来或多或少像它(减去 promise 包装器)。一旦您开始使用constraints, you'll notice those have changed too ，所以坚持 adapter.js .