JSFiddle - React, Tailwind, and code Playground

HTML

<video id="v"></video>

CSS

video { width: 100%}

JavaScript

navigator.mediaDevices.getUserMedia({video: true, audio:true}).then(processStream);

function processStream(stream){
	const chunks = [];
	const rec = new MediaRecorder(stream);
  rec.ondataavailable = e => chunks.push(e.data);
  rec.onstop = e =>{
  	const b = new Blob(chunks);
    const url = URL.createObjectURL(b);
    const c = v.cloneNode();
    c.loop = true;
    v.replaceWith(c)
    c.src = url;
    c.play();
    stopStream(rec.stream);
  }
	v.srcObject = stream;
  v.play();
  rec.start(30);
  
  setTimeout(()=> rec.stop(), 5000)
}

function stopStream(stream){
  stream.getTracks().forEach( track => track.stop() );
  };