Video Capture and Download

This JavaScript program demonstrates how to capture video content from a canvas element and download it. The canvas flashes colors to generate capturable content. After 5 seconds of recording, the download button is enable to allow the video to be downloaded.

VideoCaptureAndDownload.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="VideoCaptureAndDownload.js"></script>
  </head>
  <body onload="Initialize()">
    <canvas id="idCanvas" width="300" height="225" style="background-color: #F0F0F0;"></canvas>
    <br />
    <button id="idDownload" onclick="fnDownload()">Download</button>
  </body>
</html>

VideoCaptureAndDownload.js

var gqaRecordedChunks = [];
var gqMediaRecorder = null;
var gsUrl = null;
var gqCanvas = null;
var gqContext = null;
var giIntervalId = 0;

function Initialize() {
  // Disable the download button until the video is done recording
  document.getElementById('idDownload').disabled = true;
	
  gqCanvas = document.getElementById("idCanvas");
  var qStream = gqCanvas.captureStream(30);
  console.log(qStream);
  // We need to draw into the canvas in order to generate content. Otherwise, the capture will fail.
  gqContext = gqCanvas.getContext("2d");
  giIntervalId = setInterval(fnAlternateColor, 500);
  
  const kqOptions = { mimeType: "video/webm; codecs=vp9" };
  gqMediaRecorder = new MediaRecorder(qStream, kqOptions);
  gqMediaRecorder.ondataavailable = fnDataAvailable;
  gqMediaRecorder.onstop = fnOnStop;
  // Set a timer to stop 
  setTimeout(() => {
    console.log("stopping");
    gqMediaRecorder.stop();
  }, 5000);
  // Start the actual recording
  gqMediaRecorder.start();
}

function fnAlternateColor(){
  // Swap the gray color
  gqContext.fillStyle = ((gqContext.fillStyle == "#d3d3d3") ? "#838383" : "#d3d3d3");
  gqContext.fillRect(0, 0, gqCanvas.width, gqCanvas.height);
}

function fnOnStop(qEvent) {
  console.log("stopped");
  const kqBlob = new Blob(gqaRecordedChunks, {
    'type': 'video/webm'
  });
  gqaRecordedChunks = [];
  gsUrl = URL.createObjectURL(kqBlob);
  // Stop color changes
  clearInterval(giIntervalId);
  // Enable the download button
  document.getElementById('idDownload').disabled = false;
}

function fnDataAvailable(qEvent) {
  console.log("data-available");
  console.log("datasize = " + qEvent.data.size);
  if (qEvent.data.size > 0) {
    gqaRecordedChunks.push(qEvent.data);
    console.log(gqaRecordedChunks);
  }
}

function fnDownload() {
  // NOTE: This requires a web server and can not be run locally because of restrictions
  const kqAnchor = document.createElement("a");
  document.body.appendChild(kqAnchor);
  kqAnchor.style = "display: none";
  kqAnchor.href = gsUrl;
  kqAnchor.download = "Exciting.webm";
  kqAnchor.click();
  window.URL.revokeObjectURL(gsUrl);
  // Disable the button afterward too.
  document.getElementById('idDownload').disabled = true;
}

Canvas JavaScript

Video Capture and Download

VideoCaptureAndDownload.html

VideoCaptureAndDownload.js

Output