首页 > 代码库 > HTML之调用摄像头实现拍照和摄像功能
HTML之调用摄像头实现拍照和摄像功能
应该有很多人知道，我们的手机里面有个功能是“抓拍入侵者”，说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照。
其实在手机上还有很多我们常用的软件都有类似于这样的功能，比如微信扫一扫二维码，玩图……
感觉挺有趣的，今天，我们就来研究一下这个功能的原理，不过我们不是用Android来做，而是用HTML5和javascript来做，浏览器支持IE9+。
布局很简单，就是设置一个“拍照”按钮的监听器，调用摄像头video，然后显示出来画像。（需要用户权限）
首先，我们要允许网页宽度自动调整，我们在网页头添加viewport标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
还有一个重点知识，就是getUserMedia（获取用户多媒体）。
使用这个getUserMedia API可以访问多媒体设备，利用该API与<video>和canvas元素，可以在浏览器里面捕获许多漂亮的图片。
所以除了视频，还有音频，所以接口要变成类似{video: true,audio:false}，可以设定音视频的获取开关。
navigator对象包含的属性描述了正在使用的浏览器,可以使用这些属性进行平台专用的配置。
如果浏览器检测不到摄像头，则会提示：
That‘s all right，我们直接走起看Demo吧：
<script type="text/javascript">// </script>
HTML之调用摄像头实现拍照和摄像功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。