我需要创建一个可以使用网络摄像头或移动摄像头录制视频的应用程序(需要跨平台).
到目前为止,我已经使用webrtc getusermedia写了一个小的概念证明.它可以记录视频和播放,但我不知道如何获取文件上传回服务器.
以下是此示例http://jsfiddle.net/3FfUP/的链接
和JavaScript代码：
(function ($) {
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var onFailSoHard = function(e) {
console.log('Reeeejected!',e);
};
$('#capture-button').click (function () {
console.log ("capture click!");
if (navigator.getUserMedia) {
// Not showing vendor prefixes.
navigator.getUserMedia({video: true,audio: true},function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Note: onloadedMetadata doesn't fire in Chrome when using it with getUserMedia.
// See crbug.com/110938.
video.onloadedMetadata = function(e) {
// Ready to go. Do some stuff.
};
},onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
});
$('#stop-button').click (function (e) {
video.pause ();
localMediaStream.stop ();
});
})(jQuery);
解决方法
嗨,如果这是迟到的,但这里是我如何设法使文件上传到服务器,我真的没有想法,如果这是最好的方式来实现这一点,但我希望它有助于给你一个线索按照Eric Bidelman的说法(正如Sam Dutton所说),你得到的是一个blob,所以我做了一个XMLHttpRequest来获取视频并将响应类型设置为blob,之后我创建了一个FormData,其中我附加了响应,这个将允许将blob发送到服务器.这是我的功能如何.
function sendXHR(){
//Envia bien blob,no interpretado
var xhr = new XMLHttpRequest();
var video=$("#myexportingvideo");
xhr.open('GET',video.src,true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response],{type: 'video/webm'});
console.log(blob.size/1024);
console.log(blob.type);
form = new FormData(),request = new XMLHttpRequest();
form.append("myblob",blob,"Capture.webm");
form.append("myname",$("#name_test").value);
request.open("POST","./UploadServlet",true);
request.send(form);
}
};
xhr.send();
}
