javascript - MediaRecorderAPI:如何使用画布中的 captureStream 和音频文件中的音频源生成媒体流
问题描述
目前我可以从画布上获取视频。但我需要与它合并一个音频流。我四处搜索才意识到我需要以某种方式使用 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>
推荐阅读
- javascript - typeof 类型保护在分配给变量时是否不起作用?
- javascript - Angular2输入在输入时只接受数字,但在复制粘贴时不接受
- javascript - Javascript Google Maps 标记数组返回不正确的长度
- python - 静态文件仍然从文件系统而不是 Flask 中的 AWS-S3 提供
- mysql - 正则表达式解析MYSQL字符串
- jquery - 引导选择器选择的值
- c# - 从 MasterPage Master 获取文本框值
- javascript - 如何使用javascript从url获取数据
- android - camera2中的图像旋转问题
- javascript - 使用 Vue-chart.js 的水平图表标签