Saya ingin merekam webcam dan audio pengguna dan menyimpannya ke file di server. File-file ini kemudian dapat disajikan kepada pengguna lain.
Saya tidak memiliki masalah dengan pemutaran, namun saya mengalami masalah dalam mendapatkan konten untuk direkam.
Pemahaman saya adalah bahwa .record()fungsi getUserMedia belum ditulis - sejauh ini hanya proposal yang dibuat.
Saya ingin membuat koneksi peer di server saya menggunakan PeerConnectionAPI. Saya mengerti ini agak hacky, tetapi saya pikir itu harus memungkinkan untuk membuat rekan di server dan mencatat apa yang dikirim oleh klien-peer.
Jika ini memungkinkan, saya kemudian dapat menyimpan data ini ke flv atau format video lainnya.
Preferensi saya sebenarnya adalah merekam webcam + sisi klien audio, untuk memungkinkan klien merekam ulang video jika mereka tidak suka upaya pertama mereka sebelum mengunggah. Ini juga akan memungkinkan gangguan dalam koneksi jaringan. Saya telah melihat beberapa kode yang memungkinkan perekaman 'gambar' individu dari webcam dengan mengirimkan data ke kanvas - itu keren, tetapi saya juga membutuhkan audio.
Inilah kode sisi klien yang saya miliki sejauh ini:
<video autoplay></video>
<script language="javascript" type="text/javascript">
function onVideoFail(e) {
console.log('webcam fail!', e);
};
function hasGetUserMedia() {
// Note: Opera is unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
// Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var streamRecorder;
var webcamstream;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
webcamstream = stream;
// streamrecorder = webcamstream.record();
}, onVideoFail);
} else {
alert ('failed');
}
function startRecording() {
streamRecorder = webcamstream.record();
setTimeout(stopRecording, 10000);
}
function stopRecording() {
streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
/* var x = new XMLHttpRequest();
x.open('POST', 'uploadMessage');
x.send(videoblob);
*/
var data = {};
data.video = videoblob;
data.metadata = 'test metadata';
data.action = "upload_video";
jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
alert ('video uploaded');
}
</script>
<div id="webcamcontrols">
<a class="recordbutton" href="javascript:startRecording();">RECORD</a>
</div>