Question

我想用webcamera捕捉视频。并且有正确的决定：

 window.onload = function () {
        var video = document.getElementById('video');
        var videoStreamUrl = false;

        navigator.getUserMedia({video: true}, function (stream) {

        videoStreamUrl = window.URL.createObjectURL(stream);

        video.src = videoStreamUrl;
        }, function () {
        console.log('error');
        });
        };

但在浏览器中产生错误：

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus.com/features/5618491470118912 for more details.

如何将HTMLMediaElement.srcObject用于我的目的？谢谢你的时间！

Answer 1

MediaElement.srcObject应该允许Blob，MediaSources和MediaStreams在MediaElement中播放，而不需要在文件的生命周期内将这些源绑定在内存中，如blobURIs。

^{（目前没有浏览器支持MediaStream以外的任何其他内容，但是......）}

实际上，当你执行URL.createObjectURL(MediaStream)时，你告诉浏览器它应该保留这个Source，直到你撤销blobURI，或者直到文件死亡。
对于从捕获设备（摄像头或麦克风）提供的LocalMediaStream，这也意味着浏览器必须保持与此设备的连接打开。

Firefox大约一年前推出了这项功能的弃用，因为srcObject可以更好的方式提供相同的结果，更容易为每个人处理，因此Chrome似乎终于跟进（不确定是什么关于这个的规格状态。）

所以要使用它，只需执行

MediaElement.srcObject = MediaStream;

另请注意that the API you are using本身已弃用（不仅仅在FF中），您不应再使用它了。实际上，从用户Media捕获MediaStream的正确API是MediaDevices.getUserMedia。

此API现在返回一个Promise，它将被解析为MediaStream。

因此，您的代码的完整更正将是

var video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(function(stream) {
    video.srcObject = stream;
  })
  .catch(function(error) {
    console.log('error', error);
  });

<video id="video"></video>

或as a fiddle，因为StackSnippets®过度保护的iframe可能无法很好地处理gUM。

从webcamera html捕获

1 个答案: