3

I have two client-only (backend is static file server) applications written in JS. One is a recorder that records videos (e.g. the webcam) via the MediaRecorder API (this results in a Blob object). The other application is a video editor (don't mind how that one is implemented).

The two applications are deployed on different domains (e.g. foo-recorder.com and foo-editor.com). My goal is to make editing your recordings as easy as possible. I would like the recorder to have a button "edit recording in editor" that opens the editor with the recording already loaded.

A naive solution would be to URL.createObjectUrl(blob) in the recorder, URL-encode that URL and pass it as query parameter to the editor. E.g. https://foo-editor.com?video=blob://.... However, as far as I can tell, browsers do not allow sites to access blob URLs from another domain. (That's probably for good privacy reasons.)

I also thought about:

  • Storing the blob as a file on the user's device and pass the path to the other site. But we can't just willy nilly write files with JS.
  • Storing the blob in local storage: local storage usually is limited to a few MB and can't be access cross-domain either.
  • Passing the whole video base64 encoded as query parameter: that's ridiculous. No.

So I can't come up with a working solution. And I wouldn't be surprised if it doesn't work at all because it's probably very tricky privacy and security wise.

Does anyone have an idea how I could pass this blob from one app to the other? Obviously, the blob should not be uploaded.

Lukas Kalbertodt
  • 79,749
  • 26
  • 255
  • 305
  • [Websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) might help with this. – Reyno Oct 20 '20 at 11:43
  • @Reyno I'm not sure I fully understand but I don't think websockets would help. One site would have to connect to a WS server: where would that be? I doubt JS can open local WS server? – Lukas Kalbertodt Oct 20 '20 at 11:46
  • There are multiple routes that would lead to your desired outcome, but you're sure going to need some place (server) to send/place your files onto. As far as I'm aware there is no client-only solution. There are too many factors that are unclear to give a solid advice. Is it for persistent storage (what happens after client refreshes)? Is it connected to accounts? What is your skills on server side programming (nodejs or something else)? Etcetera – Phil Oct 20 '20 at 11:58
  • @Phil Not uploading the blob/file is a hard requirement. As such, my server side skills don't matter. The file doesn't have to be persistent; we can assume the app is not reloaded/closed. And well, one completely client-side solution would be to let the user save the recording as file and then select that file in the editor. But that would be inconvenient for the user. That's why I'm asking whether there is a programmatic way to pass that blob data. Hope that makes it clearer :) – Lukas Kalbertodt Oct 20 '20 at 12:14
  • 1
    Have you tried using an iframe? – Musa Oct 21 '20 at 03:29
  • @Musa That did the trick! ` – Lukas Kalbertodt Oct 21 '20 at 11:45

1 Answers1

3

Thanks to Musa's hint, I found a solution: postMessage allows me to pass the Blob to the editor, even if it's deployed on another domain. The recorder has to open a new browsing contect with the editor loaded. This can be:

  • windows.open to open a popup window
  • An <iframe> with the editor as src. Acquire the context via iframeDomNode.contentWindow.

It's now possible to use postMessage to send a message to that context:

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

On the editor side, I can receive that message via:

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

Note: if you generate the blob URL on the recorder side, pass that to the editor, the editor still cannot access that. So you need to pass the blob directly.

Also note that sending a Blob via postMessage is not expensive and does not copy the Blob data.

Lukas Kalbertodt
  • 79,749
  • 26
  • 255
  • 305