首页 > 解决方案 > 使用 navigator.mediaDevices.getUserMedia 的 WebRtc 视频未在任何浏览器中显示

问题描述

您好,我想在我的 html 中显示笔记本电脑摄像头的实时视频。我已经使用 navigator.mediaDevices.getUserMedia() 实现了,但没有显示视频。我已经尝试在 localhost 中使用 http 和 https 也得到相同的结果。我在控制台中没有收到任何错误。我使用的代码是


<script>
        window.onload = function () {
            var constraints = { audio: false, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });
        };
    </script>
    <video id="video" autoplay="autoplay" width="400"></video>

它显示在这张图片中

标签: videowebrtc

解决方案


推荐阅读