JSFiddle - React, Tailwind, and code Playground

by amirrahman132132

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <video controls="true" autoplay></video>
</body>
</html>

JavaScript

var mediasource = new MediaSource(),video = document.querySelector("video"),
    mime = 'video/webm;codecs=vp9,opus'
video.src = URL.createObjectURL(mediasource)

mediasource.addEventListener("sourceopen",function(_){
    var source = mediasource.addSourceBuffer(mime)
    navigator.mediaDevices.getUserMedia({video: true,audio: true}).then(stream=>{
        var recorder = new MediaRecorder(stream,{mimeType:mime})
        recorder.ondataavailable = d =>{
            var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer
            r.then(arraybuffer=>{
                source.appendBuffer(arraybuffer)
            })
        }
        recorder.start(5000)
    })
})