微信网页上传视频

微信网页上传视频

需求：由于客户需要，需要在微信页面中，打开摄像头，拍摄一段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插件，将视频文件上传到服务器

具体代码待完善