Javascript 如何从Blob url检索媒体流？

可以使用

window.URL.createObjectURL（）

从如下代码中的流获取URL

navigator.getUserMedia({ video: true, audio: true }, function (localMediaStream) {

    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);
    video.onloadedmetadata = function (e) {
        // Do something with the video here.
    };
}, 
function (err) {
    console.log("The following error occured: " + err);
}
);

问题是现在我有一个blob URL，如：

blob:http%3A//localhost%3A1560/f43bed15-da6c-4ff1-b73c-5640ed94e8ee

---

有没有办法从中检索MediaStream对象？

如果您使用的是angular2，您可以使用平台浏览器包中提供的Domsanizer：

import { DomSanitizer } from '@angular/platform-browser';
constructor(
    private sanitizer: DomSanitizer) {
}

然后按如下方式使用流：

//your code comes here...
video.src = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(stream));

这应该只

video.src不是video.src对象 是的，他们会发生冲突

video.src

获取源URL

video.srcObject

获取源对象（目前仅在2019年

MediaStream

，也许将来您可以将Blob直接放在这里，但现在不行…）

所以这取决于你真正想做什么： A） 显示当前正在录制的内容 您必须有可用的

MediaStream

对象（您可以这样做），并将其放入

video.srcObject

navigator.getUserMedia({ video: true, audio: true }, function (localMediaStream) {
    var video = document.querySelector('video');
    video.src = ''; // just to be sure src does not conflict with us
    video.srcObject = localMediaStream;
}

B） 显示现有视频/刚刚录制的视频

对象&u BLOB\u

-您已经有了一个通过文件API创建的对象，或者通常如果您有某种记录器，让我们假设在

recorder

变量中，通常有

getBlob（）

或类似的可用对象，如

recorder.getBlob（）

我强烈建议您为此使用一些现有的记录器库，但为了完整起见，有一个官方的MediaRecorder API-

因此，您可以看到，您刚刚将两件事情组合在一起，您只需要将它们分开，并确保它们不会冲突：）

注意： createObjectURL（MediaStream）已被弃用。 不要再在代码中使用它，它会在任何最近的浏览器中出现。
不过，这个问题的前提仍然有效

---

---

没有内置的方法来检索blob URL指向的原始对象

使用blob，我们仍然可以获取这个blob URL，并且我们将获得原始blob的副本

constblob=newblob（['hello']）；
const url=url.createObjectURL（blob）；
获取（url）
.then（r=>r.blob（））
。然后（异步（复制）=>{
log（'same blob？'，copy==blob）；
const blob_arr=new Uint8Array（等待新的响应（blob.arrayBuffer（））；
const copy_arr=new Uint8Array（等待新的响应（copy）.arrayBuffer（））；
log（“相同的内容？”，JSON.stringify（blob\u arr）==JSON.stringify（copy\u arr））
log（JSON.stringify（copy_arr））；
})

是。如果您发布的代码不起作用，很可能是因为您在src之后设置了侦听器，请记住blob是一个本地资源，因此加载速度比internet资源快得多。createObjectURL即将被否决。您说的是真的，但它没有回答问题。。。在2013年（当被问到这个问题时），没有

srcObject

，显示媒体流的唯一方法就是制作一个指向该媒体流的BlobURL。从那时起，这种做法就遭到了反对，但在发布该问题时，这是一种正常的做法。然后问题是“如何从指向媒体流的blobURL检索媒体流”。因为我们可以用于Blob的获取（blobURL）在这里不起作用。如果您愿意，我们今天可以做的是，问题将是“如何从

blobURL

中检索MediaSource对象，其中

blobURL

是通过执行

URL.createObjectURL（MediaSource\u实例）

”@kaido您是对的，我错过了日期，尽管接下来的问题是如何获取

MediaStream

对象，而不是

MediaSource

，除非您想录制视频，否则这没有多大意义。我以MediaSource为例，因为它是另一个非Blob对象，我们可以从中生成blobURI（就像以前可以使用MediaStream一样）。所以这是当代的等价物。还有一些很好的例子，比如，想要检索一个MSE，以便能够向它附加新的块。好的，但是如果你能够附加新的块，你不应该已经有了对象引用吗？（只是想知道：D）

video.srcObject = null; // make sure srcObject is empty and does not overlay our src
video.src = window.URL.createObjectURL(THE_BLOB_OBJECT);