提问者:小点点

Twilio视频参与者轨道未加载到dom


我正在遵循快速入门教程中的示例

基本上我的本地视频工作正常,但是当参与者加入房间时,我似乎无法将轨道添加到DOM元素中,因为对象的格式不同。

第13行有:容器. append儿童(track.add());

但是我在参与者加入时收到以下错误:

未捕获(在Promise中)TypeError:track. add不是函数

这是因为RemoteVideoTrackPublation对象(上面解析为trace)的结构中包含对象'trace',所以它实际上应该是容器. append儿童(track.trace.add());用于参与者对象…HOWEVER

这仅适用于JS控制台。我可以在客户端JS控制台发生此错误后附加视频流-但无论我尝试什么,我似乎都无法正常添加轨道,因为附加。()函数似乎不存在于轨道对象上。

这是一个简单的DOM或事件排序问题吗?


共2个答案

匿名用户

我有同样的问题,当我更新twilio到版本2并在连接后更改代码时,我修复了它

room.participants.forEach(function (participant) {
     console.log('Remote Participant connected: ', participant);

     participant.tracks.forEach(function (publication) {
        if (publication.isSubscribed) {
            const track = publication.track;
            document.getElementById('co-browsing-remote-screen').appendChild(track.attach());
        }
     });
});

匿名用户

room.participants.forEach(function(participant) {
    let previewContainer = document.getElementById('remoteTrack');
    participant.on('trackSubscribed', track => {
       previewContainer.appendChild(track.attach());
    });
});