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.

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

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.

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...

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.

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

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.

Thanks a lot for your help.

回答1:

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.

来源：https://stackoverflow.com/questions/50237238/how-to-pass-canvas-stream-to-another-window-since-createobjecturl-is-deprecated