如何在Twilio可编程视频中显示远端参会者的视频画面？

问题核心原因 #

你在trackSubscribed回调触发时拿到的轨道仅完成了信令层面的订阅，远端视频的媒体数据还没有完成首帧传输和解码，此时轨道的dimensions属性尚未初始化，所以打印宽高为null是正常现象。
你观察到的“视频没有被添加到DOM”通常是两种情况导致的：

• 你插入的video元素还没有加载到任何媒体数据，处于黑屏/透明状态，视觉上误以为没有插入成功
• 你的页面样式规则中存在对video元素的可见性限制（比如要求宽高大于0才显示），此时元素初始尺寸为0被隐藏

等几秒后轨道已经完成首帧加载，dimensions被赋值，手动调用时插入的元素就能正常渲染。

修复方案 #

不需要等待宽高返回再插入元素，直接插入video元素到DOM，监听元素的媒体加载事件处理后续尺寸适配逻辑即可，修改后代码如下：

var LastTrack;

function trackSubscribed(HtmlParent, track) {   
    LastTrack = track;  
    const videoEl = track.attach();
    // 监听媒体元数据加载完成事件，此时可拿到正确的轨道宽高
    videoEl.addEventListener('loadedmetadata', () => {
        console.log("the track width is : " + track.dimensions.width);
        console.log("the track Height is : " + track.dimensions.height);
        // 如有尺寸适配、容器调整等逻辑，放在这里执行
    });
    // 直接插入元素，媒体数据加载完成后会自动渲染画面
    HtmlParent.appendChild(videoEl); 
}
      
function participantConnected(HtmlParent, participant) {    
    participant.tracks.forEach(publication => {
        // 新增视频轨道类型判断，避免处理音频轨道
        if (publication.isSubscribed && publication.track.kind === 'video') {
            trackSubscribed(HtmlParent, publication.track);
        } else { 
            console.log('Track not subscribed or not video track'); 
        }
    });
    
    participant.on('trackSubscribed', track => {
        // 新增视频轨道类型判断
        if (track.kind === 'video') {
            trackSubscribed(HtmlParent, track);
        }
    });
}

额外建议排查页面CSS规则，给video元素设置最小宽高，避免元素因初始尺寸为0被隐藏。

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