JSFiddle - React, Tailwind, and code Playground

HTML

<button id="play_pause">Play/Stop</button><br><br>
<video id="player" controls autoplay width="320" height="240"></video>

JavaScript

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()[0].stop();
        
        tracks.forEach(function (track) {
            track.stop();
        });
    }
};