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??

More detail of what's going wrong would probably help - can you provide any more information? — Vivian
– Vivian, Commented Nov 30, 2016 at 14:54
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) { } } — john
– john, Commented Nov 30, 2016 at 15:21

Community · Accepted Answer · 2017-05-23 11:54:29Z

11

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.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Dec 1, 2016 at 3:56

jib

42.8k17 gold badges111 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

john Over a year ago

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

jib Over a year ago

That's a different question. See stackoverflow.com/a/35515536/918910

john Over a year ago

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

zabumba Over a year ago

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.

zabumba Over a year ago

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.

|

carloseme · Accepted Answer · 2017-07-24 14:41:41Z

3

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

answered Jul 24, 2017 at 14:41

carloseme

491 silver badge3 bronze badges

Comments

Kaushal Sachan · Accepted Answer · 2018-11-19 09:27:23Z

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

answered Nov 19, 2018 at 9:27

Kaushal Sachan

1,29114 silver badges10 bronze badges

1 Comment

jay Over a year ago

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)!

Collectives™ on Stack Overflow

switch camera using MediaDevices.getUserMedia() in webrtc

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related