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

技术的进步使我们遇到了html5。下面这个简单粗暴的demo就是来完成这些功能的。直接看代码：

   <!DOCTYPE html>

     <html>

     <head>

         <title>html5调用摄像头实现拍照</title>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

     </head>

     <body>

     <video id="video" autoplay=""style='width:640px;height:480px'></video>

     <button id="paizhao">拍照</button>

     <canvas id="canvas" width="640" height="480"></canvas>

     <script type="text/javascript">

         var video=document.getElementById("video");

         var context=canvas.getContext("2d");

         var errocb=function(){

             console.log("sth srong");

         }

         if(navigator.getUserMedia){

             navigator.getUserMedia({"video":true},function(stream){

                 video.src=stream;

                 video.play();

             },errocb);

         }else if(navigator.webkitGetUserMedia){

             navigator.webkitGetUserMedia({"video":true},function(stream){

                 video.src=window.webkitURL.createObjectURL(stream);

                 video.play();

             },errocb);

         }

         document.getElementById("paizhao").addEventListener("click",function(){

             context.drawImage(video,0,0,640,480);

         });

     </script>

     </body>

     </html>

html5调用摄像头实现拍照的更多相关文章

  1. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  2. HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

  3. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

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

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

  5. HTML之调用摄像头实现拍照和摄像功能

    应该有很多人知道,我们的手机里面有个功能是“抓拍入侵者”,说白了就是在解锁应用时如果我们输错了密码手机就会调用这一功能实现自动拍照. 其实在手机上还有很多我们常用的软件都有类似于这样的功能,比如微信扫 ...

  6. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

  7. java javacv调用摄像头并拍照

    调用摄像头并拍张照片,我一开始用的java的jmf媒体框架,但这个有很多的局限性不好使并且很有麻烦,兜了一圈发现javacv东西,研究之后这东西简单,方便:废话不多说了来重点. javacv官网:点击 ...

  8. 【Java】调用摄像头进行拍照并保存【详细】以及处理no jniopencv_core in java.library.path的一种方法

    [之前困扰笔者的问题描述]   date:2019.12.18 网上教程很多,但是没有看见完整的,所以写一个出来. 调用摄像头需要javaCV的jar包和openCV的jar包,现在已经不需要安装包了 ...

  9. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

随机推荐

  1. Maven项目META-INF文件夹不存在的问题

    直接在resources文件夹下新建META-INF文件夹即可. 参考: https://my.oschina.net/KingPan/blog/750159 https://stackoverflo ...

  2. UIwebview 文件的下载与保存，以及mp3文件的播放

    这里只是说说异步 单线程下载与文件的保存 以下载一个mp3文件并保存为例: -(void)loading { //设置文件下载地址 NSString *urlString = [NSString st ...

  3. QCon大会上推荐阅读的10本书

    QCon北京2014大会将于4月25-27日在北京国际会议中心盛大开幕.QCon是由@InfoQ 主办的全球顶级技术盛会.在此次盛会中,现场将有@人民邮电出版社-信息技术分社 主办的现场扫描二维码赠书 ...

  4. QT 安装 4.8.7 on solaris 10

    1.  下载 QT 4.8.7: http://download.qt.io/official_releases/qt/4.8/4.8.7/qt-everywhere-opensource-src-4 ...

  5. Major GC 是清理老年代。 Full GC 是清理整个堆空间—包括年轻代和老年代。

    Major GC 是清理老年代. Full GC 是清理整个堆空间—包括年轻代和老年代.

  6. Android Binder 设计与实现 - 设计篇

    关键词 Binder Android IPC Linux 内核 驱动 摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket ...

  7. 使用supervisor过程的坑

    1.安装:由于使用的是公司的虚拟机,所以使用pip install supervisor的过程遇到很多权限问题. 中间尝试使用sudo pip install supervisor的方式安装,但是使用 ...

  8. 【BZOJ】【3671】【NOI2014】随机数生成器

    贪心 嗯……其实生成这个矩阵就是一个$O(n^2)$的模拟 = = 然后?字典序最小?贪心呗= =能选1就选1,然后能选2就选2…… 我们发现,对于矩阵(1,1)~(n,m),假设1的位置是(x,y) ...

  9. 第四章 四种List实现类的对比总结

    1.ArrayList 非线程安全 基于对象数组 get(int index)不需要遍历数组,速度快: iterator()方法中调用了get(int index),所以速度也快 set(int in ...

  10. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...