我需要创建一个可以使用网络摄像头或移动摄像头录制视频的应用程序(它需要跨平台)。
到目前为止,我已经使用 webrtc getusermedia 编写了一个小型概念证明。它可以录制视频和播放,但我不确定如何将文件上传回服务器。
这是此示例的链接http://jsfiddle.net/3FfUP/ 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();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)