页面加载时触发Twilio Programmable Video实时视频播放问题咨询

问题原因 #

该问题确实是Chrome自动播放政策导致的。Twilio的track.attach()方法默认会给生成的video/audio标签添加autoplay属性，如果远端轨道包含音频，在无用户交互的页面加载上下文调用该方法时，会触发Chrome的自动播放限制，抛出未捕获的播放权限错误，导致后续的DOM插入逻辑中断，因此你看不到视频标签被添加到文档中。

按钮点击场景下逻辑正常，是因为点击属于浏览器认可的用户交互上下文，该上下文内触发的带音频媒体自动播放不受政策限制。

解决方案 #

你可以根据业务场景选择以下任意方案解决：

• 方案1：音频默认静音绕开限制
  修改AddParticipantAudioAndVideo函数，给附加的音频轨道默认设置静音，绕开自动播放政策限制，后续可在用户交互后再恢复音频播放：

function AddParticipantAudioAndVideo(participant) {     
    participant.tracks.forEach(publication => {
        if (publication.track) {
            const mediaEl = publication.track.attach();
            // 音频轨道默认静音，绕开自动播放限制
            mediaEl.muted = publication.track.kind === 'audio';
            document.getElementById("some html item").appendChild(mediaEl);
            console.log("track subscribed");                    
        }
    });
    
    participant.on('trackSubscribed', track => {
        const mediaEl = track.attach();
        mediaEl.muted = track.kind === 'audio';
        document.getElementById("some html item").appendChild(mediaEl);
        console.log('track subscribed');        
    });     
}

如果需要恢复音频，可在页面上增加一个按钮，点击时将所有音频标签的muted属性设为false即可。

• 方案2：手动控制播放时机
  去掉attach生成标签的默认autoplay属性，监听全局一次用户交互后统一播放所有媒体：

function AddParticipantAudioAndVideo(participant) {     
    const addTrack = (track) => {
        const mediaEl = track.attach();
        // 移除默认自动播放属性
        mediaEl.removeAttribute('autoplay');
        document.getElementById("some html item").appendChild(mediaEl);
    }
    participant.tracks.forEach(publication => publication.track && addTrack(publication.track));
    participant.on('trackSubscribed', track => addTrack(track));
}

// 页面加载后监听一次用户点击，统一播放所有媒体
document.body.addEventListener('click', () => {
    document.querySelectorAll('video, audio').forEach(el => el.play());
}, { once: true });

• 方案3：提前申请媒体权限
  如果你的业务本身需要申请用户的摄像头/麦克风权限，可在页面加载时先调用navigator.mediaDevices.getUserMedia申请权限，用户授权后自动播放限制会解除，后续track.attach()逻辑即可正常运行。

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