How to handle black screen when playing stream while publishing/previewing third-party video streams in browser works normally?

Currently, this issue occurs when publishing third-party video streams using the following browsers:

• Chrome browser version 88-92
• Safari browser
• Firefox browser on HarmonyOS

Developers can use Canvas to get the media stream from video elements when pblishing streams.

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