RecordRTC - 使用話筒+可視化創建視頻？

Question

是否可以將RecordRTC中的'canvas'錄音機和'audio'錄音機功能結合起來創建一個.webm視頻，該視頻具有畫布動畫作爲視頻，麥克風輸入作爲音頻？

Answer 1

是的。您可以將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