Как передать поток холста в другое окно, так как createObjectURL устарела?

Question

Я строю очень специфический проект, который имеет следующее:

• Главное окно с элементом canvas.

• Второе окно, открытое из основного окна (window.open (...)), которое получает поток веб-камеры и рисует его на холсте.

Мне нужно нарисовать тот же холст в реальном времени на холсте в главном окне. То, что я сейчас делаю, - это мое второе окно, я делаю window.URL.createObjectURL(canvasStream), который дает мне URL-адрес большого двоичного объекта, который я могу использовать в главном окне, чтобы получить канал и нарисовать его на главном холсте.

Это все работает (читай работает) очень хорошо, но теперь функция URL.createObjectURL устарела и больше не может использоваться. Это означает, что я больше не могу заставить URL-адрес блоба переходить в главное окно ...

Как я мог передать этот холст поток в мое главное окно, не используя эту функцию? Я знаю, что мог бы использовать Websocket для отправки фреймов с одного холста на другой, но я нашел его не таким надежным и менее последовательным. Он также добавляет еще один уровень сложности, который может потерпеть неудачу.

Примечание: проект будет выполняться в пакете nw.js, поэтому нет проблем с включением флагов и тому подобного.

Примечание 2: Я знаю, что могу остаться на более старой версии nw.js, в которой URL.createObjectURL не устарела, но это не хорошее решение для будущего.

Большое спасибо за вашу помощь.

Answer 1

На основании полученных комментариев мне удалось сделать эту работу.

Я не осознавал, что вы можете получить доступ к переменным из открытого окна непосредственно в родительском окне.

Действительно простой кодпример для доступа к переменным из открытого окна, в родительском окне.

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

Затем холст в вашем главном окне покажет то же самое, что и холст в вашем дочернем окне.