首页h5调用手机摄像头h5详细代码

h5调用手机摄像头h5详细代码

时间: 2023-09-05 15:10:06 浏览: 235

H5调用摄像头和扫一扫功能，亲测可用

5星 · 资源好评率100%

1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照解析、获取摄像头解析、从相册中选择图片解析说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。

以下是调用手机摄像头的H5代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调用摄像头</title> </head> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">拍照</button> <canvas id="canvas" width="640" height="480"></canvas> <script> var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var snap = document.getElementById('snap'); var ctx = canvas.getContext('2d'); // 调用摄像头 navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(function(stream) { video.srcObject = stream; video.play(); }) .catch(function(err) { console.log('调用摄像头失败', err); }); // 拍照 snap.addEventListener('click', function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); }); </script> </body> </html> ``` 以上代码会在网页中显示一个视频区域和一个拍照按钮。当用户点击拍照按钮时，会在canvas中生成一张截图。需要注意的是，getUserMedia() 方法需要在 HTTPS 网站上才能调用成功。如果需要在本地测试，可以使用 localhost 或者使用工具生成 HTTPS 证书。

阅读全文