Twilio 流丟失 GaussianBlurBackgroundProcessor

Question

我嘗試設置 GaussianBlurBackgroundProcessor（我使用這篇文章作為起點，但我在 php 頁面中使用 *.min.js 而不是 node.js）。 在本地視頻上它可以工作，但是當我在房間里連接我的視頻時，遠程參與者會看到我的視頻“干凈”。 有人有我同樣的問題嗎？

我使用的最小版本：

• twilio-video.js 2.22.1
• twilio-video-processors.js 1.0.2

這是代碼：

[...]
    const TWVideo = Twilio.Video;

    const bg = new Twilio.VideoProcessors.GaussianBlurBackgroundProcessor({
        assetsPath: '',
        maskBlurRadius: 5,
        blurFilterRadius: 25,
    });
    bg.loadModel();
    
    const localVideo = TWVideo.createLocalVideoTrack().then(track => {
        let video = document.getElementById('local-media').firstElementChild;

        setProcessor(bg, track);
        video.appendChild(track.attach());
        $('#local-media').find('video').css('width', '200px');
    });
    
    TWVideo.connect(room_token, {
        name: roomName
    }).then(room => {
        window.room = activeRoom = room;
        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 => {
            assert.equal(room.state, 'reconnecting');
            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!');
            assert.equal(room.state, 'connected');
        });
        
        room.on('participantReconnected', remoteParticipant => {
            console.log("${remoteParticipant.identity} has reconnected the signaling connection to the Room!");
            assert.equals(remoteParticipant.state, 'connected');
        })
    });
[...]

謝謝！

Answer 1

問題是您正在創建一個本地視頻軌道並對其應用模糊，但是當您連接到房間時您沒有使用該軌道。 我會先創建本地視頻軌道和音頻軌道，然后在您像這樣連接時將它們應用到房間：

Video.connect(roomToken, {
  name: roomName,
  tracks: [localVideo, localAudio]
}).then(…);