微信内H5网页调用后置摄像头拍照

前期准备：

1，微信公众号，需要微信认证（300元/年），云服务器（具体依配置）和域名（最低40元/年）；

2，域名需要SSL证书（约300元/年），即https访问。

以上缺一不可。

调用摄像头：

HTML：

<video id="photo_video" autoplay webkit-playsinline="true" playsinline="true"></video>

JS：

var v_t_w = window.innerWidth;
var v_t_h = window.innerWidth * 4 / 3;
var video = document.getElementById('photo_video');

// 成功的回调函数
function successFun(stream) {
    video.src = null;
    video.srcObject = null;
    //like12 modifed,20210618,Chrome升级后,新版本不再支持该用法
    //摄像头视频流显示报错Failed to execute 'createObjectURL' on 'URL'
    //研究即时通信的过程中需要调用摄像头，发现报错，原来是谷歌弃用了这个方法，根据官方提示修改即可
    //所以原先的代码：video.src = URL.createObjectURL(stream);
    //需要被修改为：video.srcObject = stream;
    //(新版浏览器https)
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        video.srcObject = stream;
    }
    //(老版浏览器)
    else {
        //兼容webkit内核浏览器
        var CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        //此处的代码将会报错  解决的办法是将video的srcObject属性指向stream即可
        video.src = CompatibleURL.createObjectURL(stream);
    }
    //播放视频
    video.play();
}

// 异常的回调函数
function errorFun(error) {
    console.log("访问用户媒体设备失败：", error.name, error.message);
    alert("访问用户媒体设备失败：" + error.name + " " + error.message);
}

// 访问用户媒体设备的兼容方法
function getUserMedia(constrains, successFun, errorFun) {
    //like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        //最新标准API(新版浏览器https)
        navigator.mediaDevices.getUserMedia(constrains).then(successFun).catch(errorFun);
    } else if (navigator.webkitGetUserMedia) {
        //like12 modified,20210628,不是这种调用方法 应该为后者
        //webkit内核浏览器(老版浏览器)
        //navigator.webkitGetUserMedia(constrains).then(successFun).catch(errorFun);
        navigator.webkitGetUserMedia({ "video": true }, successFun, errorFun);
    } else if (navigator.mozGetUserMedia) {
        //Firefox浏览器
        navagator.mozGetUserMedia(constrains).then(successFun).catch(errorFun);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constrains).then(successFun).catch(errorFun);
    }
}

window.onload = function () {
    video.width = v_t_w;
    video.height = v_t_h;
    // 开始调用摄像头
    //like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia
        || navigator.getUserMedia
        || navigator.webkitGetUserMedia
        || navigator.mozGetUserMedia) {
        // 调用用户媒体设备，访问摄像头
        getUserMedia({
            video: {
                facingMode: { exact: "environment" }
            },
            audio: false
        }, successFun, errorFun);
    } else {
        alert("你的浏览器不支持访问用户媒体设备");
    }
};

以上代码在普通浏览器可以正常显示摄像头画面，但是在微信内可能会出现黑屏或者白屏的情况，这是因为微信做了特殊限制，微信内不允许网页自动（偷偷）打开摄像头进行拍摄，必须由用户手动点击后，才能正常使用。

因此，在页面添加一个按钮，按钮绑定一个方法：

function PhotoStart() {
    video.play();
}

这样就行了，最后一点坑了我好久，在网上死活找不到原因，搜还不好搜。