使用 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. 最佳选择： 使用官方 WebRTC polyfill adapter.js，直到 Chrome 取消最新的 API 。 （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 一段时间（https fiddle for Chrome）：

   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 中可能不起作用。

我不推荐第二个选项，更多地包括它的历史背景，因为仍然有很多代码看起来或多或少像它（减去承诺包装器）。一旦你开始使用 constraints，你会注意到它们也发生了变化，所以坚持使用 adapter.js。

Answer 2

截至 2023 年，这对我有用：

考虑您有一个视频元素：

<video id="my-video"></video>

然后您可以使用以下方式显示网络摄像头的视频：

const constraints = { video: { width:1280, height:720 } };
const stream = await navigator.mediaDevices.getUserMedia(constraints);
const videoElement = document.querySelector('video#recorder');
videoElement.srcObject = stream;

但请记住从

getUserMedia

调用中捕获错误，如果设备不可用，它将抛出错误。例如。如果笔记本电脑未打开（例如使用外部显示器，但没有外部网络摄像头），则会发生这种情况。

Answer 3

全局范围内没有

getUserMedia

，需要使用

getUserMedia

中的

mediaDevices

方法

navigator.mediaDevices.getUserMedia(mediaConfig);

Answer 4

在 chrome 74 之后，getUserMedia 仅在 HTTPS 上下文中可用。但是，您可以在此处的实验功能中禁用它：

chrome://flags/#unsafely-treat-insecure-origin-as-secure