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

我有两个用JS编写的客户端应用程序（后端是静态文件服务器）。一种是通过

MediaRecorder

API录制视频（如网络摄像头）的录像机（这会导致

Blob

对象）。另一个应用程序是视频编辑器（不介意它是如何实现的）

这两个应用程序部署在不同的域上（例如

foo recorder.com

和

foo editor.com

）。我的目标是使编辑您的录音尽可能容易。我希望录音机有一个“在编辑器中编辑录音”按钮，打开已加载录音的编辑器。

一个简单的解决方案是在记录器中对URL进行编码，并将其作为查询参数传递给编辑器。例如，

https://foo-editor.com?video=blob://...

。然而，据我所知，浏览器不允许站点从另一个域访问BlobURL。（这可能是出于隐私方面的考虑。）

我还想到：

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

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

---

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

感谢穆萨的提示，我找到了一个解决方案：

postMessage

允许我将

blob

传递给编辑器，即使它部署在另一个域上。记录器必须在加载编辑器的情况下打开新的浏览上下文。这可以是：

• 窗口。打开

  打开弹出窗口
• 编辑器为

  src

  的
  。通过

  iframeDomNode.contentWindow

  获取上下文

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

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);

注意：如果在记录器端生成BLOBURL，请将其传递给编辑器，编辑器仍然无法访问该URL。因此，您需要直接传递blob

---

还请注意。

可能会有帮助。@Reyno我不确定自己是否完全理解，但我认为WebSocket不会有帮助。一个站点必须连接到WS-server：那会在哪里？我怀疑JS能否打开本地WS-server？有多种途径可以达到您想要的结果，但您肯定需要一些地方（服务器）来发送/放置文件。据我所知，没有客户专用的解决方案。不清楚的因素太多，无法给出可靠的建议。是否用于持久存储（客户端刷新后会发生什么情况）？它与帐户相连吗？您在服务器端编程（nodejs或其他）方面的技能是什么？Etcetera@Phil不上传blob/文件是一项硬要求。因此，我的服务器端技能并不重要。文件不必是持久的；我们可以假设应用程序未重新加载/关闭。一个完全客户端的解决方案是让用户将录制保存为文件，然后在编辑器中选择该文件。但这会给用户带来不便。这就是为什么我要问是否有一种程序化的方式来传递blob数据。希望这能让事情更清楚：）你试过使用iframe吗？