<!DOCTYPE html>

 <html>

 <head>

     <title>摄像头调用</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" charset="utf-8" />

     <style type="text/css">

     video,canvas{

         margin-top: 10px;

     }

     </style>

 </head>

 <body>

     <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" />

     <input type="button" title="关闭摄像头" value="关闭摄像头" onclick="shutdown()"><br/>

     <video height="200px" autoplay="autoplay" poster="cover.png" ></video><hr/> //poster是video的封面图片，可以自己加一个，也可以直接去掉

     <input type="button" title="拍照" value="拍照" onclick="getPhoto();"/><br/>

     <canvas id="canvas1" height="200px" ></canvas>

     <script type="text/javascript">

         var video = document.querySelector('video');

         var canvas1 = document.getElementById('canvas1');

         var context1 = canvas1.getContext('2d');

         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

         window.URL = window.URL || window.webkitURL || window.mozURL || window.msUR;

         var exArray = []; //存储设备源ID

         MediaStreamTrack.getSources(function (sourceInfos) {

             for (var i = 0; i != sourceInfos.length; ++i) {

                 var sourceInfo = sourceInfos[i];

                 //这里会遍历audio,video，所以要加以区分

                 if (sourceInfo.kind === 'video') {

                     exArray.push(sourceInfo.id);

                 }

             }

         });

         function getMedia() {

             if (navigator.getUserMedia) {

                 navigator.getUserMedia({

                     'video': {

                         'optional': [{

                             'sourceId': exArray[1] //0为前置摄像头，1为后置

                         }]

                     },

                     'audio':false                 //关闭声音

                 }, successFunc, errorFunc);    //success是获取成功的回调函数

             }

             else {

                 alert('Native device media streaming (getUserMedia) not supported in this browser.');

             }

         }

         function shutdown() {

             successFunc(null);

         }

         function successFunc(stream) {

             //alert('Succeed to get media!');

             if (video.mozSrcObject !== undefined) {

                 //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持

                 video.mozSrcObject = stream;

             }

             else {

                 video.src = window.URL && window.URL.createObjectURL(stream) || stream;

             }

         }

         function errorFunc(e) {

             alert('Error！'+e);

         }

         //拍照

         function getPhoto() {

             context1.drawImage(video, 0, 0,270,200); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。

         }

     </script>

 </body>

 </html>

html5 摄像头的调用的更多相关文章

  1. 荣品RP4412开发板摄像头驱动调用及对焦控制

    1.关于更换不同摄像头驱动调用问题. 问:RP4412开发板,我用的摄像头640*480图像预览时OK的,但是我调用1280*720的初始化预览,摄像头没有图像了,是不是camera程序也需要修改? ...

  2. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  3. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  4. HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...

  5. Emgucv(一)Aforge切换摄像头并调用摄像头属性

    一.新建一个Windows窗体应用程序,在Form1窗体上添加一个PictureBox控件.一个ComboBox控件,命名为PictureBox1.cbCapture,还有两个Button控件,Tex ...

  6. 摄像头(3)调用系统拍照activity来拍照

    import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...

  7. 摄像头(2)调用系统拍照activity来录像

    import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...

  8. html5的navigator调用手机震动

    navigator.vibrate(s) 或 navigator.webkitVibrate(s),不过该属性只在安卓系统有效.

  9. HTML5网页如何调用浏览器APP的微信分享功能？

    if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Al ...

随机推荐

  1. 【POJ 1228】Grandpa's Estate 凸包

    找到凸包后暴力枚举边进行$check$,注意凸包是一条线(或者说两条线)的情况要输出$NO$ #include<cmath> #include<cstdio> #include ...

  2. 【NOIP 2004】虫食算

    因为一天机房都是断网状态,校内的小V评测这道题总显示Unaccept,所以下午放学后就和xiaoyimi晚上回家自习,来做一做这道题. 搜索+剪枝优化: 一开始我是顺着低位向高位填数,这么暴力在Vij ...

  3. <诗经>的由来

    <人间词话七讲> 第一讲 那是一个把各地的歌谣都编辑在一起的collection. 而且, 它被编辑的时候有一个目的, 在周朝的时候有采诗之官, 他们采集各地的歌谣, 以观民风, 用来给周 ...

  4. mysql分表的三种方法

    先说一下为什么要分表当一张的数据达到几百万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会死在那儿了.分表的目的就在于此,减小数据库的负担,缩短查询时间.根据个人经验,mysql执行一 ...

  5. lucene-一篇分词器介绍很好理解的文章

    本文来自这里在前面的概念介绍中我们已经知道了分析器的作用,就是把句子按照语义切分成一个个词语.英文切分已经有了很成熟的分析器: StandardAnalyzer,很多情况下StandardAnalyz ...

  6. dede使用方法----调用导航

    在这里,极力推荐学习dede的朋友们观看老李的零基础织梦仿站系列课程的视频,讲的超级棒的~~ 网址链接是:http://www.dede888.com/15daylessons.html. 好了,言归 ...

  7. 轻快的VIM（三）：删除

    这一节我们来看看删除,删除命令比较简单,不过要使删除更有效率 你需要配合我们第一节中讲的各种移动命令 字符删除 x 删除光标所在处字符 X 删除光标所在前字符 这里没有什么可注意的地方,但需要说明一下 ...

  8. iOS开发基础知识碎片

    1:contentSize.contentInset和contentOffset区别 contentSize 是scrollview中的一个属性,它代表scrollview中的可显示区域,假如有一个s ...

  9. 解决虚拟机 MAC10.9 不能设置1366*768分辨率问题

    首先在虚拟机设置里,显示--3d下面--固定分辨率--最大设成1024*768--保存然后打开虚拟机的.vmx文件,最后几行 svga.autodetect = "FALSE"sv ...

  10. golang学习之旅：搭建go语言开发环境

    从今天起,将学习go语言.今天翻了一下许式伟前辈写的<Go语言编程>中的简要介绍:Go语言——互联网时代的C语言.前面的序中介绍了Go语言的很多特性,很强大,迫不及待地想要一探究竟,于是便 ...