html5打开摄像头并用canvas模拟拍照
网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵。根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验。
废话不多说,直接看代码。
HTML代码:
- <video id="video" width="640" height="480" autoplay></video>
- <button id="snap">Snap Photo</button>
- <canvas id="canvas" width="640" height="480"></canvas>
复制代码
接下来是js代码:
打开摄像头
- var aVideo=document.getElementById('video');
- var aCanvas=document.getElementById('canvas');
- var ctx=aCanvas.getContext('2d');
- navigator.getUserMedia = navigator.getUserMedia ||
- navigator.webkitGetUserMedia ||
- navigator.mozGetUserMedia ||
- navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
- navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息
- function gotStream(stream) {
- video.src = URL.createObjectURL(stream);
- video.onerror = function () {
- stream.stop();
- };
- stream.onended = noStream;
- video.onloadedmetadata = function () {
- alert('摄像头成功打开!');
- };
- }
- function noStream(err) {
- alert(err);
- }
复制代码
按钮模拟拍照
- document.getElementById("snap").addEventListener("click", function() {
- ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
- });
复制代码
这样就成功啦!
但是!!!还有一点要注意,这在很多人那里都没有提到的,就是,打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。
目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。
还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!
html5打开摄像头并用canvas模拟拍照的更多相关文章
- html5打开摄像头并用canvas模拟拍照 - 转
<video id="video" width="640" height="480" autoplay></video&g ...
- html5 打开摄像头
<video onloadedmetadata="" id="inputVideo" style="width: 1080px;height: ...
- HTML5按键打开摄像头和拍照
HTML5实现按键打开摄像头和拍照 步骤: 1.创建一个打开摄像头按钮的标签.video标签.拍照的按钮标签.画布 2.实现打开摄像头的功能 3.实现拍照功能 具体实现代码: <!DOCTY ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- html 通过input video canvas 打开摄像头 定制相机
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
- 经典!HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- 手机端file限制只能选择图片、视频、音频,直接打开摄像头拍照或录像
限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...
- 项目实战:Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...
- [转]html5调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
随机推荐
- 洛谷——P2054 [AHOI2005]洗牌(扩展欧几里得,逆元)
P2054 [AHOI2005]洗牌 扩展欧拉定理求逆元 $1 2 3 4 5 6$$4 1 5 2 6 3$$2 4 6 1 3 5$$1 2 3 4 5 6$ 手推一下样例,你就会发现是有规律的: ...
- java解析从接口获取的json内容并写到excle(只写与标题匹配的值,并非把所有的接口返回值都写进去)
需求:从接口中获取的一个json数组中有多个对象,每个对象中的值并非都需要,只需查出标题中的几项对应的值即可.且还需要按某个字段排序后依次写到excel 实现方法如下: package jansonD ...
- java一维数组的声明、初始化及排序
public class TestArray { public static void main(String[] args) { /** 数组声明及动态初始化 int a[] = new int[a ...
- Jmeter使用笔记之断言
前言 Jmeter的断言方式有很多种,由于在工作中经常做的是API接口测试,所以这篇文章主要介绍如何对接口的字段进行解析,如何对解析出来的字段的值断言 了解API接口 Restful API 规范 协 ...
- 洛谷 1472 奶牛家谱 Cow Pedigrees
[题解] DP题,我们用f[i][j]表示有n个节点.高度小于等于j的二叉树的个数.f[i][j]=sigma(f[t][j-1]*f[i-t-1][j-1]) t是1~i-1范围内的奇数. #inc ...
- ModelMap org.springframework.ui.ModelMap
ModelMap实现了map接口,可以在其中存放属性,作用域同request,同时可与@SessionAttributes联合使用,把数据放入到session中去, 下面这个示例,我们可以在Model ...
- sql语句的字段转成Date
ms_sql:convert(datetime,'2010-11-13')cast('2017-01-01' as datetime) Oracle:to_date('2017-01-01') mys ...
- 1827 tarjan+缩点
#include<stdio.h> #include<stack> #include<iostream> #include<string.h> #inc ...
- java虚拟机(一)-java内存区域与内存溢出异常
1.简述:java虚拟机在执行java程序的过程中,会把他所管理的内存分为以下几个区域, 1.1.程序计数器 1.2.虚拟机栈 1.3.本地方法栈 1.4.java堆 1.5.方法区 如图所示: 2. ...
- 遇到很多次,要注意区分service调用,本地用户调用这些区别
WTSQueryUserToken返回1314 The WTSQueryUserToken function obtains the primary access token of the log ...