Created
August 3, 2020 11:51
-
-
Save ankurparihar/4253c30ab415a2b603a252257d90a493 to your computer and use it in GitHub Desktop.
Record canvas and save as mp4 (tested on Google Chrome)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Source: https://medium.com/@amatewasu/how-to-record-a-canvas-element-d4d0826d3591 | |
const canvas = document.getElementsByTagName('canvas')[0] | |
const videoStream = canvas.captureStream(30) | |
const mediaRecorder = new MediaRecorder(videoStream) | |
var chunks = [] | |
mediaRecorder.ondataavailable = function (e) { | |
chunks.push(e.data) | |
} | |
var video = document.createElement('video') | |
document.body.appendChild(video) | |
mediaRecorder.onstop = function (e) { | |
var blob = new Blob(chunks, { 'type': 'video/mp4' }) // other types are available such as 'video/webm' for instance, see the doc for more info | |
chunks = [] | |
var videoURL = URL.createObjectURL(blob) | |
video.src = videoURL | |
video.controls = true | |
} | |
// start with mediaRecorder.start() | |
// stop with mediaRecorder.stop() | |
// Video controls will have a download option |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment