时间戳

首页 > 解决方案 > 由于不推荐使用 createObjectURL，如何将画布流传递到另一个窗口？

javascript - 由于不推荐使用 createObjectURL，如何将画布流传递到另一个窗口？

问题描述

我正在构建一个非常具体的项目，它具有以下内容：

我需要在主窗口的画布上实时绘制相同的画布。我现在正在做的是在我的第二个窗口上，我这样做 window.URL.createObjectURL(canvasStream)给了我一个 blob url，我可以在主窗口中使用它来获取提要并将其绘制回主画布上。

这一切工作（阅读工作）非常好，但现在该URL.createObjectURL功能已被弃用，不能再使用。这意味着我无法再将 blob url 传递到我的主窗口......

如果不使用此功能，我如何将该画布流传递到我的主窗口？我知道我也许可以使用 Websocket 将帧从一个画布发送到另一个画布，但我发现它不那么可靠且不太一致。它还增加了另一层可能失败的复杂性。

注意：该项目将在一个nw.js包中运行，因此启用标志和类似的东西没有问题。

注意 2：我知道我可以继续使用尚未弃用的旧版本，nw.js但这URL.createObjectURL对未来来说不是一个好的解决方案。

非常感谢你的帮助。

标签： javascriptcanvaswebsocketstreamblob

解决方案

根据收到的评论，我设法完成了这项工作。

我没有意识到您可以直接在父窗口中从打开的窗口访问变量。

在父窗口中从打开的窗口访问变量的真正基本代码示例。

// In the parent
var myWindow = window.open(url);

// In the child window
var myVar = "test";

// In the parent
console.log(myWindow.myVar); // => "test"

这意味着您只需要在子窗口中创建画布/视频流，然后可以通过执行以下操作将其应用于主窗口中的元素：

// In the child window
var canvasEl = document.querySelector("canvas");
var canvasStream = canvasEl.captureStream(30);

// In the parent
var videoEl = document.querySelector("video");
videoEl.srcObject = myWindow.canvasStream;

然后，主窗口中的画布将显示与子窗口中的画布相同的内容。

推荐阅读