मैं उपयोगकर्ताओं को वेबकैम और ऑडियो रिकॉर्ड करना और सर्वर पर एक फ़ाइल में सहेजना चाहूंगा। इन फ़ाइलों को तब अन्य उपयोगकर्ताओं के लिए परोसा जा सकेगा।
मुझे प्लेबैक की कोई समस्या नहीं है, हालाँकि मुझे सामग्री को रिकॉर्ड करने में समस्या हो रही है।
मेरी समझ यह है कि getUserMedia .record()फ़ंक्शन अभी तक नहीं लिखा गया है - केवल इसके लिए अब तक एक प्रस्ताव बनाया गया है।
मैं PeerConnectionAPI का उपयोग करके अपने सर्वर पर सहकर्मी कनेक्शन बनाना चाहूंगा। मैं समझता हूं कि यह थोड़ा हैकी है, लेकिन मैं सोच रहा हूं कि सर्वर पर सहकर्मी बनाना और क्लाइंट-पेयर द्वारा भेजे गए रिकॉर्ड को रिकॉर्ड करना संभव होना चाहिए।
यदि यह संभव है, तो मुझे इस डेटा को फ़्लव या किसी अन्य वीडियो प्रारूप में सहेजने में सक्षम होना चाहिए।
मेरी प्राथमिकता वास्तव में वेब कैमरा + ऑडियो क्लाइंट-साइड रिकॉर्ड करना है, क्लाइंट को वीडियो को फिर से रिकॉर्ड करने की अनुमति देने के लिए अगर वे अपलोड करने के अपने पहले प्रयास को पसंद नहीं करते थे। यह नेटवर्क कनेक्शन में रुकावट के लिए भी अनुमति देगा। मैंने कुछ कोड देखे हैं जो डेटा को कैनवास पर भेजकर वेबकैम से अलग-अलग 'छवियों' को रिकॉर्ड करने की अनुमति देता है - यह अच्छा है, लेकिन मुझे ऑडियो भी चाहिए।
यहाँ अब तक मेरे पास क्लाइंट साइड कोड है:
<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>