微信视频接口的一种实现思路

Scroll Down

我们知道在调用微信js-sdk的时候, 是可以发现有有 chooseVideo,但是开发文档里面却没有, 也就是说无法在微信web项目里面进行类似像上传照片一样调用微信的接口和服务器进行缓存和压缩! stackoverflow 上面也有一个类似的问题, 给出的解答是wechat小程序支持chooseVideo接口:

关于chooseVideo接口

下载

那么解决方案只能回到原生的方式进行视频上传的开发了

附上个人解决方案

PS: 前端使用的市Layui可以直接通过button按钮触发 file行为!例如:

<button type="button" class="layui-btn layui-btn-sm layui-btn-normal tool-son-btn"
                    style="width: 100px;" id="upload-video">
                <i class="layui-icon layui-icon-video tool-son-icon"></i>&nbsp;
                <span class="tool-son-span">视频记录</span>
            </button>

Layui文件上传

那么这种情况,在移动端的页面,会默认的调出好几个候选(相册, 拍摄), 我们需要的是纯拍摄, 那么完全可以用JS动态的给Layui渲染的节点修改一下. 例如:

/**
 * 延迟加载, 将上传视频, 修改为 只能上传视频, 并且直接调用相机
 */
setTimeout(() => {
    $(function () {
        let layuiUploadFileNode = document.getElementsByClassName("layui-upload-file");
        layuiUploadFileNode[0].accept = "video/*";
        layuiUploadFileNode[0].capture = "camcorder";
    });
}, 2000);

现在基本上就实现了直接调用!