switch camera using MediaDevices.getUserMedia() in webrtc

Question

I am trying navigator.MediaDevices.getUserMedia() webrtc to switch the device camera during the call. This functionality is working fine on the desktop browser but on mozilla android it is not working. Here is my code that i am using .

var front=false;

var myConstraints = {  video: { facingMode: (front? "user" : "environment")} }; 
navigator.mediaDevices.getUserMedia(myConstraints).then(function(stream) {

}

any idea about this??

Godwin

More detail of what's going wrong would probably help - can you provide any more information? – Alula

i have made a calling system it is working fine.Now i want to include a feature to switch the camera.Switching is working fine on desktop firefox browser but it is not working in android firefox browser. It gives error "internal error starting video failed". Here is the code document.getElementById('flip-button').onclick = function() { var myConstraints = { video: { facingMode: (front? "user" : "environment")} }; navigator.mediaDevices.getUserMedia(myConstraints).then(func‌​ tion(stream) { } } – Godwin

Hello @Godwin were you able to resolve your issue? – Picaresque

Answer 1

Phone hardware typically doesn't allow opening both the front and back camera at the same time. Change your code to stop() the existing stream before getting the other camera.

See my answer to a similar question for a working example.

Confetti

I really appreciate for your help. i am using stop(); I am using simplepeer.js library with pusher.js as a peer connection channel. My camera is now switching on both mobile and desktop but still there are some problems . When i switch the camera on sender side the receiver side camera hangs . Should i renegotiate call? Also Please define the difference between stream and window.stream. Here is my code on pastebin Kindly review the code . pastebin.com/bW0wa9F7 – Godwin

That's a different question. See https://mcmap.net/q/606798/-how-to-addtrack-in-mediastream-in-webrtc – Confetti

thanks,I am working on the link you referred to me. Now i am stuck with the issue that stream is not receiving at the receiver's end . I am sending user_id,user_name,stream in a signal from sender to receiver so that receiver can replace his current stream with the newly sent stream , user_id and user_name is receiving but the stream object is empty.This is what i am doing jsfiddle.net/1so8n164 – Godwin

stop() deprecated on MediaStream, it's now on MediaStreamTrack. However, I have tried stream.getTracks().forEach(track => track.stop()); to no avail. I cannot switch. I can one or the other from a fresh page, but cannot getUserMedia to change to another local stream. – Picaresque

@Picaresque On what browser? Did you try the fiddle I linked to? It does exactly this. – Confetti

I use Chrome on Android 6.0.1. I was trying to work this out with my own existing code without using the facingMode and the webrtc adapter. I will try that next. The new MediaStream that I get has the propertie active:false and on video track readyState:"ended" instead of the expected "live", that may explain the black rectangle. Not sure how to make it active. I do have the autoplay in my video tag. When I switch back to the front cam again, it's able to get a new MediaStream. – Picaresque

I have tried the code provided in this jsfiddle. I had to remove the exact and set face directly. However, all you get is a black rectangle for both front and back cameras. I am using a Samsung Galaxy S2 with Android 6.0.1 + latest Chrome v55.0.2883.91 . Although most threads mention about stopping previous stream before starting another, it doesn't look like it is the actual problem. – Picaresque

Answer 2

use the last version of adapter.js and see if NotReadableerror is happening, it seems that Chrome for android cannot release front camera hardware to switch to rear by using stream.getVideoTracks()[0].stop(); I think it could be a bug

Jenjena

Answer 3

Webcam.set({
        width: 490,
        height: 450,
        image_format: 'jpeg',
        jpeg_quality: 90,
        constraints: {
                    facingMode: {
                                  exact: 'environment'
                                  }

                }   
    });

This code is working for all browsers.

constraints: {facingMode: { exact: 'environment' }} 

Above line is responsible to open rear camera, set constraints : null to open front camera. you can also adjust this code by implementing "switch camera" button method

Melody

Don't know how this fix is working for me! Webcam was not opening in UC Browser. And this one opens the front camera for me(only in UC)! – Attorn