前期准备:
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();
}
这样就行了,最后一点坑了我好久,在网上死活找不到原因,搜还不好搜。