When using a browser to publish third-party video streams, publishing/preview is normal, but the image is black when playing. How to handle this?

/**
 * Compatible with the problem that the video of customized captured stream is abnormal when chrome 88-92 turns on hardware acceleration
 * @param {*} video 
 * @returns 
 */
var canvas;
let localStream;
var media = getStreamThroughCanvas(video)
zg.createZegoStream({
    custom: {
        video: {
            source: media
        },
        audio: {
            source: media
        }
    }
}).then(stream => {
    localStream = stream;
})
function destroy() {
    localStream && zg.destroyStream(localStream)
    localStream = null;
    if(canvas) {
        canvas.width = 0;
        canvas.remove();
        canvas = null;
    }
}
function getStreamThroughCanvas(video) {

    let canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const draw = function () {
        if(!canvas) return
        if (canvas.width !== video.videoWidth) canvas.width = video.videoWidth;
        if (canvas.height !== video.videoHeight) canvas.height = video.videoHeight;
        ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
        setTimeout(draw, 66);
    };

    draw();

    const media = canvas.captureStream();

    // overwrite stop track function
    const track = media.getVideoTracks()[0];
    const q = track.stop;
    track.stop = () => {
        q.call(track);
        draw();
    };

    // get audio track
    const stream = video.captureStream && video.captureStream()
    if (stream instanceof MediaStream && stream.getAudioTracks().length) {
        const micro = stream.getAudioTracks()[0];
        media.addTrack(micro);
    }
    return media;
}

/**
 * Compatible with the problem that the video of customized captured stream is abnormal when chrome 88-92 turns on hardware acceleration
 * @param {*} video 
 * @returns 
 */
var canvas;
let localStream;
var media = getStreamThroughCanvas(video)
zg.createZegoStream({
    custom: {
        video: {
            source: media
        },
        audio: {
            source: media
        }
    }
}).then(stream => {
    localStream = stream;
})
function destroy() {
    localStream && zg.destroyStream(localStream)
    localStream = null;
    if(canvas) {
        canvas.width = 0;
        canvas.remove();
        canvas = null;
    }
}
function getStreamThroughCanvas(video) {

    let canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const draw = function () {
        if(!canvas) return
        if (canvas.width !== video.videoWidth) canvas.width = video.videoWidth;
        if (canvas.height !== video.videoHeight) canvas.height = video.videoHeight;
        ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
        setTimeout(draw, 66);
    };

    draw();

    const media = canvas.captureStream();

    // overwrite stop track function
    const track = media.getVideoTracks()[0];
    const q = track.stop;
    track.stop = () => {
        q.call(track);
        draw();
    };

    // get audio track
    const stream = video.captureStream && video.captureStream()
    if (stream instanceof MediaStream && stream.getAudioTracks().length) {
        const micro = stream.getAudioTracks()[0];
        media.addTrack(micro);
    }
    return media;
}