前言
1、实现html网页拍照效果，可以用于人脸识别（PC端不限制）。
2、微信公众号H5页面打开前置摄像头拍照/人脸识别（必须https协议）。
效果
实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5摄像头(新版浏览器https)(兼容老版浏览器)</title>
</head>
<body>
<!-- 说明：将网页更改为https访问才行 否者报错：
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). -->
<!--video用于显示媒体设备的视频流，自动播放-->
<video id="video" autoplay style="width: 500px;height: 400px"></video>
<!--拍照按钮-->
<div><button id="capture" style="color: blue;">拍照</button></div>
<!--描绘video截图-->
<canvas id="canvas" width="500" height="400"></canvas>
<script type="text/javascript">
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia
|| navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia){
//调用用户媒体设备，访问摄像头
getUserMedia({
video:{
width:500,height:400}
},success,error);
} else {
alert("你的浏览器不支持访问用户媒体设备");
}
//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
//like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
//最新标准API(新版浏览器https)
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//like12 modified,20210628,不是这种调用方法 应该为后者
//webkit内核浏览器(老版浏览器)
//navigator.webkitGetUserMedia(constrains).then(success).catch(error);
navigator.webkitGetUserMedia({
"video": true }, success, error);
} else if (navigator.mozGetUserMedia){
//Firefox浏览器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
//成功的回调函数
function success(stream){
//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 error(error){
//console.log("访问用户媒体设备失败：", error.name, error.message);
alert("访问用户媒体设备失败：" + error.name + " " + error.message);
}
//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
//绘制画面
context.drawImage(video,0,0,500,400);
});
</script>
</body>
</html>
转载于：https://blog.csdn.net/tanzongbiao/article/details/118314864
参考：https://blog.csdn.net/weixin_35959554/article/details/118220438
获取手机拍照和相册，官方：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#16
微信小程序拉取前摄像头参考：https://blog.csdn.net/LzzMandy/article/details/107005056