懒咪学编程


html5调用摄像头功能

时间:2020-08-19 21:34:19  来源:  作者:Moorez  所属栏目:HTML5

前言
前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

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

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

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




    
    摄像头调用1



    
    

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




    
    摄像头调用2



    
    

拍照

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

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



    
    拍照1


    
    

html5调用摄像头功能

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





    
    拍照2



    
    

html5调用摄像头功能

原文地址:https://segmentfault.com/a/1190000014741852,作者:Moorez

以上就是对html5调用摄像头功能的相关介绍,希望对您学习有所帮助,感谢您关注懒咪IT学习网!

本文地址:https://c.lanmit.com/Webqianduan/HTML5/86502.html

 

推荐HTML5排行......