pause navigator.getUserMedia

1

How do I pause the camera and microphone stream within the getUserMedia method?

I have my code like this:

navigator.getUserMedia({ video: true, audio: true },
    function (MediaStream) {

        var video = document.querySelector('#videoRecord');
        video.src = window.URL.createObjectURL(MediaStream);
        stream = MediaStream;
        var mediaRecorder = new MediaRecorder(MediaStream);

// como pausar aqui o stream e depois iniciar novamente?

}, errorCallback);

If I use

MediaStream.getAudioTracks()[0].stop();
MediaStream.getVideoTracks()[0].stop();

The camera light turns off, but I do not know how to put the stream back again, since I do everything within the getUserMedia function, so I do not know if it would make sense to use another getUserMedia within what already exists .

    
asked by anonymous 12.12.2017 / 14:37

1 answer

1

Pause Camera (MediaRecorder)

Try MediaRecorder.pause() and < a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/resume"> MediaRecorder.resume() to restore, you can also use the .pause in the video (if you have a video player), here's a simple example:

  

Important detail : navigator.getUserMedia() has been deprecated, ideal to use navigator.mediaDevices.getUserMedia()

<video id="player" controls autoplay></video>
<button id="play_pause">Play/Pause</button>

<script>  
var player = document.getElementById('player');
var playPause = document.getElementById('play_pause');

var stream, myMediaRecorder;

navigator.mediaDevices.getUserMedia({video: true}).then(function (streamHandle) {
    player.srcObject = streamHandle;
    stream = streamHandle;
    myMediaRecorder = new MediaRecorder(streamHandle);
    myMediaRecorder.start();
});

playPause.onclick = function () {
    if (player.paused) {
       player.play();
       myMediaRecorder.resume();
    } else {
       myMediaRecorder.pause();
       player.pause();
    }
};
</script>

Example jsfiddle

Stop releasing the camera (MediaRecorder)

To stop everything you need to use:

It is necessary to finish everything that is possible and to return it is necessary (at least better) to restart everything. Example:

<video id="player" controls autoplay></video>
<button id="play_pause">Play/Stop</button>

<script>  
var player = document.getElementById('player');
var playPause = document.getElementById('play_pause');

var myStream, myMediaRecorder;

function gravar() {
    navigator.mediaDevices.getUserMedia({video: true}).then(function (streamHandle) {
        player.srcObject = streamHandle;
        myStream = streamHandle;
        myMediaRecorder = new MediaRecorder(streamHandle);
        myMediaRecorder.start();
    });
}

gravar(); //Auto inicia

playPause.onclick = function () {
    if (player.paused) {
        gravar();
    } else {
        myMediaRecorder.stop();
        player.pause();
        player.srcObject = null;

        var tracks = myStream.getTracks();

        tracks.forEach(function (track) {
            track.stop();
        });
    }
};
</script>

Example jsfiddle

    
12.12.2017 / 15:02