你可以合并画布和视频元素，并使用mediarecorder记录输出吗？

Question

我有一个应用程序，允许我在画布上画画，并在画布元素下播放视频。 所以在屏幕上，我看到一个视频正在播放，上面有我的画布。

我可以使用下面的代码来创建一个画布画在视频上面的图像。

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，可以录制画布，但我真的很难找到一种方法来结合视频和画布，就像我上面做的那样，变成一个流，我可以用mediarecorder录制。

有人能够做到这种事情吗？

在@dandavid和TyTy396的帮助下，我成功地取得了一点进展。

我可以捕捉到所有我需要的流媒体 但在将它们连接在一起时遇到了麻烦 I can capture all the streams I need but am having trouble linking them together.

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();
}

Answer 1

也许可以考虑使用 <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;
});

希望对大家有所帮助!