Firefox安卓版普通模式无法渲染共享视频，桌面模式正常

我用React TypeScript实现Zoom Video SDK for Web时遇到一个问题：在安卓Firefox浏览器中点击视频图标后，视频已经启动，但用于展示视频的canvas元素无法渲染画面；切换到安卓Firefox的「Desktop Mode」后，视频能正常渲染。

该代码在安卓Chrome、桌面Chrome、桌面Firefox中均正常运行。

使用Canvas渲染视频的代码 #

const startVideoWithCanvas = useCallback(async() => {
        const startVideoOptions = { "hd": true };
        if (mediaStream?.isSupportVirtualBackground() && isBlur) {
            Object.assign(startVideoOptions, { "virtualBackground": { "imageUrl": 'blur' } });
        }

        try {
            await mediaStream?.startVideo(startVideoOptions)
            .catch((err) => {
                message.error('Die Videoaufnahme konnte nicht gestartet werden.');
                setIsCameraDisabled(() => true);
            });
        } catch (error) {
            console.log(error);
        }

        if (!mediaStream?.isSupportMultipleVideos()) {
            console.log('selfVideoLayout', selfVideoLayout);

            if(!visibleParticipants) {
                return;
            }

            if(!videoRef)
            {
                return;
            }

            const index = visibleParticipants.findIndex(
                (user) => user.userId === zmClient.getCurrentUserInfo().userId
            );

            if (index > selfVideoLayout.length - 1 || index < 0) {
                return;
            }

            let dimension = selfVideoLayout[index];
            const { width: w, height: h, x: _x, y: _y } = dimension;
            const { height: canvasHeight } = canvasDimension;

            let width = w;
            let height = h;
            let y = canvasHeight - _y - height;
            let x = _x;

            console.log('w, h, x, y, _y, canvasHeight', width, height, x, y, _y, canvasHeight);

            try {
                mediaStream?.renderVideo(
                    videoRef.current, 
                    zmClient.getCurrentUserInfo().userId, 
                    width, 
                    height, 
                    _x, 
                    _y, 
                    3
                ).then(() => {
                    console.log('Started video with x at ', _x);
                    setHidSelf(true);

                    mediaStream?.adjustRenderedVideoPosition(
                        videoRef.current,
                        visibleParticipants[index].userId,
                        width,
                        height,
                        _x,
                        _y
                    ).catch(err => {
                        console.log(err);
                    });
                }).catch((err) => {
                    console.log(err);
                    message.error('Die Videoaufnahme konnte nicht gestartet werden.');
                    setIsCameraDisabled(() => true);
                });
            } catch (error) {
                console.log(error);
            }
        }
    }, [canvasDimension, isBlur, mediaStream, selfVideoLayout, videoRef, visibleParticipants, zmClient]);

使用Video元素渲染视频的代码 #

const startVideoWithVideoElement = useCallback(async() => {
        try {
            await mediaStream?.startVideo({ "videoElement" })
            .then(() => {
                setHidSelf(true);
            })
            .catch((err) => {
                console.log('camera error', err);
                message.error('Die Videoaufnahme konnte nicht gestartet werden.');
                setIsCameraDisabled(() => true);
            });
        } catch (error) {
            console.log(error);
        }

    }, [mediaStream, videoElement]);

选择渲染元素的触发代码 #

const onCameraClick = useCallback(async () => {
        if (isStartedVideo) {
            await endVideoCapturing();
        } else {
            console.log('isAndroidBrowser()', isAndroidBrowser());
            console.log('isSupportOffscreenCanvas()', isSupportOffscreenCanvas());
            console.log('!mediaStream?.isSupportMultipleVideos()', !mediaStream?.isSupportMultipleVideos());
            console.log('!isSupportWebCodecs()', !isSupportWebCodecs());

            if (
                isAndroidBrowser() || 
                (
                    isSupportOffscreenCanvas() && 
                    !mediaStream?.isSupportMultipleVideos()
                )
            ) {
                if (videoElement) {
                    await startVideoWithVideoElement();                    
                } else {
                    console.log('Could not find video element');
                    await startVideoWithCanvas();
                }
            } else {
                await startVideoWithCanvas();
            }

            if (!mediaStream?.isCapturingVideo()) {
                if (mediaStream?.isCaptureForbidden()) {
                    message.error('Das Aufnehmen von Videos ist vom Benutzer verboten');
                    setIsCameraDisabled(() => true);
                    console.log('video forbidden');
                }

                message.error('Die Videoaufnahme konnte nicht gestartet werden.');
                setIsCameraDisabled(() => true);
                console.log('could not start video');
            }

            setIsStartedVideo(mediaStream?.isCapturingVideo() ? true : false);
        }
    }, [isStartedVideo, endVideoCapturing, mediaStream, videoElement, startVideoWithVideoElement, startVideoWithCanvas]);

1. 强制安卓Firefox使用Video元素渲染 #

当前isAndroidBrowser()的判断可能未精准命中安卓Firefox，先实现Firefox识别函数，再修改触发逻辑强制安卓Firefox走video元素渲染：

// 新增Firefox识别函数
const isFirefox = () => {
    return navigator.userAgent.toLowerCase().includes('firefox');
};

// 修改onCameraClick中的判断逻辑
if (
    (isAndroidBrowser() && isFirefox()) ||
    (isSupportOffscreenCanvas() && !mediaStream?.isSupportMultipleVideos())
) {
    if (videoElement) {
        await startVideoWithVideoElement();                    
    } else {
        console.log('Could not find video element, fallback to canvas');
        await startVideoWithCanvas();
    }
}

2. 检查Canvas上下文兼容性 #

安卓Firefox对Canvas上下文的支持可能存在差异，在调用renderVideo前手动验证上下文可用性，失败则降级到video元素：

// 在startVideoWithCanvas的renderVideo调用前添加
if (videoRef.current) {
    const ctx = videoRef.current.getContext('2d');
    if (!ctx) {
        console.error('Failed to get Canvas 2D context');
        if (videoElement) {
            await startVideoWithVideoElement();
            return;
        }
    }
}

3. 验证Zoom SDK兼容性 #

• 升级到最新版本的Zoom Video SDK，修复已知移动端兼容性问题
• 检查官方文档中关于安卓Firefox的支持说明，确认是否存在canvas渲染的限制

4. 检查Canvas坐标计算 #

安卓Firefox的坐标系统可能与桌面端不同，打印实际canvas尺寸和传递给renderVideo的x、y、width、height参数，确认视频渲染区域在canvas可视范围内，避免因坐标偏移导致画面不可见。

5. 禁用OffscreenCanvas #

安卓Firefox对OffscreenCanvas的支持不完善，尝试在SDK初始化时禁用该特性：

const client = ZoomVideo.createClient();
await client.init('en-US', 'Global', {
    disableOffscreenCanvas: true
});

内容的提问来源于stack exchange，提问作者Godwin Owonam