html5-canvasrecordrtc

RecordRTC - Create videos with mic+visualization?


Is it possible to combine the 'canvas' recorder and the 'audio' recorder features in RecordRTC to create a single .webm video that has the canvas animations as video and the mic input as the audio?


Solution

  • Yep. You can record canvas-2d as well as microphone into single WebM container.

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

    For more information, please check: WebRTC captureStream API