<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<script type="text/javascript" src="/js/jquery1.8.3.js"></script>

<title>在线拍照</title>

</head>

<body>

<video id="camVideo" width="400" height="328" autoplay></video> <br />

<button  id="snap">抓图</button> <br />

<table>

<tr>

 <td><canvas id="canvas" width="400" height="328" /></td><td><input name="imgData" id="imgData" style="width:600px"/></td>

</tr>

</table>

<script>

$(function(){

     // 获取元素，创建配置

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

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

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

    var videoObj = { "video": true };

    var errBack = function(error) {

      console.log("Video capture error: ", error.code);

    };

  // 添加视频监听器

  if(navigator.getUserMedia) { // 标准的API

    navigator.getUserMedia(videoObj, function(stream) {

      video.src = stream;

      video.play();

    }, errBack);

  } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API

    navigator.webkitGetUserMedia(videoObj, function(stream){

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

      video.play();

    }, errBack);

  } else if(navigator.mozGetUserMedia) { // WebKit-prefixed

    navigator.mozGetUserMedia(videoObj, function(stream){

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

        video.play();

     }, errBack);

  }

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

   context.drawImage(video, 0, 0, 400, 328);

   var dataUrl = context.canvas.toDataURL("image/png");

      $( "#imgData" ).val( dataUrl );

   });

});

</script>

</body>

</html>

HTML5实现在线抓拍的更多相关文章

  1. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  2. HTML5简易在线画图工具

    继上次学习了HTML5的路径画圆做了动态时钟.异次元空间的反转做了运动的太阳系,这两天将画线.画圆.填充等知识点结合起来做了一个简易的在线画图工具: 查看DEMO:HTML5简易在线画图工具 功能包括 ...

  3. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

  4. HTML5 canvas 在线画笔绘图工具（一）

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  5. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  6. Processon 一款基于HTML5的在线作图工具

    CSDN的蒋涛不久前在微博上评价说ProcessOn是web版的visio,出于好奇私下对ProcessOn进行了一番研究.最后发现无论是在用户体验上,还是在技术上,ProcessOn都比微软的Vis ...

  7. 8个经典的HTML5游戏在线试玩及源码学习

    原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...

  8. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  9. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

随机推荐

  1. cics下任务的停止

    cicsterm CEMT I TA TAB==找到要停止的进程 在进程后加入 f或者p 或者fp =========================== 或者找到进程ID号 用命令:kill -9 ...

  2. mysql主配置文件my.cnf详细说明

    MySQL配置文件my.cnf 例子最详细翻译,可以保存做笔记用[转载]#BEGIN CONFIG INFO#DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 ...

  3. read/write数据读写传输方式（转）

    前言 笔者本打算撰写一篇讲解标准I/O(缓存I/O)的博文,但是发现已经有网友做过同样的工作,并且工作质量上乘,特转载于此. 原文地址http://lenky.info/archives/2012/0 ...

  4. httpd.ini

    [ISAPI_Rewrite]CacheClockRate 3600RepeatLimit 32RewriteRule ^(.*)/plus/list-tid-([0-9]+)\.html$ $1/p ...

  5. 走进WCF一 （异常如此多娇，引无数码农竞折煞）

    对于WCF一直都是只知其然,公司框架的架构者也只是对我们授之以鱼,而不授之以渔. 带着初学者的态度进入了大神Artech的博客,逐步慢慢上手. 我的解决方案(和大神的一模一样,只是过程中一波三折的) ...

  6. We7——很有意思的一个开源CMS

    目前做门户.做网站,基本上都需要用到一个系统,那就是CMS内容管理系统:现在开源产品有很多,笔者也是从事这个行业的,国内的各大CMS提供商基本上都试用过,今天向大家推荐一款很有意思的产品——We7CM ...

  7. Unity3d Shader开发（二）SubShader

    (1)SubShader Unity中的每一个着色器都包含一个subshader的列表,当Unity需要显示一个网格时,它能发现使用的着色器,并提取第一个能运行在当前用户的显示卡上的子着色器. 当Un ...

  8. Lucene基础（三）-- 中文分词及高亮显示

    Lucene分词器及高亮 分词器 在lucene中我们按照分词方式把文档进行索引,不同的分词器索引的效果不太一样,之前的例子使用的都是标准分词器,对于英文的效果很好,但是中文分词效果就不怎么样,他会按 ...

  9. android正在运行进程和后台缓存进程的区别

    正在运行的进程:需要占用一定的cpu资源和RAM(内存)空间,多少的话看是什么应用,要消耗一定的电量,影响手机速度等性能. 后台缓存的进程:不需要占用cpu资源,会在RAM中写入一部分数据,当下次打开 ...

  10. BZOJ 2124等差子序列 线段树&&hash

    [题目描述 Description] 给一个 1 到 N 的排列{Ai},询问是否存在 1<=p1<p2<p3<p4<p5<…<pLen<=N(Len& ...