纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了。
今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例子非常多,这里随便找了一个例子做了精简,方便Jerry以后重用。
其实之前Jerry的文章 只要200行JavaScript代码,就能把特斯拉汽车带到您身边,里面使用到的React-Native加上ViroReact的组合,也能实现用JavaScript调用手机摄像头并拍照的功能,不过那个应用是通过React-Native打包生成的原生应用,和本文介绍的例子稍有不同。这篇文章给出的例子是一个运行在浏览器里的纯web应用。
先看效果。我已经把这个web应用通过github gh-pages的方式托管到了我在github的个人博客上,通过以下链接访问:https://jerrywang-sap.cn/FioriODataTestTool2014/WebContent/099_camera.html
我首先通过笔记本电脑访问,浏览器会弹出窗口询问用户是否允许该应用访问设备上的摄像头:
点击允许之后,应用下方区域就会实时显示我的摄像头正对着的区域的图像:
点击“拍照”按钮后,摄像头显示的图像就会被固化在该按钮下方,并且以图片的方式自动保存到本地。
在我的三星手机上访问该链接,首先一样要授权该应用使用摄像头:
对准我公司工位上吴脊老师送我的这个吉祥物,一只种类为哨兵的异形,点击拍照按钮:
自动生成一张图片并保存到手机上:
我的源代码位置(注意是gh-pages分支):https://github.com/i042416/FioriODataTestTool2014/tree/gh-pages/WebContent/camera
几个关键的代码点
(1) JavaScript之所以通过浏览器能够识别到设备可用摄像头(包括可用的音频输入和输出设备),是因为现代浏览器支持的一组名为WebRTC(Web Real Time Communication,网页即时通信)的API. 这个API能帮助Web应用开发人员通过简单的JavaScript编程就能实现功能丰富的实时多媒体应用,而无需学习多媒体的数字信号处理知识。Web应用的使用者也无需下载额外的插件。
具体到Jerry例子里的代码,用JavaScript进行设备可用多媒体设备的检测,一行代码调用就能搞定:
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
这句代码前半段navigator.mediaDevices.enumerateDevices()是浏览器支持的原生API,这是一个异步调用,返回一个promise对象:
等到该异步调用的结果可供应用程序使用之后,我们通过链式调用then传入的回调函数gotDevices被触发,输入的参数就是navigator.mediaDevices.enumerateDevices()调用的返回值。在调试器里看看这个返回值的明细:
从调试器里得知enumerateDevices这个函数返回了我笔记本电脑上一系列可用的音视频设备,这些信息和我通过操作系统里看到的设备信息一致:
(2) 我的html页面里定义了一个HTML5原生支持的video标签, 用于显示通过设备摄像头观察到的图像。
但是我们还需要把设备摄像头同这个video标签关联起来。方式是给这个标签的dom对象的srcObject属性赋一个MediaStream(媒体数据流)对象。
这个MediaStream对象从哪里来?同理,通过链式调用navigator.mediaDevices.getUserMedia(constraints)得到:
(3) 点击拍照按钮后,自动生成图片并下载到本地的功能在按钮的click事件响应函数里实现。首先调用canvas标签对应Context的API drawImage将显示摄像头内容的video标签当前显示的内容绘制到canvas标签页上,然后用此内容生成格式为jpeg的图片,下载到本地。
明天Jerry会继续分享SAP云平台相关的内容,敬请期待。
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
纯JavaScript实现的调用设备摄像头并拍照的功能相关推荐
- 使用js调用设备摄像头并实现拍照
使用getUserMedia这个API来获取摄像头的权限并实现拍照 在线体验:https://811w1z2xwj.codesandbox.io/ 下面是源码: <!DOCTYPE html&g ...
- html5调用设备摄像头,实现二维码扫描
html5调用设备摄像头,实现二维码扫描 最近在做一个签到系统,由于我直接使用了纯网页,因此调用摄像头进行扫码成了大问题.经过几番费力的百度终于找到解决方法. 主要用到MediaDevices.get ...
- js调用pc摄像头实现拍照、录视频等,新版Chrome无访问http页面无法打开麦克风、摄像头
js调用pc摄像头实现拍照.录视频等,新版Chrome无访问http页面无法打开麦克风.摄像头 新版Chrome配置 vue环境下的前端 function部分 ##由于没有https环境,只有http ...
- vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
- php全选和反选,纯javascript实现选择框的全选与反选功能
HTML部分 选择全部 一键上路 js部分 var oinput = document.getElementById('all'); // var oinput_s = document.getEle ...
- Vue (用javaScript/JS)调用媒体摄像头拍照扫描银行卡
概述:在Vue中调用摄像头拍照进行银行卡识别. 流程:vue中调用媒体摄像头(无前后摄像头切换功能)-->根据规定的框(前端自己定制)放置银行卡-->将识别的图片通过接口传到后台,后台识别 ...
- 解决javascript调用设备摄像头时video标签出项黑屏现象
出现原因 MediaStream对象的active属性问题 接口的active 只读属性MediaStream返回一个布尔值,true 如果流当前处于活动状态; 否则,它返回false.如果流中的至少 ...
- Electron应用中实现调用外接摄像头并拍照上传
背景 基于Electron实现的pc端智能验机应用,近期迭代了一个新的功能,需求是通过电脑外接摄像头对手机屏幕进行拍照,拍照后需将照片上传至服务端进行屏幕信息比对,确定被检测屏幕是否为原厂屏. 需求分 ...
- html5调取web端摄像头,JavaScript-web前端如何调用本地摄像头进行拍照?
JS调用好像不行,一般都是用Flash的Com,这是写好的一个Flash调用摄像头的,参考一下吧 package { import flash.display.Sprite; import flash ...
最新文章
- java session 是什么意思_Java:Session详解
- C++ 11 笔记 (四) : std::bind
- ITK:在图像中线性插值位置
- 微博VS微信,谁更有移动优势
- 计算机应用基础word试题,计算机应用基础Word试题.doc
- 配置Apache Httpd Server 2.2 Virtual Host UrlRewrite
- leetcode 题库1028--从先序遍历还原二叉树
- druid 多数据源_SpringBoot+Mybatis+ Druid+PageHelper 实现多数据源并分页
- doe五步法_DOE试验设计的五大步骤
- matlab取值只能为整数,运行时提示Size 输入必须为整数
- 许多知名公司宕机现象频繁发生
- 【SDOI2010】【BZOJ1924】所驼门王的宝藏
- DNSPod十问Neha Naik:以人民币结算海外IT业务的可能性?
- 在github上下载的.md文件怎么打开
- 激光SLAM系统Fast LOAM (Lidar Odometry And Mapping)源码解析
- 从零入门开源框架---若依(前后端分离版)
- kali2020.3安装openvas(gvm11)附gvm修改amdin密码以及gvm创建账号
- 贪心算法解决商场买赠问题(最简单,通俗易懂,附C++代码
- 用ECS做HexMap:不规则化
- 适合三本计算机专业考研的学校,适合三本考研的学校有哪些
热门文章
- go语言中go+select的理解
- 179一个错误的认识
- [转载] 什么是istio 官网内容
- Uiautomator--Uiselector元素定位
- js实现代码类似w3School演示效果
- BZOJ3270: 博物馆
- Swift - UITableView状态切换效果
- Windows下删除.svn文件夹的简易方法
- 文献记录(part16)--Learning Bayesian Network Classifiers: Searching in a Space of Partially ...
- 小白的算法初识课堂(part1)--二分查找法