JSFiddle - React, Tailwind, and code Playground
HTML
Vid1:
<video id="vid1" width="100" height="100"></video>
Vid2:
<video id="vid2" width="100" height="100"></video>
<br/><br/><br/>
<div id="but_restart">Restart vid2</div>
JavaScript
var stream2;
var vid1 = document.getElementById('vid1');
var vid2 = document.getElementById('vid2');
var but = document.getElementById('but_restart');
vid1.autoplay = true;
vid2.autoplay = true;
// Start stream1 which will stay alive for the rest of these tests
start(vid1, function(strm) {
//
});
but.onclick = function() {
// Stop old strean2
if(stream2)
stop(vid2, stream2);
// Start new strean2
start(vid2, function(strm) {
stream2 = strm;
});
};
function start(videl, cbGotStream) {
navigator.mediaDevices.getUserMedia({video:true, audio:false})
.then(function(stream) {
console.log('got local media');
videl.src = window.URL.createObjectURL(stream);
cbGotStream(stream);
});
}
function stop(videl, stream) {
videl.src = '';
var tracks = stream.getTracks();
for(var i = 0; i < tracks.length; ++i) {
tracks[i].stop();
}
}