<!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. 07_例子讲解：rlCoachKin + rlCoachMdl

    RL提供了2个相当简单的基于socket的虚拟化机器人,是socket服务端. rlCoachKin是用于D-H运动链(在rlkin\*xml中定义的). rlCoachMdl相当于任意几何的工具链. ...

  2. 学习C++ Primer 的个人理解（三）

    第三章,主要内容是字符串和数组.感觉作者的意图是希望读者可以早一点可以写出简单的小程序,并且可以早点接触迭代器这种思想. 在我看来,这种内容的难度并不大. 对于编程来说,最重要的应该是思想,类似vec ...

  3. 生产者消费者问题c语言实现

    #include <stdio.h> #include <process.h> #include <Windows.h> //信号量与关键段 CRITICAL_SE ...

  4. sicily 1200欢迎提出优化方案

    水题来的……我的做法是用a[10]数组表示每个数字出现的次数. 1200. Stick 限制条件 时间限制: 1 秒, 内存限制: 32 兆 题目描述 Anthony has collected a ...

  5. 第36条：坚持使用Override注解

    @Override 注解只能用在方法声明中,表示被注解的方法声明覆盖了超类型中的一个声明. @Target(ElementType.METHOD) @Retention(RetentionPolicy ...

  6. zoj 3829 Known Notation

    作者:jostree 转载请说明出处 http://www.cnblogs.com/jostree/p/4020792.html 题目链接: zoj 3829 Known Notation 使用贪心+ ...

  7. HTTP协议(4)

    HTTP  概括总结 方便以后使用.遗忘时有侧重点的去学习,方便查阅: 开始看到webservice 和restful 有些不理解 现在可以简单理解为 : webservice = http协议+XM ...

  8. MYSQL Error 2006HY000：MySQL server has gone away的解决方案

    MySQL server has gone away有几种情况. 1.应用程序(比如PHP)长时间的执行批量的MYSQL语句. 最常见的就是采集或者新旧数据转化. 解决方案: 在my.cnf文件中添加 ...

  9. mysql create database 指定utf-8编码

    CREATE DATABASE IF NOT EXISTS thinkphp  DEFAULT CHARSET utf8 COLLATE utf8_general_ci;

  10. Challenge Checkio（python）—初尝python练习网站

    最近在找点python语言练习的网站,发现这个网站不错 http://www.checkio.org/ 页面设计的也比较漂亮,比较适合学习python的语法知识.不过注册这个网站 开始就得解决一个py ...