在部署在不同域上的两个纯客户端 JS 应用程序之间共享本地 blob 数据

Question

我有两个用 JS 编写的仅限客户端（后端是静态文件服务器）的应用程序。 一个是通过MediaRecorder API 录制视频（例如网络摄像头）的MediaRecorder （这会产生一个Blob对象）。 另一个应用程序是视频编辑器（不要介意它是如何实现的）。

这两个应用程序部署在不同的域（例如foo-recorder.com和foo-editor.com ）。 我的目标是尽可能轻松地编辑您的录音。 我希望录音机有一个按钮“在编辑器中编辑录音”，可以打开已经加载录音的编辑器。

一个简单的解决方案是在记录器中使用URL.createObjectUrl(blob) ，对该 URL 进行 URL 编码并将其作为查询参数传递给编辑器。 例如https://foo-editor.com?video=blob://... 。 但是，据我所知，浏览器不允许站点访问来自另一个域的 blob URL。 （这可能是出于很好的隐私原因。）

我也想过：

• 将 blob 作为文件存储在用户设备上，并将路径传递到其他站点。 但是我们不能随便用 JS 写文件。
• 将 blob 存储在本地存储中：本地存储通常限制为几 MB，也不能跨域访问。
• 传递整个视频 base64 编码为查询参数：这太荒谬了。 不。

所以我想不出一个可行的解决方案。 如果它根本不起作用，我也不会感到惊讶，因为它在隐私和安全方面可能非常棘手。

有谁知道如何将这个 blob 从一个应用程序传递到另一个应用程序？ 显然，不应上传 blob。

Answer 1

感谢 Musa 的提示，我找到了一个解决方案： postMessage允许我将Blob传递给编辑器，即使它部署在另一个域上。 记录器必须在加载了编辑器的情况下打开一个新的浏览内容。 这可以是：

• windows.open打开一个弹出窗口
• 编辑器为src的<iframe> 。 通过iframeDomNode.contentWindow获取上下文。

现在可以使用postMessage向该上下文发送消息：

const iframe = document.getElementById('editor-iframe');
iframe.contentWindow.postMessage(videoBlob, "*"); 
// ^ TODO: change "*" to the specific target origin in production code!!!

在编辑器方面，我可以通过以下方式接收该消息：

window.addEventListener("message", event => {
  // TODO: in real code, you should check `event.origin` here!

  const v = document.getElementById("a-video-element");
  v.src = URL.createObjectURL(event.data);
}, false);

注意：如果您在记录器端生成 blob URL，将其传递给编辑器，编辑器仍然无法访问它。 所以你需要直接传递blob。

另请注意，通过postMessage发送Blob并不昂贵，并且不会复制Blob数据。