Calling getUserMedia with new restrictions causes black screen (MediaStream.ended = true)
On my nexus4 (Android 4.4.4) I am trying to switch between a "custom" camera and an "environment" facing the camera .
Accessing one of them directly works. Switching between bij makes another call to navigator.getUserMedia()
set new constraints. The error results in a black screen and MediaStream.ended = true .
Why MediaStream.ended = true on my second call to getUserMedia?
In my opinion I am dynamically creating buttons for the number of video sources. Two in this case. Pressing the buttons will call camera.getUserMedia()
and go to the media source:
camera.getUserMedia = function(source){
var constraints = {
video: true,
audio: false
};
if(source){
constraints.video = {optional: [{
sourceId: source.id
}]};
}
navigator.getMedia(
constraints,
function(stream) {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
video.play();
streaming = true;
},
function(err) {
...
}
);
};
source to share
I solved this problem by saving the stream on the camera object and then before binding the stream to the video element, I will stop the call on it . Not really sure what exactly is going on (maybe someone can add an explanation in the comments).
camera.getUserMedia = function(source){
if(camera.stream){
camera.stream.stop();
}
...
navigator.getMedia(
constraints,
function(stream) {
camera.stream = stream;
...
},
function(err) {
...
}
);
};
source to share