废弃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与媒体流一起使用已不建议使用，并将在M68（大约在2018年7月）中删除。请改用HTMLMediaElement.srcObject。

但是当我更改后：

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

到

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

它不再像之前一样工作了。

- user1469734

Answer 1

你误解了 HTMLMediaElement 是什么。

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

更像是一个类的解释是，页面上的 <audio> 是类型为 HTMLAudioElement 的对象，它扩展了 HTMLMediaElement，而后者又扩展了 HTMLElement。

如果您使用 querySelector() 或 getElementById() 获取媒体元素，或者使用 createElement("audio") 或 createElement("video") 在JavaScript中创建媒体元素，则会得到 HTMLMediaElement 的实例。

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

使用JavaScript时，一般来说，如果对象类型名称以HTML开头，则它是指HTML元素/标记。

您需要做的就是改变

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

to

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

这一段内容来自于Mozilla文档

- Barkermn01

---

这对我来说并没有回答问题。createObjectURL 不仅用于显示视频，还用于下载文件。src 标签不接受 srcObject，现在没有下载文件的解决方案。 - tatsu

@tatsu，你在说什么？答案对于所提出的问题是正确的，如果它对你不起作用，请打开一个问题并给我们您的代码，以便查看其中的错误，不要只是说对我来说没有回答问题，那么您就有了一个不同的问题。 - Barkermn01

Answer 2

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

- YaTaras

---

<src DOM 标签不接受 srcObject 值。 - tatsu

如何将FileReader()的结果转换为流？ - user1709076

Answer 3

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

video.srcObject = stream;

改为：

this.srcObject = stream;

- Fernando Rivero

---

只有在video变量设置了所需的范围并指向您想要影响的视频元素时，才能执行操作。在OP的代码中从未定义过video。 - Barkermn01