Twilio GaussianBlurBackgroundProcessor本地生效但远端无效果问题求助

我在PHP页面中引入twilio-video.js 2.22.1和twilio-video-processors.js 1.0.2，配置GaussianBlurBackgroundProcessor实现背景模糊。本地视频的模糊效果正常，但加入视频房间后，远端参与者看到的是未模糊的清晰视频。

核心问题分析 #

出现这个问题的主要原因有两个：

1. 处理器模型加载未等待完成：bg.loadModel()是异步操作，原代码未等待模型加载完成就应用处理器，可能导致初始传给房间的轨道未被正确处理。
2. 未显式传入处理后的轨道：调用TWVideo.connect时未指定处理后的本地视频轨道，Twilio会自动创建新的未处理轨道并发送给远端。

修正后的代码示例 #

const TWVideo = Twilio.Video;

// 初始化高斯模糊处理器
const bg = new Twilio.VideoProcessors.GaussianBlurBackgroundProcessor({
    assetsPath: '',
    maskBlurRadius: 5,
    blurFilterRadius: 25,
});

// 确保模型加载完成后再处理本地轨道并连接房间
bg.loadModel()
.then(() => TWVideo.createLocalVideoTrack())
.then(track => {
    const videoContainer = document.getElementById('local-media').firstElementChild;
    
    // 为轨道添加模糊处理器
    track.addProcessor(bg);
    
    // 渲染本地视频
    videoContainer.appendChild(track.attach());
    $('#local-media').find('video').css('width', '200px');
    
    // 连接房间时传入处理后的本地轨道
    return TWVideo.connect(room_token, {
        name: roomName,
        localTracks: [track]
    });
})
.then(room => {
    window.room = activeRoom = room;
    console.log('Connected to Room ' + roomName);
    
    room.participants.forEach(participantConnected);
    room.on('participantConnected', participantConnected);
    
    room.on('participantDisconnected', participantDisconnected);
    room.once('disconnected', error => room.participants.forEach(participantDisconnected));
    
    room.on('reconnecting', error => {
        if (error.code === 53001) {
            console.log('Reconnecting your signaling connection!', error.message);
        } else if (error.code === 53405) {
            console.log('Reconnecting your media connection!', error.message);
        }
    });

    room.on('reconnected', () => {
        console.log('Reconnected your signaling and media connections!');
    });
    
    room.on('participantReconnected', remoteParticipant => {
        console.log(`${remoteParticipant.identity} has reconnected the signaling connection to the Room!`);
    });
})
.catch(error => {
    console.error('Setup error:', error);
});

额外检查项 #

• 验证模型文件路径：检查浏览器控制台是否有模型文件（如model.json）的404请求，若有需修正assetsPath指向正确的模型文件目录。
• 浏览器兼容性：确保使用的浏览器支持WebAssembly和MediaStreamTrackProcessor（Chrome 94+、Edge 94+、Safari 15.4+）。
• 确认处理器添加逻辑：如果使用自定义的setProcessor函数，需确保内部调用了track.addProcessor(processor)，而非仅处理本地显示。

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