RecordRTC - 使用麦克风+可视化创建视频?

RecordRTC - Create videos with mic+visualization?

是否可以结合 RecordRTC 中的 'canvas' 录音机和 'audio' 录音机功能来创建一个具有 canvas 动画作为视频和麦克风输入的单个 .webm 视频作为音频?

是的。您可以将 canvas-2d 以及麦克风录制到单个 WebM 容器中。

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia({
    audio: true
}, funtion(microphone) {
    var canvasStream = canvas.captureStream(25);
    microphone.getAudioTracks().forEach(function(track) {
        // merge microphone into canvas stream
        canvasStream.addTrack(track);
    });

    // now your canvas stream has both audio and video tracks
    // now you can record it using RecordRTC
    var recorder = RecordRTC(canvasStream, {
        type: 'video'
    });

    // auto stop after 5 seconds recording
    recorder.setRecordingDuration(5 * 1000).onRecordingStopped(function() {
        var url = recorder.toURL();
        window.open(url);

        var blob = recorder.getBlob();
        var singleWebM = new File([blob], 'single.webm', {
            type: 'video/webm'
        });
    });

    recorder.startRecording();
}, function(error) {
    alert('unable to access your microphone');

});

更多信息请查看:WebRTC captureStream API