Laravel Fabric JS Canvas Drawing with Recording Video using Media Recorder

Author - Happy

Fabric Canvas

Fabric canvas is a javascript library to draw image/shape.

You can draw different shapes and can design them, move shapes inside canvas chosen region.

There are many functions which can be utilized to draw distinctive shapes like circle, line, triangle, polygon, eclipse.

These functions have some attributes to set shape like position, outskirt shading, filled shape or not, fringe width, span, edge and so on.

Media Capture from Canvas

This empowers a video or sound stream from any of these components to be recorded, live-spilled through WebRTC, or joined with impacts or different Media Streams in a canvas.

It gives the interfaces and techniques to working with the streams and their constituent tracks, the imperatives related with information organizes, the achievement and mistake callbacks when utilizing the information none concurrently, and the occasions that are terminated amid the procedure.

However, in the event that you need to catch/record your canvas activity(drawing) at that point. There is no javascript library which bolsters both illustration and recording usefulness at once.

For that, you need to join fabric canvas and media capture stream library in a single module.

How to capture canvas activity?

You can make an object of canvas for which you want to make a recording.

To create the object of media source you need to add the event listener:

const mediaSource = new MediaSource();

mediaSource.addEventListener('sourceopen', handleSourceOpen, false);

function handleSourceOpen(event) {
 	sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
}

Create canvas variable which points to HTML canvas element

var canvasElement = document.querySelector('canvas');

Create stream variable using captureStream function

var stream = canvasElement.captureStream(25);

To start recording you have to call startRecording() method on record start button click event

$(document).on('click', '#recordbtn', function(){	     
startRecording();
});

function startRecording()
 {
 let options = {mimeType: 'video/webm'};
 recordedBlobs = [];
 try {
   	mediaRecorder = new MediaRecorder(stream, options);
 } catch (e0) {
   console.log('Unable to create MediaRecorder with options    Object: ', e0);
   try {
     options = {mimeType: 'video/webm,codecs=vp9'};
     mediaRecorder = new MediaRecorder(stream, options);
   } catch (e1) {
     console.log('Unable to create MediaRecorder’);
     try {
       options = 'video/vp8'; // Chrome 47
       mediaRecorder = new MediaRecorder(stream, options);
     } catch (e2) {
       alert('MediaRecorder is not supported by this browser');
       return;
     }
   }
 }
 mediaRecorder.onstop = handleStop;
 mediaRecorder.ondataavailable = handleDataAvailable;
 mediaRecorder.start(100); // collect 100ms of data
}

Similarly to stop recording you have to call stopRecording() method on record stop button click event

$(document).on('click', '#stop_record', function(){
   	mediaRecorder.stop();
});

function handleStop(event) {
 superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
 video = document.getElementById('canvas_video');
 video.src = window.URL.createObjectURL(superBuffer);
 var reader = new FileReader();
 reader.readAsDataURL(superBuffer);
 reader.onloadend = function() {
     var base64data = reader.result;
     video.setAttribute('data-base64',base64data)
 }
}

function handleDataAvailable(event) {
 if (event.data && event.data.size > 0) {
   	recordedBlobs.push(event.data);
 }
}

After stopping video capturing you can see recorded video as a result in video element where you have added recorded blob object URL.

To keep your video saved in your local system you need to add download functionality. So whenever you click on download button it will save current running video in your system.

Conclusion

Finally you will get video which you have recorded from canvas. you can see it in video element and also can download it as said above. Even more you can get complete source code with all resources and functionalities from GitHub.
laravel-Fabric-js-canvas-drawing-with-recording-video

Don’t miss the next post!

Loading

Related Posts