Choose Camera possible?

[Natrium83]

Choose Camera possible?

[Huseriato]

Removing and adding a whole connection seems quite complicated. Think about a multi call scenario with many connections to different clients. Is there really no way to use the desired onnegotationneeded event? It's fired on the side where the stream is changed. I'm trying to send an offer/answer to the other side in this case. But the new offer is ignored on the other side. Removing the if-constraint there will result in multiple errors "invalid rtc state errors".

I like to have a "modern" solution. I've control over the webbrowser the user uses. So there is no need to support older browsers. Did you ever tried the modern approach or are there other problems involved, which makes this impossible?

[stephenlb]

Yes. See screenshot below. Animated Gif.

[stephenlb]

animated gif webRTC camera selection (6MB)

[Pacific112]

If you want to this more programatically and for example by default use rear camera on mobile phone instead of front camera you can:

1. Enumerate divices and find the one you want to use (example for finding back camera):

     `var videoLabel; 
    var videoDeviceId;
    navigator.mediaDevices.enumerateDevices()
    .then(function (deviceInfos) {
   
        for (var i = 0; i !== deviceInfos.length; ++i) {
            if (deviceInfos[i].kind === 'videoinput') {
                videoLabel = deviceInfos[i].label.split(' ')[1];
                if (deviceInfos[i].label.match(/back/g) ||
                    deviceInfos[i].label.match(/environment/g)) {
                    videoDeviceId = deviceInfos[i].deviceId;
                }
                else {
                    videoDeviceId = deviceInfos[i].deviceId;
                }
            }
        }
    });`
   

2. Create PHONE object like this:

     ` var phone = PHONE({
        number: 1234,
        publish_key: 'pub-c-dbc4d5bc-4bd3-4283-b6c3-25cd5bf331a0',
        subscribe_key: 'sub-c-73238dd8-30df-11e7-bc1c-0619f8945a4f',
        ssl: true,
        media: {audio: true, video: {deviceId: {exact: videoDeviceId}}}
    });`
   

[stephenlb]

This looks amazing!

[pdxbenjamin]

I've been attempting to get a second camera working for awhile now. I could use a bit of guidance.
So far I have the demo of this repo working, I use xirsys as my STUN/TURN service and PubNub for Signalling. All is well.
Within the startcamera() function on line 442 in the webrtc-v2.js I've modified that function and created a Option / Select for Camera 1, Camera 2, etc using the, "navigator.mediaDevices.enumerateDevices()" Found here - https://raw.githubusercontent.com/webrtc/samples/gh-pages/src/content/devices/input-output/js/main.js
This actually works and is allowing me to select from a drop down a USB camera, and then back to the built in camera. This functionality also changes the source "blob". All is well!
However now, what can I do to get the other video stream to update? When I change camera source, the other video freezes and can never recover, short of a full page refresh.

Help?!

@stephenlb @Pacific112

[Huseriato]

Hello,

I'll need assistance in this question too. I've found out, that the client have to send a new sdp offer or answer in the onnegotiationneeded event but all of my attempts failed. When changing the local camera, that the screen on the other side is always freezing, because there is no more stream data.

I've tried this in onnegotiationneeded:

      if(options.direction === ghWebRtcConversationDirection.incoming) {
        console.log('create answer on local stream change');
        if(_descriptionPaket) {
          _peerConnection.setRemoteDescription(
            new RTCSessionDescription(_descriptionPaket),
            function() {
              _peerConnection.createAnswer(
                function(answer) {
                  _peerConnection.setLocalDescription(answer, $.noop, handleError);
                  transmit(options.sessionIdentifier, answer, 2);
                },
                handleError,
                {}
              );
            }
          );
        }
      }
      else if(options.direction === ghWebRtcConversationDirection.outgoing) {
        console.log('create offer on local stream change');
        _peerConnection.createOffer(
          function(offer) {
            transmit(options.sessionIdentifier, offer, 2);
            console.log('sent offer to other client');
          },
          handleError,
          {}
        );
      }

I think there is something missing in the function add_sdp_offer(message). There is a line of code:

if (type in talk)
  return;
talk[type] = true;

So a "reoffer" is always dropped. Commenting out this, results in many "invalid rtc state errors" of the browser. So I really don't know how to change this.

Does anyone have some suggestions?

[stephenlb]

You can best achieve this by ending the existing session and starting a new one. If you want a Seamless Transition, then start the new stream and connect to your caller, upon success, allow the receiving client to close the old connection. You can overlay the original video feed with the new video feed to make this appear seamless.

This simple approach should solve your needs for all WebRTC clients, even older outdated WebRTC Clients will accept this approach.