如何在通话中交换 webrtc 中的相机源(javascript API) [英] How to swap camera sources in webrtc while in a call (javascript APIs)

问题描述

在 iOS 上我可以:

On iOS I can do:

// set a new camera id
cameraId = ([cameraId isEqualToString:frontCameraId]) ? backCameraId : frontCameraId;

// determine if the stream has a video track
BOOL hasActiveVideoTrack = ([self.localMediaStream.videoTracks count] > 0);

// remove video track from the stream
if (hasActiveVideoTrack) {
    [self.localMediaStream removeVideoTrack:self.localVideoTrack];
}

// remove renderer from the video track
[self.localVideoTrack removeRenderer:self.localVideoView];

// re init the capturer, video source and video track
localVideoCapturer = nil;
localVideoSource = nil;
localVideoCapturer = [RTCVideoCapturer capturerWithDeviceName:cameraId];
localVideoSource = [peerConnectionFactory videoSourceWithCapturer:localVideoCapturer constraints:mediaConstraints];

// create a new video track
self.localVideoTrack = [peerConnectionFactory videoTrackWithID:@"ARDAMSv0" source:localVideoSource];
[self.localVideoTrack addRenderer:self.localVideoView];

// add video track back to the stream
if (hasActiveVideoTrack) {
    [self.localMediaStream addVideoTrack:self.localVideoTrack];
}

在前后摄像头之间切换.我可以在通话中调用上面的代码，遥控器将暂时停止接收帧，然后继续接收帧，但现在来自另一台摄像机.我如何在 javascript 中做同样的事情?您不像我在 iOS 中那样专门创建视频轨道，那么如何在不开始新呼叫的情况下告诉流使用不同的摄像头设备?

to switch between the front and back camera. I can call above code while in a call and the remote will briefly stop receiving frames and then continue receiving frames, but now from the other camera. How can I do the same in javascript? You don't specifically create a videotrack like I do in iOS, so how do I tell the stream to use a different camera device without starting a new call?

推荐答案

这是一项实验性技术

WebRTC Javascript 代码示例包含相机选择示例:

WebRTC Javascript code samples contain an example of camera selection :

• https://webrtc.github.io/samples/src/内容/设备/输入输出/

在github上提供源代码:

with source code available on github :

• https://github.com/webrtc/samples
  • https://github.com/webrtc/samples/blob/gh-pages/src/js/adapter.js

  使用 MediaDevices.enumerateDevices(在 chrome 和 firefox 上)获取视频|音频源

  Get video|audio sources using MediaDevices.enumerateDevices (on chrome and firefox)

  • https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

  MediaStreamTrack.getSources(仅限 chrome)已弃用，取而代之MediaDevices.enumerateDevices()

  MediaStreamTrack.getSources (only chrome) was deprecated in favour of MediaDevices.enumerateDevices()

  navigator.mediaDevices.enumerateDevices =
          navigator.mediaDevices.enumerateDevices || function() {
            return new Promise(function(resolve) {
              var infos = [
                {kind: 'audioinput', deviceId: 'default', label: '', groupId: ''},
                {kind: 'videoinput', deviceId: 'default', label: '', groupId: ''}
              ];
              resolve(infos);
            });
          };
  
      if (browserDetails.version < 41) {
        // Work around http://bugzil.la/1169665
        var orgEnumerateDevices =
            navigator.mediaDevices.enumerateDevices.bind(navigator.mediaDevices);
        navigator.mediaDevices.enumerateDevices = function() {
          return orgEnumerateDevices().then(undefined, function(e) {
            if (e.name === 'NotFoundError') {
              return [];
            }
            throw e;
          });
        };
      }
    }
  

  交换摄像头@omar-khaled 来自@wpp 的回答 更改 RTCPeerConnection 的 MediaStream

  to swap cameras, @omar-khaled answer from @wpp Changing a MediaStream of RTCPeerConnection

  • https://www.webrtc-experiment.com/docs/how-to-switch-streams.html

  _this.rtc.localstream.stop();
  _this.rtc.pc.removeStream(_this.rtc.localstream);
  
  gotStream = function (localstream_aud){
  var constraints_audio={
      audio:true
     }
  
  _this.rtc.localstream_aud = localstream_aud;
  _this.rtc.mediaConstraints= constraints_audio;   
  _this.rtc.createOffer();
  }
  getUserMedia(constraints_audio, gotStream);
  
  gotStream = function (localstream){
  var constraints_screen={
          audio:false,
          video:{
              mandatory:{
                  chromeMediaSource: 'screen'
              }
          }
      }
    _this.rtc.localstream = localstream;
    _this.rtc.mediaConstraints=constraints_video;
  
  
    _this.rtc.createStream();  
    _this.rtc.createOffer();
  }
  getUserMedia(constraints_video, gotStream);
  

  这篇关于如何在通话中交换 webrtc 中的相机源(javascript API)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！