微信网页上传视频
需求:由于客户需要,需要在微信页面中,打开摄像头,拍摄一段10秒以内的视频,上传到服务器,服务器根据用户上传的视频进行业务审核。
方案一 使用微信网页js-sdk chooseVideo、uploadVide (无法实现)
参照:在腾讯大王卡激活过程中,需要上传“活体视频”,既在微信网页中打开视频拍摄,拍摄后上传。
大王卡激活公众号: 王卡助手(搜索该公众名称,关注即可)
为了方便测试,笔者身亲了一张大王卡,第二天就到货了。到货后便开始测试,经过测试,发现“王卡助手”技术方案如下:
王卡助手技术方案:使用微信公众平台网页开发的 JS-SDK 中的chooseVideo、uploadVide。
注:chooseVideo、uploadVide 未在js-sdk文档中找到。
经测试,本技术方案 在笔者所用公众号返回错误信息“chooseVideo:fail_nopermission to execute”)
代码如下:
//1.通过wx.config注入权限验证配置jsApiList: []为'chooseVideo', 'uploadVideo'
//2.调用chooseVideo选择视频后 调用uploadVideo上传视频
var sourceType = ['album', 'camera'];
var camera = "front";
var maxDuration = "6";
console.log(sourceType, camera, maxDuration);
WeixinJSBridge.invoke('chooseVideo', {
sourceType: sourceType,
maxDuration: maxDuration,
camera: camera
}, function (res) {
videoTag='0';
alert(JSON.stringify(res));//在笔者所用公众号返回错误信息“chooseVideo:fail_nopermission to execute
// 上传视频
WeixinJSBridge.invoke('uploadVideo', {
appId: wxConfigData.appId,
localId: res.localId
}, function (res) {
if ( res.err_msg === "uploadVideo:ok") {
var serviceId = res.serverId;
}else if( res.err_msg === "uploadVideo:cancel" ) {
}
});
},function (err){
alert("err:"+JSON.stringify(err));
});
笔者发邮件咨询了微信人员,暂时无任何反馈,邮箱为: weixin-open@qq.com
笔者咨询了公众号客服、加入各种群问,种种吧,最终截止目前20170602未解决.哪位大神要是解决了,麻烦发个邮件给我 xLuobo@foxmail.com,或者加我QQ:137709772.
方案二 使用 input file 标签
微信网页中拍摄视频
代码如下:
<!-- 使用本方式,在微信网页中可调出 拍摄视频或者相册中选择视频 -->
<input type="file" id="file" capture="camera" accept="video/*">
js获取拍摄视频时间长度
代码如下:
<!-- 选择视频后,执行play()方法 -->
<input type="file" id="file" capture="camera" accept="video/*" onChange="play()">
<!-- 选择视频后,将视频路径转换为url,将video的src=url -->
<video id="video" controls style="display: none;"></video>
js代码如下:
//[HTML 5 视频/音频参考手册](http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp)
function play(){
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video").src = url;
var i = setInterval(function() {
/*video 标签 的readyState 表示音频/视频元素的就绪状态
0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
1 = HAVE_METADATA - 关于音频/视频就绪的元数据
2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放*/
if(document.getElementById("video").readyState > 0) {
//duration 返回当前音频/视频的长度(以秒计)
var minutes = parseInt(document.getElementById("video").duration / 60, 10);
var seconds = document.getElementById("video").duration % 60;
console.log(minutes)
console.log(seconds)
clearInterval(i);
}
}, 200);
}
视频文件上传到服务器
使用plupload插件,将视频文件上传到服务器
具体代码待完善