RecordRTC - Créer des vidéos avec une visualisation mic +?

Question

Est-il possible de combiner l'enregistreur 'canvas' et les fonctions de l'enregistreur 'audio' dans RecordRTC pour créer une seule vidéo .webm avec les animations de canvas comme vidéo et l'entrée micro comme source audio?

Answer 1

Oui. Vous pouvez enregistrer canvas-2d ainsi que le microphone dans un seul conteneur 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'); 

}); 

Pour plus d'informations, s'il vous plaît vérifier: WebRTC captureStream API