Twilio可编程视频 - 在LocalVideoTrack上调用.disable（）不会阻止它被传输

Question

我试图让我的用户通过禁用视频来减少他们的呼叫频率。文件说：

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

要控制LocalVideoTrack的单个LocalAudioTrack的静音/取消静音或暂停/取消暂停状态，您可以使用LocalTrack #enable和LocalTrack #disable方法。 “

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

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)函数时，很可能不会使用新创建的本地轨道。所以当你没有在tracks中指定options时，它将创建具有不同id的新本地轨道。因此，您可以通过由createLocalVideoTrack()或createLocalTracks()函数创建的本地视频轨道查看本地视频，并通过在connect()功能期间创建的完全不同的本地视频轨道将视频数据发送给远程参与者。

因此，为了克服此问题，您应该在选项中指定创建的轨道，以便使用相同的轨道或获取从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);
});