自从createObjectURL被弃用以来，如何将画布流传递到另一个窗口? [英] How to pass canvas stream to another window since createObjectURL is deprecated?

问题描述

我正在构建一个包含以下内容的非常具体的项目:

I'm building a very specific project that has the following:

• 带有画布元素的主窗口.

• A main window with a canvas element.

从主窗口(window.open(...))打开的第二个窗口获取网络摄像头流并将其绘制在画布上.

A second window opened from the main one (window.open(...)) which gets a webcam stream and draws it on a canvas.

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

I need to draw the same canvas, realtime, on the canvas in the main window. What I am doing now is on my second window, I do window.URL.createObjectURL(canvasStream) which gives me a blob url I can use in the main window to get the feed and draw it back on the main canvas.

这一切都很好，(已读)，但是现在已经不推荐使用 URL.createObjectURL 功能，并且不能再使用它了.这意味着我无法再将Blob网址传递到我的主窗口...

This all works (read worked) very well but now the URL.createObjectURL fonction is deprecated and cannot be used anymore. This means I can't get a blob url to pass to my main window anymore...

如何在不使用此功能的情况下将画布流传递到主窗口?我知道我也许可以使用Websocket将帧从一个画布发送到另一个画布，但是我发现它不那么可靠且一致性较低.它还增加了另一层可能会失败的复杂性.

How could I pass that canvas stream to my main window without using this fonction? I know I could maybe use Websocket to send the frames from one canvas to another but I found it not as reliable and less consistent. It also adds another layer of complexity that could fail.

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

Note: the project will run in a nw.js bundle so there are no problems to enable flags and things like that.

注意2:我知道我可以继续使用 nw.js 的旧版本，该版本不推荐使用 URL.createObjectURL ，但是并非未来的好解决方案.

Note 2: I know I can stay on an older version of nw.js which has URL.createObjectURL not deprecated but it is not a good solution for the future.

非常感谢您的帮助.

推荐答案

基于收到的评论，我设法完成了这项工作.

Based on the received comments, I have managed to make this work.

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

I did not realise you could access variables from the opened window directly in the parent window.

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

Really basic code example to access variables from opened window, in the parent window.

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

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

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

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

This means you just need to create your canvas/video stream in the child window and you can apply it to your element in your main window by doing something like:

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

然后，主窗口中的画布将显示与子窗口中的画布相同的东西.

The canvas in your main window will then show the samething as the canvas in your child window.

这篇关于自从createObjectURL被弃用以来，如何将画布流传递到另一个窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！