网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵。根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验。

废话不多说,直接看代码。

HTML代码:

  1. <video id="video" width="640" height="480" autoplay></video>
  2. <button id="snap">Snap Photo</button>
  3. <canvas id="canvas" width="640" height="480"></canvas>

复制代码

接下来是js代码:

打开摄像头

  1. var aVideo=document.getElementById('video');
  2. var aCanvas=document.getElementById('canvas');
  3. var ctx=aCanvas.getContext('2d');
  4. navigator.getUserMedia  = navigator.getUserMedia ||
  5. navigator.webkitGetUserMedia ||
  6. navigator.mozGetUserMedia ||
  7. navigator.msGetUserMedia;//获取媒体对象(这里指摄像头)
  8. navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限;参数二成功打开后调用,并传一个视频流对象,参数三打开失败后调用,传错误信息
  9. function gotStream(stream) {
  10. video.src = URL.createObjectURL(stream);
  11. video.onerror = function () {
  12. stream.stop();
  13. };
  14. stream.onended = noStream;
  15. video.onloadedmetadata = function () {
  16. alert('摄像头成功打开!');
  17. };
  18. }
  19. function noStream(err) {
  20. alert(err);
  21. }

复制代码

按钮模拟拍照

  1. document.getElementById("snap").addEventListener("click", function() {
  2. ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上
  3. });

复制代码

这样就成功啦!
但是!!!还有一点要注意,这在很多人那里都没有提到的,就是,打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。

还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!

html5打开摄像头并用canvas模拟拍照的更多相关文章

  1. html5打开摄像头并用canvas模拟拍照 - 转

    <video id="video" width="640" height="480" autoplay></video&g ...

  2. html5 打开摄像头

    <video onloadedmetadata="" id="inputVideo" style="width: 1080px;height: ...

  3. HTML5按键打开摄像头和拍照

    HTML5实现按键打开摄像头和拍照 步骤: 1.创建一个打开摄像头按钮的标签.video标签.拍照的按钮标签.画布 2.实现打开摄像头的功能 3.实现拍照功能   具体实现代码: <!DOCTY ...

  4. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  5. html 通过input video canvas 打开摄像头 定制相机

    在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...

  6. 经典!HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  7. 手机端file限制只能选择图片、视频、音频,直接打开摄像头拍照或录像

    限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...

  8. 项目实战:Qt+Ffmpeg+OpenCV相机程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  9. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

随机推荐

  1. 洛谷——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$ 手推一下样例,你就会发现是有规律的: ...

  2. java解析从接口获取的json内容并写到excle(只写与标题匹配的值,并非把所有的接口返回值都写进去)

    需求:从接口中获取的一个json数组中有多个对象,每个对象中的值并非都需要,只需查出标题中的几项对应的值即可.且还需要按某个字段排序后依次写到excel 实现方法如下: package jansonD ...

  3. java一维数组的声明、初始化及排序

    public class TestArray { public static void main(String[] args) { /** 数组声明及动态初始化 int a[] = new int[a ...

  4. Jmeter使用笔记之断言

    前言 Jmeter的断言方式有很多种,由于在工作中经常做的是API接口测试,所以这篇文章主要介绍如何对接口的字段进行解析,如何对解析出来的字段的值断言 了解API接口 Restful API 规范 协 ...

  5. 洛谷 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 ...

  6. ModelMap org.springframework.ui.ModelMap

    ModelMap实现了map接口,可以在其中存放属性,作用域同request,同时可与@SessionAttributes联合使用,把数据放入到session中去, 下面这个示例,我们可以在Model ...

  7. sql语句的字段转成Date

    ms_sql:convert(datetime,'2010-11-13')cast('2017-01-01' as datetime) Oracle:to_date('2017-01-01') mys ...

  8. 1827 tarjan+缩点

    #include<stdio.h> #include<stack> #include<iostream> #include<string.h> #inc ...

  9. java虚拟机(一)-java内存区域与内存溢出异常

    1.简述:java虚拟机在执行java程序的过程中,会把他所管理的内存分为以下几个区域, 1.1.程序计数器 1.2.虚拟机栈 1.3.本地方法栈 1.4.java堆 1.5.方法区 如图所示: 2. ...

  10. 遇到很多次,要注意区分service调用,本地用户调用这些区别

    WTSQueryUserToken返回1314   The WTSQueryUserToken function obtains the primary access token of the log ...