Javascript 使用getusermedia显示html视频

我希望在用户单击按钮后使用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>

记录
停止
navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.msGetUserMedia；
document.getElementById（'rec'）。onclick=function（）{
var htmlElement=document.createElement（'video'）；
setAttribute（'autoplay'，true）；
setAttribute（'controls'，true）；
videosContainer.insertBefore（htmlElement，videosContainer.firstChild）；
var mediaConfig={
视频：htmlElement，
onsuccess:函数（流）{
src:URL.createObjectURL（流）；
},
onerror:function（）{
警报（“无法访问您的网络摄像头”）；
}
};
getUserMedia（mediaConfig）；
}
var videoscocontainer=document.getElementById（'videos-container'）| | document.body；

我正在获取控制台中未定义的getUserMedia

---

JSFIDLE中的代码

全局范围内没有

getUserMedia

，您需要使用

mediaDevices中的
getUserMedia
方法

navigator.mediaDevices.getUserMedia(mediaConfig);

---

要使getUserMedia在包括Chrome在内的所有浏览器中工作，您有两个选项：

最佳选择：使用官方WebRTC polyfill，直到Chrome。（对于铬）：

navigator.mediaDevices.getUserMedia（{video:true，audio:true}）
.then（stream=>video.srcObject=stream）
.渔获物（原木）；
var log=msg=>div.innerHTML+=“
”+msg



在chrome 74之后，getUserMedia仅在HTTPS上下文中可用。但是，您可以在此处的实验功能中禁用该功能：
chrome://flags/#unsafely-将不安全的源代码视为安全的
在输入您的代码后，我仍然得到未定义的getUserMedia。请参阅@jib该代码在chrome上不起作用？我在chrome上测试，但没有视频。它可以在firefox上运行。。但是我的网站功能主要在chrome中工作。这里有一个应该在chrome中工作的功能（它还不支持
srcObject
）。请注意，这仍然需要polyfill或Enablechrome://flags/#enable-Chrome中的实验性web平台功能。也可以使用不推荐使用的非承诺api。