1、H5页面实现调用摄像头实现拍照功能(谷歌浏览器)。下方是css样式

#picture_div{
	margin-top: 50px;
	width: 440px;
	position: relative;
	overflow: hidden;
	text-align: center;
}
  
.picture-video{
 	display: block;
 	margin: 0 auto;
}
.picture-canvas{
	 position: absolute;
	 top: 0px;
	 left: 50%;
	 width: 360px;
	 height: 360px;
	 transform: translate(-50%,0);
	 cursor: pointer;
	 z-index: 101;
	 display: inline-block;
}
#headSculpture{
	 position: absolute;
	 z-index: 100;
	 top: 50%;
	 left: 50%;
	 width: 220px;
	 transform: translate(-50%,-50%);
	 vertical-align: middle;
}
#snap{
	 background: #1E9FFF;
	 display: inline-block;
	 height: 38px;
	 line-height: 38px;
	 padding: 0 18px;
	 color: #ffffff;
	 text-align: center;
	 font-size: 14px;
	 border: 0;
	 border-radius: 2px;
	 cursor: pointer;
	 margin-top: 10px;
}

2、html代码

<!--显示头像-->
<div class="show-picture" id="picture_div" >
	<video id="video" class="picture-video" width="360" height="360" autoplay></video>
	<canvas id="canvas" class="picture-canvas" width="360" height="360"></canvas>
	<img id="headSculpture">
	<button type="button" class="layui-btn layui-btn-normal snap" id="snap">拍照</button>
</div>

3、js代码

//开启摄像头
var MediaStreamTrack;
var isPhotograph=true;
function getMedia() {
    let constraints = {
        video: {width: 360, height: 360},
        audio: false,
    };
    //获得video摄像头区域
    let video = document.getElementById("video");
    //这里介绍新的方法，返回一个 Promise对象
    // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
    // then()是Promise对象里的方法
    // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
    // 避免数据没有获取到
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    promise.then(function (MediaStream) {
   	MediaStreamTrack=typeof MediaStream.stop==='function'?MediaStream:MediaStream.getTracks()[1];
    video.srcObject = MediaStream;
         video.play();
         isPhotograph = false
     });
 }
//拍照
function takePhoto() {
	if(isPhotograph){
		getMedia();
		clearCanvas();
		isPhotograph=false;
	}else{
		//获得Canvas对象
	    let video = document.getElementById("video");
	    let canvas = document.getElementById("canvas");
	    let ctx = canvas.getContext('2d');
	    ctx.drawImage(video, 0, 0,360, 360);
	    MediaStreamTrack && MediaStreamTrack.stop();
	    imgData = document.getElementById("canvas").toDataURL("image/jpeg");
	    isPhotograph=true;
	}
}

document.getElementById("snap").addEventListener("click", takePhoto);
/**
 * @description 重置canvas（清除照片）
 * @version 1.0
 * @returns
 */
function clearCanvas() {
	var c = document.getElementById("canvas");
	var cxt = c.getContext("2d");
	c.height = c.height;
}

4、以上代码是在项目运行的电脑上调用摄像头拍照。如在同一局域网通过ip访问页面调用摄像头拍照，右键浏览器快捷方式选择属性，在目标栏追加 --unsafely-treat-insecure-origin-as-secure=“http://访问电脑的ip:8080” --user-data-dir=“D:\temp”
其中–(双横线)前面需要空格，端口根据H5页面的使用端口(此处默认为8080端口)，–user-data-dir后面内容随便写(可以直接拷贝上去)。