<!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. VS2010 error RC2135: file not found

    VS2010 C++ win32 DLL 工程, 添加 rc 文件, 编辑 String Table. 默认情况下英文版本的 rc 文件能够顺序编译通过,为了让工程支持多语言,将字符串修改为其他语言时 ...

  2. Mustache

    简要介绍 玩过node的人应该都知道ejs,jade. mustache和他们一样都是模板渲染引擎,我个人喜欢mustache,因为他非常简洁,代码量才600多行. mustache既可以在前端使用, ...

  3. Linux之CentOS下vsftp安装及配置相关操作

    1.安装ftps——vsftpd: #yum install vsftpd 2.指定上传下载目录配置: 如:用户名:xxx,需指定目录:/xxx/xxx #useradd -d /xxx/xxx -s ...

  4. Linux负载均衡概念与实践(二)

    构建实践LVS+Keepalived实现负载均衡 keepalived概述 1.keepalived是专门针对LVS设计的一款强大的辅助工具,主要用来提供故障切换和健康检查功能——判断LVS负载调度器 ...

  5. OpenSUSE共享网络

    因为想要使用Arduino Ethernet扩展版,想要搭建一个局域网供其使用有线,无奈路由器离我太远.遂有本文. 实验器材: 装有OpenSUSE.有线网卡.无线网卡的笔记本. 路由器一台. 实验步 ...

  6. 如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  7. 大型B/S系统技术总结（不断更新）

    看了<淘宝技术这十年>和<大型网站系统与Java中间件实践>这些书,对大型B/S系统的构建越来越感兴趣,于是尝试收集和总结一些常用的技术手段.不过大型网站的架构是根据业务需求不 ...

  8. JavaScript typeof function()的注意事项

    首先,上一段代码: var f = function g() { return 23; }; console.log(typeof g); //输出undefined //console.log(ty ...

  9. 对html进行SEO的一点点总结

    1. 要考虑用户用哪些关键在查找您的网页 2. SE无法识别图形中的内容 3. 确保title和alt中的内容准确 4. 尽量用静态页,如果是动态页,参数要少 5. 每个图片都尽量用alt 6. 不用 ...

  10. sublime text 2 前端编码神器-快捷键与使用技巧介绍

    介绍网址:http://www.xuanfengge.com/sublime-text-2-artifact.html