弃用 createObjectURL 并替换为新的 HTMLMediaElement.srcObject 不适用于网络摄像头流

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);

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

原文由 user1469734 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你误解了什么 HTMLMediaElement 是什么。

它是代表 HTML <audio> 或 <video> 标记的 JavaScript 类/原型，无论它是否在 HTML 中。

For a more class like explanation <audio> on the page is an object of type HTMLAudioElement and that extends HTMLMediaElement and that in turn extends HTMLElement .

If you get the media element with querySelector() or getElementById() or create a media element in JavaScript with createElement("audio") or createElement("video") you’ll get an HTMLMediaElement 的实例。

在您的情况下 this 是 HTMLMediaElement 类的对象。

对于 JavaScript，根据经验，如果对象类型名称以 HTML 开头，则它指的是 HTML 元素/标签。

你需要做的就是改变

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

至

if ('srcObject' in this) {
  this.srcObject = stream;
} else {
  this.src = window.URL.createObjectURL(stream);
}

这取自 Mozilla 文档

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

原文由 Barkermn01 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 YaTaras 发布，翻译遵循 CC BY-SA 4.0 许可协议