createObjectURL的弃用以及用新的HTMLMediaElement.srcObject替换对Webcam流不起作用

Question

我收到警告,在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);

它不再像之前那样工作了..

Answer 1

你的误解是什么HTMLMediaElement.

JavaScript Class或Prototype表示HTML <audio>或<video>标记,无论它是否在HTML中.

对于<audio>页面上更类似的解释 是类型的对象,HTMLAudioElement并且扩展HTMLMediaElement并且反过来扩展HTMLElement.

如果您使用querySelector()或getElementById()使用JavaScript创建媒体元素,createElement("audio")或者createElement("video") 您将获得一个实例HTMLMediaElement.

在你的情况下this是一个HTMLMediaElement类的对象.

使用JavaScript,作为经验法则,如果对象类型名称以HTML开头,则表示HTML元素/标记.

你需要做的就是改变

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

至

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

这取自Mozilla文档

您可以从以下网址了解有关如何使用此更改的更多信息:https: //www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

Answer 2

更换this.src = window.URL.createObjectURL(stream);的this.srcObject = stream;应该解决的问题。