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
