弃用createObjectURL并用新的HTMLMediaElement.srcObject替换对网络摄像头流不起作用

时间:2018-06-29 12:08:02

标签: javascript html5 webkit html5-video html5-audio

我得到警告,Chrome未来版本中将不推荐使用该功能。

是这个脚本:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, (stream) => {
        this.src = window.URL.createObjectURL(stream);
        this.stream = stream;
    }, (error) => {
        console.log(error);
    });
}

它记录了网络摄像头,所以我可以保存它,但控制台中会显示以下警告:

  

[不推荐使用]不推荐使用带有媒体流的URL.createObjectURL   将于2018年7月左右在M68中删除。请使用   而是使用HTMLMediaElement.srcObject。

但是当我改变时:

this.src = window.URL.createObjectURL(stream);

收件人

this.src = window.HTMLMediaElement.srcObject(stream);

它不再像以前那样工作了。

3 个答案:

答案 0 :(得分:37)

您对HTMLMediaElement的误解。

这是表示HTML <audio><video>标记的JavaScript类/原型,无论它是否在HTML中。

有关更多类的解释 页面上的<audio>HTMLAudioElement类型的对象,它扩展了HTMLMediaElement,又扩展了HTMLElement

如果您使用querySelector()getElementById()获得media元素,或者使用createElement("audio")createElement("video")在JavaScript中创建media元素 您将获得HTMLMediaElement的实例。

在您的情况下,thisHTMLMediaElement类的对象。

使用JavaScript,根据经验,如果对象类型名称以HTML开头,则表示HTML元素/标记。

您需要做的就是改变

this.src = window.URL.createObjectURL(stream);

try {
  this.srcObject = stream;
} catch (error) {
  this.src = window.URL.createObjectURL(stream);
}

这取自Mozilla Documentation

您可以阅读有关如何使用此更改的更多信息,以及从何处获得答案的知识: https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

答案 1 :(得分:5)

this.src = window.URL.createObjectURL(stream);代替this.srcObject = stream;应该可以解决问题。

答案 2 :(得分:0)

如果您使用的是Chrome,则可以使用:

video.srcObject = stream;

代替:

this.srcObject = stream;