在 webRTC 中切换摄像头

Question

如何在 RTCMulticonnection 中切换摄像头

我获取设备列表及其ID

  var videoDevices = document.getElementById('video-devices');
        var audioDevices = document.getElementById('audio-devices');

        connection.DetectRTC.load(function() {

                connection.DetectRTC.audioInputDevices.forEach(function(device) {
                    var option = document.createElement('option');
                    option.innerHTML = device.label;
                    option.value = device.id;
                    document.querySelector('select').appendChild(option);
                    });
                connection.DetectRTC.videoInputDevices.forEach(function(device) {
                    var option = document.createElement('option');
                    option.innerHTML = device.label;
                    option.value = device.id;
                    videoDevices.appendChild(option);
                });
        });

并尝试通过以下方式更改相机。取自GitHub issue

document.getElementById('switch-camera').onclick = function() {
          var videoSourceId = videoDevices.value;
          connection.codecs.video = 'VP8';
          connection.bandwidth  = { // all values in kbits/per/seconds
            audio: 192,
            video: 512,
            screen: 512
           };
           connection.stopMediaAccess();

            setTimeout(() => {
                 connection.mediaConstraints.video.optional = [{
                       sourceId: videoSourceId
                 }];

            connection.addStream({audio: true, video: true});

             },2000);
   };

但不使用相机根本不会改变 我尝试了很多方法，但都失败了

这是codepen上的一个例子

来自WebRTC samples 的这个例子可能有助于它做我想做的事，但对与 RTCMulticoonection 的集成感到困惑。

Answer 1

如果要前后切换摄像头，RTCMulticonnection 的documentation 有解决方案。

如果您想切换摄像头（即前/后），这里是您的解决方案

function openOrJOinRoom(roomid) {
    connection.mediaConstraints = {
        audio: true,
        video: {
            facingMode: {exact : 'environment'}
        }
    };

    connection.openOrJoin(roomid);
}

function selectFrontCameraDuringActiveSession() {
    // we need to stop previous video tracks because
    // mobile device may not allow us capture
    // both front and back camera streams
    // at the same time
    connection.attachStreams.forEach(function(stream) {
        // stop only video tracks
        // so that we can recapture video track
        stream.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    });

    var mediaConstraints = {
        audio: false, // NO need to capture audio again
        video: {
            facingMode: {exact : 'user'}
        }
    };

    navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(frontCamera) {
        var frontCameraTrack = frontCamera.getVideoTracks()[0];
        connection.getAllParticipants().forEach(function(pid) {
            connection.peers[pid].peer.getSenders().forEach(function(sender) {
                if (sender.track.kind == 'video') {
                    sender.replaceTrack(frontCameraTrack);
                }
            });
        });
    });
}

function selectBackCameraDuringActiveSession() {
    // we need to stop previous video tracks because
    // mobile device may not allow us capture
    // both front and back camera streams
    // at the same time
    connection.attachStreams.forEach(function(stream) {
        // stop only video tracks
        // so that we can recapture video track
        stream.getVideoTracks().forEach(function(track) {
            track.stop();
        });
    });

    var mediaConstraints = {
        audio: false, // NO need to capture audio again
        video: {
            facingMode: {exact : 'environment'}
        }
    };

    navigator.mediaDevices.getUserMedia(mediaConstraints).then(function(frontCamera) {
        var frontCameraTrack = frontCamera.getVideoTracks()[0];
        connection.getAllParticipants().forEach(function(pid) {
            connection.peers[pid].peer.getSenders().forEach(function(sender) {
                if (sender.track.kind == 'video') {
                    sender.replaceTrack(frontCameraTrack);
                }
            });
        });
    });
}

我从 GitHub issue 复制了这个。 请不要忘记添加adapter.js 希望这个答案对您有所帮助。