目前，我可以从画布上获取视频。但是我需要合并音频流。我到处搜索只是意识到我需要以某种方式利用AudoDestinationNode对象。我尝试了一种或两种方法来做到这一点。但最终一无所获。这是仅使我得到视频的片段！现在我需要音频合并部分。
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
function download(content) {
element.click();
document.body.removeChild(element);
}
function roll(){
var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
function draw (){
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();
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);
var tag = document.createElement('a');
tag.href = videoURL;
tag.download = 'sample.mp4';
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
};
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);
}<html>
<canvas width="300" height="300"></canvas>
<button onclick="roll()">Get</button>
</html>我希望这会有所帮助。请记住，音频源不得引发CORS错误。
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
function roll(){
var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
function draw (){
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();
var videoStream = canvas.captureStream(30);
//create a dynamic audio tag
var sound = document.createElement('audio');
sound.controls = 'controls';
sound.src = 'demo.mp3';
sound.type = 'audio/mpeg';
sound.play();
//create an audioContext followed by an AudioDestinationNode object
var ac = new AudioContext();
var mediaStreamDestination = new MediaStreamAudioDestinationNode(ac);
var mediaElementSource = new MediaElementAudioSourceNode(ac, { mediaElement: sound });
mediaElementSource.connect(mediaStreamDestination);
//at this step, you have the Audiostream ready
//get the audio and video MediaStreamTrack objects
var videoTrack = videoStream.getVideoTracks()[0];
var audioTrack = mediaStreamDestination.stream.getAudioTracks()[0];
//this will get the Mediastream object from the two MediaStreamTrack objects
var finalStream = new MediaStream([audioTrack, videoTrack])
var mediaRecorder = new MediaRecorder(finalStream);
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);
var tag = document.createElement('a');
tag.href = videoURL;
tag.download = 'sample.mp4';
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
};
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);
}<html>
<canvas width="300" height="300"></canvas>
<button onclick="roll()">Get</button>
</html>