在部署在不同域上的兩個純客戶端 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數據。