成功连接Twilio视频房间后，如何用原生JS添加页面视频播放器？

你之前尝试的Twilio.Video.Player是用来播放录制完成的视频文件的，并不适用于实时视频房间的媒体流展示，属于用错了API。针对实时视频场景，需要直接处理媒体轨道（Track）并将其附加到HTML的video元素上，以下是适配你所用2.14.0版本SDK的具体实现：

1. 核心实现逻辑 #

连接房间成功后，需要分别处理本地摄像头视频和远端参与者视频：

修改后的完整代码 #

var connectOptions = {
  accessToken: 'eyJhb...',
  roomName: 'test127',
  audio: true,
  video: { width: 640 }
  // 注：_useTwilioConnection是内部属性，无需手动设置，SDK会自动处理
};

document.addEventListener("DOMContentLoaded", function() {
  Twilio.Video.connect(connectOptions.accessToken, connectOptions).then(function(room) {
    console.log('Connected to Room "%s"', room.name);
    console.log(room);

    // 处理本地视频轨道
    room.localParticipant.tracks.forEach(function(trackPublication) {
      if (trackPublication.track.kind === 'video') {
        const localVideo = document.getElementById('videoinput');
        trackPublication.track.attach(localVideo);
      }
    });

    // 监听本地轨道新增（比如中途开启视频的场景）
    room.localParticipant.on('trackAdded', function(track) {
      if (track.kind === 'video') {
        const localVideo = document.getElementById('videoinput');
        track.attach(localVideo);
      }
    });

    // 处理已在房间中的远端参与者
    room.participants.forEach(handleRemoteParticipant);

    // 监听新的远端参与者加入
    room.on('participantConnected', handleRemoteParticipant);

  }, function(error) {
      console.error('Failed to connect to Room', error);
  });
});

// 封装远端参与者视频处理逻辑
function handleRemoteParticipant(participant) {
  // 处理该参与者已发布的视频轨道
  participant.tracks.forEach(function(trackPublication) {
    if (trackPublication.track && trackPublication.track.kind === 'video') {
      const remoteVideo = document.createElement('video');
      remoteVideo.autoplay = true;
      remoteVideo.id = `remote-video-${participant.sid}`;
      document.getElementById('player-container').appendChild(remoteVideo);
      trackPublication.track.attach(remoteVideo);
    }
  });

  // 监听该参与者新增视频轨道
  participant.on('trackAdded', function(track) {
    if (track.kind === 'video') {
      const remoteVideo = document.createElement('video');
      remoteVideo.autoplay = true;
      remoteVideo.id = `remote-video-${participant.sid}`;
      document.getElementById('player-container').appendChild(remoteVideo);
      track.attach(remoteVideo);
    }
  });

  // 监听轨道移除，清理页面元素
  participant.on('trackRemoved', function(track) {
    track.detach().forEach(element => element.remove());
  });
}

2. 代码说明 #

• 本地视频：直接复用你已有的<video id="videoinput" autoplay></video>元素，将本地视频轨道附加到该元素上，就能显示自己的摄像头画面。
• 远端视频：每加入一个远端参与者，就动态创建一个video元素，放入player-container容器中，再附加对应的视频轨道；同时监听轨道移除事件，及时清理页面上的无效元素。
• 确保video元素设置autoplay属性，摄像头授权通过后，视频会自动播放（部分浏览器可能需要静音才能自动播放，可根据需求添加muted属性）。

内容的提问来源于stack exchange，提问作者Andrew Arrow