Twilio 可编程视频 - 在 LocalVideoTrack 上调用 .disable() 不会停止传输

Question

我试图让我的用户在通话不稳定时通过禁用视频来减少带宽使用。文档说：

“静音或暂停单个媒体轨道

要控制LocalVideoTrack的单个LocalAudioTrack的muted/unmuted或paused/unpaused状态，可以使用LocalTrack#enable和LocalTrack#disable方法。 “

然而，当我使用它时，本地媒体元素变黑（即它停止呈现）但远程流（在不同 window 中打开）仍然接收视频。我正在使用的代码包含在下面。

createLocalVideoTrack().then(track => {
            var localMediaContainer = document.getElementById(self.local_vid_id);
            var title = document.createElement('span')
            title.innerText = "Me";
            localMediaContainer.appendChild(title);
            var videoIcon = document.createElement('span')
            videoIcon.className = 'glyphicon glyphicon-facetime-video';
            videoIcon.title = 'Disable Video';
            videoIcon.videoTrack = track;
            videoIcon.onclick = (event) => {
                if (event.target.videoTrack.isEnabled) {
                    event.target.videoTrack.disable();
                    event.target.title = 'Enable Video';
                } else {
                    event.target.videoTrack.enable();
                    event.target.title = 'Disable Video';
                }
            }
            localMediaContainer.appendChild(videoIcon);
            localMediaContainer.appendChild(track.attach());
        });

有没有其他人遇到过这个问题，有简单的解决方法吗？

Answer 1

在这里回答我自己的问题，但希望其他人会发现它有用。

您需要删除 videoTrack 才能停止发送。我使用的代码的最终版本是

videoIcon.onclick = function(event) {
  if (event.target.videoTrack){
    self.room.localParticipant.videoTracks.forEach( (track) => {
      self.room.localParticipant.removeTrack(track,true);
    })
    trackRemoved(event.target.videoTrack);
    event.target.videoTrack.stop();
    event.target.title = 'Enable Video';
    event.target.videoTrack = undefined;
  } else {
    // Totally reconnect to the room
    self.stop();
    self.reconnect();
    self.startPreview();
  }
}

Answer 2

潜在的问题是您在调用 connect(token, options) 函数时很可能没有使用新创建的本地曲目。因此，当您未在 options 中指定 tracks 时，它将创建具有不同 ID 的新本地曲目。因此，您可以通过 createLocalVideoTrack() 或 createLocalTracks() 函数创建的本地视频轨道来查看本地视频，并通过 [=] 期间创建的完全不同的本地视频轨道将视频数据发送给远程参与者16=] 函数。

因此，为了解决这个问题，您应该在选项中指定创建的轨道，以便使用相同的轨道或获取从 connect() 函数创建的轨道。之后如果你调用 disable() 函数，它会在对话的双方静音。

选项 1 - 指定曲目。

const { connect, createLocalTracks } = require('twilio-video');

createLocalTracks({
  audio: true,
  video: true
}).then(localTracks => {
  return connect('$TOKEN', {
    name: 'my-room-name',
    tracks: localTracks
  });
}).then(room => {
  console.log('Connected to Room:', room.name);
  localTracks.forEach((track)=>{
     // hide camera after 5 seconds
     if(track.kind === 'video'){
       setTimeout(()=>{
         track.disable();
       } ,5000)  
     }
  }) 
});

选项 1 - 使用从连接创建的轨道

Twilio.Video.connect('$TOKEN', {name:'my-new-room'}).then(function(room) {
  console.log('Successfully joined a Room: ', room);
  room.localParticipant.tracks.forEach((track)=>{
     // hide camera after 5 seconds
     if(track.kind === 'video'){
       setTimeout(()=>{
         track.disable();
       } ,5000)  
     }
  });
  room.on('participantConnected', function(participant) {
    console.log('A remote Participant connected: ', participant);
  })
}, function(error) {
    console.error('Unable to connect to Room: ' +  error.message);
});

Twilio 可编程视频 - 在 LocalVideoTrack 上调用 .disable() 不会停止传输

Twilio Programmable video - Calling .disable() on LocalVideoTrack doesn't stop it being transmitted

video-streaming

webrtc

twilio

videochat