前言：
眼前我们对“html调用”大致比较重视，大家都需要学习一些“html调用”的相关内容。那么小编在网络上搜集了一些有关“html调用””的相关文章，希望大家能喜欢，我们一起来学习一下吧！公司项目需要调用摄像头，看了一下html5文档，主要是使用html5的getUserMedia()API，写一个例子来记录具体的使用方法。
<html><body><!-- 用于展示摄像头视频流 --><video id="video" autoplay style="width: 480px;height: 320px"></video><div> <button id="capture" onclick="handleClickCapture()">拍照</button></div><!-- 展示拍摄的照片 --><canvas id="canvas" width="480" height="320"></canvas><script> var video = document.getElementById('video'); var capture = document.getElementById('capture'); var ctx = document.getElementById('canvas').getContext('2d'); /** * 调用用户媒体设备 * @param constraints 配置信息 * @param success 成功回调函数 * @param error 失败回调函数 */ function getUserMediaToPhoto(constraints,success,error) { if(navigator.mediaDevices.getUserMedia){ navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); }else if (navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia(constraints,success,error); }else if(navigator.mozGetUserMedia){ navigator.mozGetUserMedia(constraints,success,error); }else if(navigator.getUserMedia){ navigator.getUserMedia(constraints,success,error); } } /** * 成功回调函数 * @param stream 视频流 */ function success(stream){ var CompatibleURL = window.URL || window.webkitURL; try { video.src = CompatibleURL.createObjectURL(stream); } catch (e) { video.srcObject = stream; } video.play(); } /** * 失败回调 * @param error 错误对象 */ function error(error) { console.log('无法访问媒体设备', error); } if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){ getUserMediaToPhoto({video:{width:480,height:320}},success,error); }else{ alert('不支持访问用户媒体设备'); } /** * 拍照按钮点击事件 */ function handleClickCapture() { ctx.drawImage(video,0,0,480,320); }</script></body></html>实现了基本的摄像头调用和拍照，实现思路非常简单，基本上只是在调用api，唯一恶心的地方在于api版本比较多，不得不多做一些判断。具体的api介绍、使用和参数可以查看MediaDevices.getUserMedia()。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html调用 #html5调用照相机 #css摄像头 #css调用图片 #css调用id
