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 s

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