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) {
                ...
            }
        );
    };

      

enter image description here

+3


source to share


1 answer


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) {
                ...
            }
        );
    };

      

0


source







All Articles