HTML video element don`t display content and it is black screen on Safari 15.6.1

Question

Sorry if my english is not good. My code works well on chrome/mozila and safari 16.2. But it is not working on safari 15.6.1. I want to call captureStream on canvas_3, but i got black screen. So i have one video element and three canvas. The video element and the three canvas have same width and height. The video element gets video from getUserMedia();

In canvas_1 context is drawn video element. In canvas_2 context is drawn some ImageData object. (640 width/480 height) (https://developer.mozilla.org/en-US/docs/Web/API/ImageData) And in canvas_3 context is drawn canvas_1 and canvas_2 via "destination-out";

I don`t have any css. It is only HTML and JS. On chrome/mozila and safari 16.2 i can get canvas1,2 and 3 stream with canvas.captureStream() function and it shows correct video. But on safari 15.6.1 it can only display canvas_1 content. What can be the problem?

HTML
<video id="video_object" playsinline autoplay muted controls></video>

JS:
const video_element = document.getElementById("video_object"); 

canvas_1 = document.createElement("canvas");
canvas_1_ctx = canvas_1.getContext("2d", { willReadFrequently: true });
canvas_2 = document.createElement("canvas");
canvas_2_ctx = canvas_2.getContext("2d", { willReadFrequently: true });
canvas_3 = document.createElement("canvas");
canvas_3_ctx = canvas_3.getContext("2d", { willReadFrequently: true });
canvas_1.width=canvas_2.width=canvas_3.width = 640;
canvas_1.height=canvas_2.height=canvas_3.height = 480;


canvas_1_ctx.drawImage(video_element, 0, 0, 640, 480);

// image_data_instance is 640/480 again.
canvas_2_ctx.putImageData(image_data_instance, 0, 0);

canvas_3_ctx.drawImage(canvas_1, 0, 0, 640,480);
canvas_3_ctx.globalCompositeOperation = "destination-out";
canvas_3_ctx.drawImage(canvas_2, 0, 0, 640,480);


video_element.srcObject = canvas_3.captureStream(); // here i got the problem. The screen is black in safari 15.6.1