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

【问题标题】：Twilio video participant track not loading to domTwilio 视频参与者轨道未加载到 dom
【发布时间】：2018-11-02 16:37:07
【问题描述】：

我正在关注quickstart tutorial中的示例

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

第 13 行有： container.appendChild(track.attach());

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

Uncaught (in promise) TypeError: track.attach is not a function

这是因为RemoteVideoTrackPublication 对象的结构（上面解析为track）在其中包含对象“轨道”，所以它真的应该为参与者对象的container.appendChild(track.track.attach()); .. 但是

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

这是一个简单的 DOM 问题还是事件排序问题？

【问题讨论】：

显示一些代码会有帮助
在这里查看更多您正在使用的代码会很有用。另外，请注意快速入门教程使用的是 Twilio Video 1.x 版，我相信 RemoteVideoTrackPublication 对象是 2.x 版的一部分。

标签： javascript dom video twilio webrtc

【解决方案1】：

我有同样的问题，我在将 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());
        }
     });
});

【讨论】：

【解决方案2】：

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

【讨论】：

请不要发布仅代码的答案。对于未来的读者来说，看到解释为什么这回答了这个问题会更有趣。带有解释的答案往往更容易被接受。