常见问题

产品 / 插件
平台 / 框架

使用浏览器推第三方视频流,推流/预览正常,但拉流时页面变黄,该如何处理?

产品 / 插件:实时音视频

平台 / 框架:Web

更新时间:2022-04-25 15:21


目前,使用 chrome 88~92 版本、Safari 浏览器推第三方视频流时,会出现此问题。

开发者可以在推流时,使用 Canvas 获取 video 元素的媒体流。

/**
 * Compatible with the problem that the video of customized captured stream is abnormal when chrome 88-92 turns on hardware acceleration
 * @param {*} video 
 * @returns 
 */
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();
        canvas.width = 0;
        canvas.remove();
        canvas = null
    };

    // 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;
}
本篇目录
下载 PDF