Brief Description:: We are creating HTML5 canvas with some text on it. But when we export that canvas to video by right click and save video as, then video is created successfully but it is without sound.
Here is our code:
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var video = document.querySelector("video");
var colors = ["pink","brown"];
function draw (){
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();
var audio = new Audio("https://sapphireprofits.com/liveliness/1636612975562.mp3");
audio.play();
var videoStream = canvas.captureStream(30);
var mediaRecorder = new MediaRecorder(videoStream);
var chunks = [];
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/mp4' });
chunks = [];
var videoURL = URL.createObjectURL(blob);
video.src = videoURL;
};
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);<canvas width="300" height="300"></canvas>
<video autoplay controls></video>Here is the Jsfiddle link
You will listen the audio but in the below generated videostream media recorder, when you play , audio is not audible