JSFiddle - React, Tailwind, and code Playground

by amirrahman132132

HTML

<video class="video" controls autoplay></video>

JavaScript

// gathering camera data to liveData array
var vid = document.querySelector(".video"),
    mime = 'video/webm;codecs=vp9,opus',
    liveData = []

    navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(stream=>{
        var recorder = new MediaRecorder(stream,{mimeType:mime})
        recorder.ondataavailable = d =>{
            console.log("capturing")
            new Response(d.data).arrayBuffer().then(eachChunk=>{
            // recording in chunks here and saving it to liveData array                
                liveData.push(eachChunk)
            })
        }
        recorder.start(5000)    
    })
//--------------------------------------------------------------------------------
 
// playing from liveData in video 
var ms = new MediaSource()
vid.src =URL.createObjectURL(ms)

ms.onsourceopen = function(){
    var source = ms.addSourceBuffer(mime),chunkIndex = 0
    setInterval(function(){
        if(liveData.length > 0){
            var currentChunk = liveData[chunkIndex]
            source.appendBuffer(currentChunk)
            console.log("playing")
            chunkIndex++     
        }
    },5000)
}