html5调用摄像头功能的实现代码Html5调用手机摄像头并实现人脸识别的实现HTML5混合开发二维码扫描以及调用本地摄像头HTML5调用手机摄像头拍照的实现思路及代码HTML5 Canvas+JS控制电脑或手机上的摄像头实例html5调用摄像头实例代码

前言

前些天，线上笔试的时候，发现需要浏览器同意开启摄像头，感觉像是 js 调用的，由于当时笔试，也就没想到这么多问题。今天闲来无事，看了下自己的 todo，发现有这个调用摄像头的todo，才想到😂。网上查了一下，果然 js 有调用摄像头的 api，为此自己写一个 demo ，避免忘记。

正文

调用摄像头

一共有两种实现方式，一种是使用navigator.getUserMedia（该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性），前面一种已经从 Web 标准中删除，仅为了向后兼容而存在，第二种是使用navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。

第一种方法navigator.getUserMedia用法详见mdn ，代码如下：

第二种方法navigator.mediaDevices.getUserMedia用法详见mdn。navigator.mediaDevices.getUserMedia 其实和第一种差不多，主要第二种返回是一个 Promise 对象，代码如下：

拍照

思路是设置一个标志变量 videoPlaying 看看是否 video 有在 play，监听拍照按钮的点击事件，如果videoPlaying 为 true ，使用一个canvas 获取 video 的宽高（默认 canvas 是不显示的），然后使用 canvas 的drawImage,然后使用 canvas 的 toDataURL返回一个 data url，将这个 url，设置在一个 img 标签上即可😀

第一种方法navigator.getUserMedia实现代码：

拍照

第二种navigator.mediaDevices.getUserMedia实现方法:

拍照

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！