10

可以从如下代码中的流中获取URL 。window.URL.createObjectURL()

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 对象？

4

3 回答 3

3

笔记：

URL.createObjectURL(MediaStream) 已被弃用。不要再在代码中使用它，它会抛出任何最近的浏览器。
问题的前提仍然有效。

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

使用 Blob，我们仍然可以获取此 Blob URL，并且我们将获得原始 Blob的副本。

const blob = new Blob(['hello']);
const url = URL.createObjectURL(blob);

fetch(url)
  .then(r => r.blob())
  .then(async (copy) => {
    console.log('same Blobs?', copy === blob);
    const blob_arr = new Uint8Array(await new Response(blob).arrayBuffer());
    const copy_arr = new Uint8Array(await new Response(copy).arrayBuffer());
    console.log("same content?", JSON.stringify(blob_arr) === JSON.stringify(copy_arr))
    console.log(JSON.stringify(copy_arr));
  })

但是，对于其他对象，这将不起作用...

const source = new MediaSource();
const url = URL.createObjectURL(source);

fetch(url)
  .then(r => r.blob())
  .then(console.log)
  .catch(console.error);

唯一的方法是跟踪您的原始对象。

为此，我们可以提出简单的包装器createObjectURL并revokeObjectURL更新可通过 URL 访问的对象字典：

(() => {
  // overrides URL methods to be able to retrieve the original blobs later on
  const old_create = URL.createObjectURL;
  const old_revoke = URL.revokeObjectURL;
  Object.defineProperty(URL, 'createObjectURL', {
    get: () => storeAndCreate
  });
  Object.defineProperty(URL, 'revokeObjectURL', {
    get: () => forgetAndRevoke
  });
  Object.defineProperty(URL, 'getFromObjectURL', {
    get: () => getBlob
  });
  const dict = {};

  function storeAndCreate(blob) {
    var url = old_create(blob); // let it throw if it has to
    dict[url] = blob;
    return url
  }

  function forgetAndRevoke(url) {
    old_revoke(url);
    // some checks just because it's what the question titel asks for, and well to avoid deleting bad things
    try {
      if(new URL(url).protocol === 'blob:')
        delete dict[url];
    }catch(e){} // avoided deleting some bad thing ;)
  }

  function getBlob(url) {
    return dict[url];
  }
})();

// a few example uses

// first a simple Blob
test(new Blob(['foo bar']));

// A more complicated MediaSource
test(new MediaSource());

function test(original) {
  const url = URL.createObjectURL(original);
  const retrieved = URL.getFromObjectURL(url);
  console.log('retrieved: ', retrieved);
  console.log('is same object: ', retrieved === original);
  URL.revokeObjectURL(url);
}

于 2019-06-13T03:24:31.443 回答
2

如果您使用的是 angular2，您可以使用 platform-b​​rowser-package 中提供的 DOMSanitizer：

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

然后使用您的流，如下所示：

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

这应该只

于 2017-01-17T14:37:42.323 回答
2

video.src 不是 video.srcObject

是的，他们会发生冲突；）！

video.src获取源 URL

video.srcObject获取源 OBJECT （目前仅在 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) 显示现有视频/刚刚录制的视频

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

THE_BLOB_OBJECT- 你要么已经通过 File API 创建了一个，或者通常如果你有某种记录器，让我们假设recorder变量，通常有getBlob()或类似的东西可用，比如recorder.getBlob()我强烈建议你为此使用一些现有的记录器库，但要完整有一个官方的 MediaRecorder API - https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

所以你看到你刚刚将两件事结合在一起，你只需要将它们分开并确保它们不会冲突:)

于 2019-06-13T02:56:19.707 回答