[英]HTML using MediaRecorder record canvas with a video inside
[英]Can you merge a canvas and video element and record the output using mediarecorder?
我有一個應用程序,允許我在 canvas 上繪圖,並在 canvas 元素下播放視頻。 所以在屏幕上我看到一個視頻正在播放,上面有我的圖紙,上面有 canvas。
我可以使用以下代碼在視頻頂部創建 canvas 繪圖的圖像:
var tempcanvasDrawing = document.getElementById("drawcanvas");
var img = new Image();
img.src = tempcanvasDrawing.toDataURL();
img.onload = function() {
var tempcanvasFrame = document.createElement("canvas");
tempcanvasFrame.width = 1660;
tempcanvasFrame.height = 925;
var ctx = tempcanvasFrame.getContext('2d');
var video = $("video").get(1);
ctx.drawImage(video, 0, 0, 1660, 925);
ctx.drawImage(img, 0, 0, 1660, 925);
var dataURL = tempcanvasFrame.toDataURL('image/jpeg');
$.post('img_upload.php', {
imgBase64: dataURL,
userid: window.userid
}, function(o) {
});
}
我現在正試圖找到一種方法來實時錄制我的繪圖和視頻並將其導出到視頻中。
我用 mediarecorder 玩了一點,可以錄制 canvas,但我真的很難找到一種方法將視頻和 canvas 像我上面做的那樣組合成 stream 可以用 mediarecorder 錄制的地方
有沒有人能夠做這種事情?
在@dandavid 和 TyTy396 的幫助下,我設法更進一步:
我可以捕獲我需要的所有流,但無法將它們鏈接在一起。
async function startRecording() {
let types = [
"video/webm",
"audio/webm",
"video/webm\;codecs=vp8",
"video/webm\;codecs=daala",
"video/webm\;codecs=h264",
"audio/webm\;codecs=opus",
"video/mpeg"
];
for (let i in types) {
if (MediaRecorder.isTypeSupported(types[i])) {
supportedType = types[i];
break;
}
}
if (supportedType == null) {
console.log("No supported type found for MediaRecorder");
}
let options = {
mimeType: supportedType,
audio: true,
audioBitsPerSecond: 64000,
videoBitsPerSecond: 1750000, // 1.75Mbps
};
//assign inputs to be captured
stream['canvas'] = document.getElementById('whiteboard'); //This is the drawing canvas
stream['input1'] = $("video").get(1); //this is the video behind tha canvas
stream['input2'] = stream['canvas'].captureStream(30); //capture canvas stream
//compensate for firefox
if( browserName == "firefox"){
stream['input1'] = $("video").get(1).mozCaptureStream(30); //capture video stream using mozcapture
} else {
stream['input1'] = $("video").get(1).captureStream(30); //capture video stram using capture
}
stream['obj'] = stream['input1'];
//stream['obj'].addTrack(stream['audio'].getAudioTracks()[0]);
//stream['output'].srcObject = stream['obj']; //preview video
recordedBlobs = [];
try {
stream['mediaRecorder'] = new MediaRecorder(stream['obj'], options); //can i add all streams
} catch (e) {
alert('MediaRecorder is not supported by this browser.');
console.error('Exception while creating MediaRecorder:', e);
return;
}
stream['mediaRecorder'].onstop = handleStop;
stream['mediaRecorder'].ondataavailable = handleDataAvailable;
stream['mediaRecorder'].start(100); // collect 100ms of data blobs
timer.reset();
timer.start( {target: {minutes: 30} });
timer.addEventListener('secondsUpdated', function (e) {
$('.record-menu-time').text(timer.getTimeValues().toString());
});
timer.addEventListener('targetAchieved', function (e) {
$(".record-menu-stop").trigger("click");
});
}
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function handleStop(event) {
stream['superBuffer'] = new Blob(recordedBlobs, { type: supportedType });
stream['blobUrl'] = window.URL.createObjectURL(stream['superBuffer']);
var preview = document.createElement("video");
preview.src = stream['blobUrl'];
preview.controls = true;
preview.load();
$( "#screen-recorder-video" ).replaceWith( preview );
preview.id = "screen-recorder-video";
$(preview).addClass("screen-recorder-video");
$(".record-menu-preview-show").hide();
$(".record-menu-preview-hide").show();
$(".video-preview").show();
$(".hide-preview").show();
$(".show-preview").hide();
}
function stopRecording() {
stream['mediaRecorder'].stop();
stream['output'].controls = true;
timer.stop();
}
function pauseRecording() {
console.log("pause recording");
timer.pause();
stream['mediaRecorder'].pause();
}
function resumeRecording() {
console.log("resume recording");
stream['mediaRecorder'].resume();
timer.start();
}
也許考慮使用<video>
元素?
var video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.style.width = screenX + 'px;';
video.style.height = screenY + 'px;';
document.body.appendChild(video);
var facingMode = "user";
var constraints = {
audio: true,
video: {
facingMode: facingMode
}
};
var s;
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
video.srcObject = stream;
});
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.