如何解决Twilio + React:如何在通话期间更改音频或视频输入设备?
我一直在查看文档,但我无法弄清楚。当用户选择不同的设备时,其他用户将无法再听到那个人的声音。这一定意味着取消发布曲目的事情进展顺利,对吗?我不确定。
const setDevice = (device) => {
if(!room) return
let deviceid = device.deviceid
const localParticipant = room.localParticipant
if(device.kind === 'audioinput'){
setSelectedAudioDevice(device.label)
Video.createLocalAudioTrack({
deviceid: {exact: deviceid}
}).then((localAudioTrack) => {
const tracks = localParticipant.audioTracks
tracks.forEach((track) => {
localParticipant.unpublishTrack(track.track)
})
localParticipant.publishTrack(localAudioTrack)
})
} else if(device.kind === 'videoinput'){
setSelectedVideoDevice(device.label)
Video.createLocalVideoTrack({
deviceid: {exact: deviceid}
}).then((localVideoTrack) => {
const tracks = localParticipant.videoTracks
tracks.forEach((track) => {
localParticipant.unpublishTrack(track.track)
})
localParticipant.publishTrack(localVideoTrack)
})
}
}
每个参与者都有自己的组件,他们在其中订阅曲目。但是,此代码来自 Twilio 示例之一,因此我不完全确定它是如何工作的。
const trackpubsToTracks = (trackMap) =>
Array.from(trackMap.values())
.map((publication) => publication.track)
.filter((track) => track !== null);
useEffect(() => {
setVideoTracks(trackpubsToTracks(participant.videoTracks));
setAudioTracks(trackpubsToTracks(participant.audioTracks));
const trackSubscribed = (track) => {
if (track.kind === "video") {
setVideoTracks((videoTracks) => [...videoTracks,track]);
} else if (track.kind === "audio") {
setAudioTracks((audioTracks) => [...audioTracks,track]);
}
};
const trackUnsubscribed = (track) => {
if (track.kind === "video") {
setVideoTracks((videoTracks) => videoTracks.filter((v) => v !== track));
} else if (track.kind === "audio") {
setAudioTracks((audioTracks) => audioTracks.filter((a) => a !== track));
}
};
participant.on("trackSubscribed",trackSubscribed);
participant.on("trackUnsubscribed",trackUnsubscribed);
return () => {
setVideoTracks([]);
setAudioTracks([]);
participant.removeAllListeners();
};
},[participant]);
useEffect(() => {
const videoTrack = videoTracks[0];
if (videoTrack) {
videoTrack.attach(videoRef.current);
return () => {
videoTrack.detach();
};
}
},[videoTracks]);
useEffect(() => {
const audioTrack = audioTracks[0];
if (audioTrack) {
audioTrack.attach(audioRef.current);
return () => {
audioTrack.detach();
};
}
},[audioTracks]);
如果有人知道我如何在通话中处理设备切换,我将不胜感激。
解决方法
这里是 Twilio 开发者布道者。
我发现这里的最佳操作顺序是:
- 从房间取消发布本地参与者的现有曲目,这将在房间中为任何其他参与者触发
trackRemoved
事件 - 从页面分离现有轨道
- 完全停止轨道
- 使用
createLocal(Video|Audio)Track
请求新曲目 - 将新曲目附加到页面
- 将新曲目发布到房间,为其他参与者触发房间上的
trackAdded
事件
对于不允许您一次访问多个摄像头的 iOS 设备尤其如此。
以下是我之前使用过的一些代码,但未在 React 应用程序中使用:
function stopTracks(tracks) {
tracks.forEach(function(track) {
if (track) { track.stop(); }
})
}
function updateVideoDevice(event) {
const select = event.target;
const localParticipant = activeRoom.localParticipant;
if (select.value !== '') {
const tracks = Array.from(localParticipant.videoTracks.values()).map(
function(trackPublication) {
return trackPublication.track;
}
);
localParticipant.unpublishTracks(tracks);
detachTracks(tracks);
stopTracks(tracks);
Video.createLocalVideoTrack({
deviceId: { exact: select.value }
}).then(function(localVideoTrack) {
localParticipant.publishTrack(localVideoTrack);
log(localParticipant.identity + ' added track: ' + localVideoTrack.kind);
const previewContainer = document.getElementById('local-media');
attachTracks([localVideoTrack],previewContainer);
});
}
}
您可以在 this repo on GitHub 和 I wrote about it here 中查看整个应用程序。
我认为您所指的 React 示例也是我的示例之一。我实际上尝试将相机更改添加到分支上的该存储库。显然是一年前,但you can see the updates here。希望这也能为您指明正确的方向。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。