Audio + Videoをサーバーにアップロードするにはどうすればよいですか？

Question

RecordRTCベースのオーディオ+ビデオ録画をサーバーに1つのファイル形式でアップロードするには？

RecordRTCは、オーディオ用（WAV用）とビデオ用（WebM用）の2つのファイルを生成しているようです。両方のファイルをPHPサーバーに同時にアップロードするには？

Answer 1

Chrome> = 49以降、RecordRTCはMediaRecorder APIを使用して、マイク+ウェブカメラの録音を単一のWebMファイル形式にサポートしています。ここで

は、単一のWebMのにオーディオ+ビデオの両方を記録する方法である（これは、両方のクローム> = 49とFirefox> = 38上で動作します）ここで

<script src="https://cdn.WebRTC-Experiment.com/gumadapter.js"></scrip> 
<script> 
var recorder; 

function successCallback(audioVideoStream) { 
    recorder = RecordRTC(audioVideoStream, { 
     type: 'video', 
     mimeType: 'video/webm', 
     bitsPerSecond: 512 * 8 * 1024 
    }); 
    recorder.startRecording(); 
} 

function errorCallback(error) { 
    // maybe another application is using the device 
} 

var mediaConstraints = { 
    video: true, 
    audio: true 
}; 

navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback); 

document.querySelector('#btn-stop-recording').onclick = function() { 
    if (!recorder) return; 
    recorder.stopRecording(function() { 
     var audioVideoBlob = recorder.blob; 

     // you can upload Blob to PHP/ASPNET server 
     uploadBlob(audioVideoBlob); 

     // you can even upload DataURL 
     recorder.getDataURL(function(dataURL) { 
      $.ajax({ 
       type: 'POST', 
       url: '/save.php', 
       data: { 
        dataURL: dataURL 
       }, 
       contentType: 'application/json; charset=utf-8', 
       success: function(msg) { 
        alert('Successfully uploaded.'); 
       }, 
       error: function(jqXHR, textStatus, errorMessage) { 
        alert('Error:' + JSON.stringify(errorMessage)); 
       } 
      }); 
     }); 
    }); 
}; 

function uploadBlob(blob) { 
    var formData = new FormData(); 
    formData.append('file', blob); 
    $.ajax({ 
     url: "/save.php", 
     type: "POST", 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function(response) { 
      alert('Successfully uploaded.'); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
      alert('Error:' + JSON.stringify(errorMessage)); 
     } 
    }); 
} 
</script> 

はvideo-filenameとvideo-blobのために読み込む例save.phpファイルです：save.php上記

<?php 
foreach(array('video', 'audio') as $type) { 
    if (isset($_FILES["${type}-blob"])) { 

     echo 'uploads/'; 

     $fileName = $_POST["${type}-filename"]; 
     $uploadDirectory = 'uploads/'.$fileName; 

     if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) { 
      echo(" problem moving uploaded file"); 
     } 

     echo($fileName); 
    } 
} 
?> 

はFormData次が必要です。

function uploadBlob(blob) { 
    var formData = new FormData(); 
    formData.append('video-blob', blob); 
    formData.append('video-filename', 'FileName.webm'); 
    $.ajax({ 
     url: "/save.php", 
     type: "POST", 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function(response) { 
      alert('Successfully uploaded.'); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
      alert('Error:' + JSON.stringify(errorMessage)); 
     } 
    }); 
}