Javascript 从ajax提供的数据URI创建视频文件
好的,我已经读了至少一百篇关于这方面的文章,我找不到明确的例子来做我想做的事情,确切地说。我正在使用RecordRTC获取我的视频。我可以以Javascript 从ajax提供的数据URI创建视频文件,javascript,php,webrtc,Javascript,Php,Webrtc,好的,我已经读了至少一百篇关于这方面的文章,我找不到明确的例子来做我想做的事情,确切地说。我正在使用RecordRTC获取我的视频。我可以以blob的形式获取视频的webm数据URI:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c。我知道我基本上可以将这个源(用于我的视频元素)馈送到一个canvas元素,然后使用canvastoDataURL()方法获得一个编码的dataURI。但是,看到编码数据应该是视频,使用toData
blob的形式获取视频的webm数据URI:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c
。我知道我基本上可以将这个源(用于我的视频元素)馈送到一个canvas元素,然后使用canvastoDataURL()
方法获得一个编码的dataURI。但是,看到编码数据应该是视频,使用toDataURL()
的video/webm
等参数仍然会返回image/png
mimetype的编码字符串。我的问题是:如果我传递blob url(blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c
)对于PHP,如何在服务器的文件系统上创建webm文件?如果这不可能,如何从画布为video/webm
mimetype创建编码字符串
这是我的视频类对象:
var Video = {
eId: '',
element: {},
source: {},
RtcOpts: {video: true, audio: true},
RTC: {},
media: {},
init: function(elementId){
Video.eId = elementId;
Video.media = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
},
success: function(stream){
Video.RTC = new MRecordRTC(stream);
Video.element = document.getElementById(Video.eId);
if(window.webkitURL || window.URL){
Video.source = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : window.URL.createObjectURL(stream);
}else{
Video.source = stream;
}
Video.element.autoplay = true;
Video.element.src = Video.source;
Video.RTC.startRecording();
Video.element.play();
},
error: function(e){
console.error('getUserMedia Error', e);
},
stop: function(){
Video.RTC.stopRecording(function(WebMURL){
console.log(WebMURL); // prints the blob url
var recordedBlob = Video.RTC.getBlob();
console.log(recordedBlob); // prints undefined
Video.save(recordedBlob);
});
},
save: function(recordedBlob){
var formData = new FormData();
formData.append('mode', 'getusermedia');
formData.append('blob', recordedBlob);
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
console.log(request.responseText);
}
};
request.open('POST', rootPath+'ajax/processVideo.php');
request.send(formData);
}
};
这就是代码在我的脚本中内联运行的方式:
var playerId = 'cam-'+t+'-'+click[1]+'-'+click[2];
Video.init(playerId);
if(Video.media){
document.getElementById('stop-'+playerId).onclick = function(e){
e.preventDefault();
Video.stop();
};
Video.media(Video.RtcOpts, Video.success, Video.error);
}else{
//fallback
}
使用
var recordedBlob=recordRTC.getBlob()代码>,请尝试以下代码段:
var xhr = new XMLHttpRequest(),
fd = new FormData();
xhr.open("POST", "/submit.php", true);
fd.append("video", recordedBlob);
xhr.addEventListener("load", function () {
// xhr.statusCode === 200 means it worked
});
xhr.send(fd);
PHP(我真的很生疏)$\u POST[“video”]
应该包含blob。您是如何获得blob URL的?你应该上传的是你得到的文件blob<代码>blob:
顺便说一下,这是一个blob URL,不是数据URL。啊,我刚刚找到了文档var recordedBlob=recordRTC.getBlob()代码>应该对你有很大帮助。看,我就是这么想的。但是,recordedBlob始终是未定义的。我将更新这个问题以包含一些示例代码。检查该链接以获得指导。行Video.RTC=new MRecordRTC(流)
应替换为Video.RTC=new MRecordRTC();Video.RTC.addStream(stream)代码>据我所知,虽然我从来没有真正使用过这个,所以我不确定发生了什么。捕捉得好,但没有变化。我想知道它是否可能是某个地方的MRecordRTC类中的一个bug。我只是不想担心使用RecordRTC和将音频和视频流聚合成一个。