弃用 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);
    });
}

记录网络摄像头以便我可以保存它，但控制台中显示以下警告：

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead.

但是当我改变时：

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

至

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

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

Answer 1

你误解了HTMLMediaElement是什么。

JavaScript Class/Prototype 表示 HTML <audio> 或 <video> 标签，无论它是否在 HTML 中。

更class的解释页面上的 <audio> 是一个类型为 HTMLAudioElement 的对象，它扩展了 HTMLMediaElement 并且又扩展了 HTMLElement.

如果您使用 querySelector() 或 getElementById() 获取媒体元素，或者使用 createElement("audio") 或 createElement("video") 在 JavaScript 中创建媒体元素你会得到一个 HTMLMediaElement.

的实例

在你的例子中 this 是 HTMLMediaElement class 的对象。

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

你只需要改变

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

至

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

本文摘自Mozilla Documentation

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

Answer 2

如果您正在使用 Chrome，您可以使用：

video.srcObject = stream;

而不是：

this.srcObject = stream;

Answer 3

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

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

Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream

html

javascript

webkit

html5-video

html5-audio