webrtc如何在保持通话的情况下实现手机端前、后置摄像头切换，将切换后摄像头的video传到远端

Question

webrtc如何在保持通话的情况下实现手机端前、后置摄像头切换，将切换后摄像头的video传到远端, 增加了这段客户获取stream，但没传到远端，远端是黑屏的

navigator.mediaDevices.enumerateDevices()
            .then(devices => {
                // 找到类型为'videoinput'的设备，即摄像头
                const videoInputDevices = devices.filter(device => device.kind === 'videoinput');

                // 选择要使用的摄像头设备，例如，选择第一个设备
                const selectedDevice = videoInputDevices[2];
                console.log(selectedDevice.deviceId);
                // 后台赋流
                c2c_phone.setConstraint('video', 'deviceId', selectedDevice.deviceId);
                console.log('强制使用后置摄像头');
            })
            .catch(error => {
                console.error('Error enumerating media devices.', error);
            });

这段是负责手机端展示和推流的，此函数可以用，是webrtc提供的

callShowStreams: function (call, localStream, remoteStream) {
            c2c_ac_log('phone>>> callShowStreams');
            c2c_audioPlayer.stop();

            // The speaker selection works only in Chrome (except iOS Chrome)
            if (!c2c_devices) {
                c2c_remoteVideo.srcObject = remoteStream;
                c2c_remoteVideo.volume = c2c_isRegularCall ? 1.0 : c2c_config.testCallVolume;
            } else {
                c2c_setRemoteVideoSinkId()
                    .catch((e) => {
                        c2c_ac_log(`Warning: remove video HTMLVideoElement.setSinkId(): "${e.message}" [Used default browser speaker]`, e);
                    })
                    .finally(() => {
                        c2c_remoteVideo.srcObject = remoteStream;
                        c2c_remoteVideo.volume = c2c_isRegularCall ? 1.0 : c2c_config.testCallVolume;
                    });
            }
        },

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

要实现webrtc在保持通话的情况下实现手机端前、后置摄像头切换，并将切换后摄像头的video传到远端，需要以下步骤：

1. 获取所有可用的媒体设备列表，选择要使用的摄像头设备。 可以使用navigator.mediaDevices.enumerateDevices()方法，该方法返回一个Promise并且会查询系统中可用的视频和音频设备。在返回的设备列表中筛选出类型为“videoinput”的设备，即是摄像头，然后选择要使用的摄像头设备，例如，选择第一个设备作为默认摄像头。 示例代码： navigator.mediaDevices.enumerateDevices() .then(devices => { const videoInputDevices = devices.filter(device => device.kind === 'videoinput'); const selectedDevice = videoInputDevices[0]; console.log(selectedDevice.deviceId); }) .catch(error => { console.error('Error enumerating media devices.', error); });
2. 修改MediaStream，将新的摄像头流添加到MediaStream中。 通过mediaStreamTrack.applyConstraints()方法修改MediaStream中原有轨道的约束，将其绑定到新的摄像头设备上，生成新的摄像头流，并将其添加到MediaStream中。 示例代码： // 获取已有的本地媒体流并创建新的约束 const localStream = c2c_phone.getLocalStream(); const constraint = { video: { deviceId: { exact: selectedDevice.deviceId } } }; // 绑定新的约束到本地摄像头 localStream.getVideoTracks()[0].applyConstraints(constraint);
3. 将修改后的新的MediaStream重新绑定到RTC连接中。 通过RTCPeerConnection.removeTrack()方法移除原有的轨道，并通过RTCPeerConnection.addTrack()方法将新的MediaStream中的轨道添加到RTC连接中，实现前后摄像头切换。 示例代码： const localVideoTrack = localStream.getVideoTracks()[0]; const senders = call.getSenders(); const sender = senders.find(s => s.track.kind === localVideoTrack.kind); // 移除原有的轨道，添加新的轨道 call.removeTrack(sender); call.addTrack(localVideoTrack, localStream);
4. 将新的MediaStream重新发送到远端。 需要在RTC连接中监听到新的媒体流本地发生变化，并通过RTCPeerConnection.onnegotiationneeded事件，重新协商交换会话描述，将新的MediaStream重新发送给远端。 示例代码： // 监听DTO媒体流本地变化，触发协商交换 localStream.oninactive = () => { console.log('Local stream inactive'); call.onnegotiationneeded(); }; 根据实际情况，上述示例代码可能需要适当调整或修改。