如何以单一文件格式将基于RecordRTC的音频+视频录制内容上传到服务器?
RecordRTC似乎生成了两个单独的文件:一个用于音频(如WAV),另一个用于视频(用作WebM)。如何在PHP服务器上同时上传两个文件?
答案 0 :(得分:6)
由于Chrome> = 49,因此RecordRTC现在使用MediaRecorder API将麦克风+网络摄像头录制支持为单一的WebM文件格式。
以下是如何将音频+视频录制到单个WebM中(这适用于Chrome> = 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
文件:
<?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);
}
}
?>
以上save.php
需要关注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));
}
});
}