Html canvas video streaming

user_15229938 0
Viewed 986

I have this code which playing my camera's view in a video tag and then into canvas element at the same page, the page has 2 squares one for the video tag(playing camera's view) and the other is for canvas(playing the same video of the video tag). How I can edit my code to make the video play in a canvas at another page to let my user watch it live, and if there is a method to let users watch it at the same page not another page and see the canvas only, it's also accepted.

here is my html file:

<html>
    <head>
        <meta charset="UTF-8">
        <title>With canvas</title>
    </head>
    <body>
        <div class="booth">
            <video id="video" width="400" height="300" autoplay></video>
            <canvas id="canvas" width="400" height="300" style="border: 1px solid black;"></canvas>
        </div>
        <script src="video.js"></script>
    </body>
</html>

And here is my js file:

(function() {
    var canvas= document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    video = document.getElementById('video'),
    vendorUrl = window.URL || window.webkitURL;

    navigator.getMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;

    navigator.getMedia ({
        video: true,
        audio: false
    }, function(stream) {
        //video.src = vendorUrl.createObjectURL(stream);
        if ('srcObject' in video) {
            video.srcObject = stream;
          } else {
            video.src = vendorUrl.createObjectURL(stream);
          }
        video.play();
    }, function(error) {
        // An error occured
        //error.code
    });


    video.addEventListener('play', function() {
        setInterval(() => {
        draw(this, context, 400, 300);
        }, 100);

    }, false );
    function draw(video, context, width, height) {
        context.drawImage(video, 0, 0, width, height);
    }
    
}) ();
html5-video html5-canvas html php javascript
1 Answers

use MediaRecorder to get live data in chunks as media recorder records from camera and give chunks that can be send over other end of user

then use mediasource to append chunks on other side of user to append it and play it live as it recieves new chunks

i know its a complicated thing but believe me when i was experimenting this i have spent good amount of time to understand i believe you will get some benefit from my experiment code below

here is a working demo

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 =>{
// creating chunks of 5 seconds of video continiously
            var r = new Response(d.data).arrayBuffer() // convert blob to arraybuffer
            r.then(arraybuffer=>{
                source.appendBuffer(arraybuffer)
            })
        }
        recorder.start(5000)
    })
})


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

separated version for gathering live data and playing it demo

// 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)
}
user_116459800
Related