我正在尝试在浏览器上从不同的剪辑生成视频: 幻灯片:从画布流式传输 视频:来自网络摄像头的流媒体
我只是想让用户下载视频编辑 幻灯片1 + 视频1 + 幻灯片2 + 视频2 + 幻灯片3 + 视频3。
这是我的代码:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const webcam = document.getElementById('webcam');
const videoPlayer = document.createElement('video');
videoPlayer.controls = true;
document.body.appendChild(videoPlayer);
const videoWidth = 640;
const videoHeight = 480;
let keepAnimating = true;
const frameRate=30;
// Attempt to get webcam access
function setupWebcam() {
const constraints = {
video: {
frameRate: frameRate,
width: videoWidth,
height: videoHeight
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
webcam.srcObject = stream;
webcam.addEventListener('loadedmetadata', () => {
recordSegments();
console.log('Webcam feed is now displayed');
});
})
.catch(err => {
console.error("Error accessing webcam:", err);
alert('Could not access the webcam. Please ensure permissions are granted and try again.');
});
}
// Function to continuously draw on the canvas
function animateCanvas(content) {
if (!keepAnimating) {
console.log("keepAnimating", keepAnimating);
return;
}; // Stop the animation when keepAnimating is false
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous drawings
ctx.fillStyle = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.5)`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#000';
ctx.font = '48px serif';
ctx.fillText(content + ' ' + new Date().toLocaleTimeString(), 50, 100);
// Request the next frame
requestAnimationFrame(() => animateCanvas(content));
}
// Initialize recording segments array
const recordedSegments = [];
// Modified startRecording to manage animation
function startRecording(stream, duration = 5000, content) {
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
const data = [];
recorder.ondataavailable = e => data.push(e.data);
// Start animating the canvas
keepAnimating = true;
animateCanvas(content);
recorder.start();
return new Promise((resolve) => {
// Automatically stop recording after 'duration' milliseconds
setTimeout(() => {
recorder.stop();
// Stop the animation when recording stops
keepAnimating = false;
}, duration);
recorder.onstop = () => {
const blob = new Blob(data, { type: 'video/webm' });
recordedSegments.push(blob);
keepAnimating = true;
resolve(blob);
};
});
}
// Sequence to record segments
async function recordSegments() {
// Record canvas with dynamic content
await startRecording(canvas.captureStream(frameRate), 2000, 'Canvas Draw 1').then(() => console.log('Canvas 1 recorded'));
await startRecording(webcam.srcObject,3000).then(() => console.log('Webcam 1 recorded'));
await startRecording(webcam.srcObject).then(() => console.log('Webcam 1 recorded'));
mergeAndDownloadVideo();
}
function downLoadVideo(blob){
const url = URL.createObjectURL(blob);
// Create an anchor element and trigger a download
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'merged-video.webm';
document.body.appendChild(a);
a.click();
// Clean up by revoking the Blob URL and removing the anchor element after the download
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}
function mergeAndDownloadVideo() {
console.log("recordedSegments length", recordedSegments.length);
// Create a new Blob from all recorded video segments
const superBlob = new Blob(recordedSegments, { type: 'video/webm' });
downLoadVideo(superBlob)
// Create a URL for the superBlob
}
// Start the process by setting up the webcam first
setupWebcam();
您可以在这里找到它:https://jsfiddle.net/Sulot/nmqf6wdj/25/
我无法拥有一张“幻灯片”+ 网络摄像头视频 +“幻灯片”+ 网络摄像头视频。
它仅合并前 2 个片段,而不合并其他片段。我尝试使用 ffmpeg 浏览器端。
所以我能够使用 MultiStreamsMixer 做我想做的事情 https://github.com/muaz-khan/MultiStreamsMixer