Tôi muốn ghi lại webcam và âm thanh của người dùng và lưu nó vào một tệp trên máy chủ. Những tệp này sau đó sẽ có thể được phân phát cho những người dùng khác.
Tôi không gặp vấn đề gì với việc phát lại, tuy nhiên, tôi đang gặp sự cố khi ghi nội dung.
Sự hiểu biết của tôi là .record()hàm getUserMedia vẫn chưa được viết - chỉ có một đề xuất được đưa ra cho nó cho đến nay.
Tôi muốn tạo kết nối ngang hàng trên máy chủ của mình bằng PeerConnectionAPI. Tôi hiểu điều này hơi khó hiểu, nhưng tôi nghĩ có thể tạo một ứng dụng ngang hàng trên máy chủ và ghi lại những gì ứng dụng khách gửi.
Nếu điều này có thể xảy ra, thì tôi sẽ có thể lưu dữ liệu này vào flv hoặc bất kỳ định dạng video nào khác.
Sở thích của tôi thực sự là ghi lại phía máy khách webcam + âm thanh, để cho phép máy khách quay lại video nếu họ không thích lần thử đầu tiên trước khi tải lên. Điều này cũng sẽ cho phép gián đoạn kết nối mạng. Tôi đã thấy một số mã cho phép ghi lại các 'hình ảnh' riêng lẻ từ webcam bằng cách gửi dữ liệu đến canvas - điều đó thật tuyệt, nhưng tôi cũng cần âm thanh.
Đây là mã phía máy khách mà tôi có cho đến nay:
<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>