通过H5实现拍照功能的实例详解

代码如下:

!-- 声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 宽高： 640 *480,当然，可以动态控制啦! -->
     !-- Ideally these elements aren't created until IT's confirmed that the client supports video/camera, but for the sake of illustrating the elements involved, they are created with markup (not JavaScript) -->
     video id="video" width="640" height="480" autoplay>
    /video>
     button id="snap">
    Snap Photo/button>
     canvas id="canvas" width="640" height="480">
    /canvas>
    

JavaScript
只要上面的HTML元素创建完成，那么JavaScript部分将简单的超乎你想象的简单：

代码如下:

// 设置事件监听，DOM内容加载完成，和jquery的$.ready() 效果差不多。 window.addEventListener("DOMContentLoaded", function() {
 // canvas 元素将用于抓拍 VAR canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), // video 元素，将用于接收并播放摄像头 的数据流 video = document.getElementById("video"), videoObj = {
 "video": true }
, // 一个出错的回调函数，在控制台打印出错信息 errBack = function(error) {
 if("object" === tyPEof window.console){
     console.LOG("Video capture error: ", error.code);
 }
 }
    ;
 // Put video listeners into place // 针对标准的浏览器 if(navigator.getUserMedia) {
 // Standard navigator.getUserMedia(videoObj, function(stream) {
     video.src = stream;
     video.play();
 }
    , errBack);
 }
 else if(navigator.webkitGetUserMedia) {
 // WebKit-PRefixed navigator.webkitGetUserMedia(videoObj, function(stream){
     video.src = window.webkitURL.createObjectURL(stream);
     video.play();
 }
    , errBack);
 }
 // 对拍照按钮的事件监听 document.getElementById("snap").addEventListener("click", function() {
     // 画到画布上 context.drawImage(video, 0, 0, 640, 480);
 }
    );
 }
    , false);
    

最后，记得讲您的网页放到web服务器下面，然后通过http协议来访问哦。
另外，需要浏览器版本较新，并且支持HTML5的相关新特性才可以。
译者不算称职啦，没有按原文来翻译。使用的浏览器是chrome 28。
最后，贴上完整的代码，比较呆板。

代码如下:

!DOCTYPE html>
     html>
     head>
     title>
     浏览器webcamera /title>
     meta name="Generator" content="EditPlus">
     meta name="Author" content="renfufei@QQ.COM">
     meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera">
     script>
 // 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 window.addEventListener("DOMContentLoaded", function() {
 // canvas 元素将用于抓拍 var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), // video 元素，将用于接收并播放摄像头 的数据流 video = document.getElementById("video"), videoObj = {
 "video": true }
, // 一个出错的回调函数，在控制台打印出错信息 errBack = function(error) {
 if("object" === typeof window.console){
     console.log("Video capture error: ", error.code);
 }
 }
    ;
 // Put video listeners into place // 针对标准的浏览器 if(navigator.getUserMedia) {
 // Standard navigator.getUserMedia(videoObj, function(stream) {
     video.src = stream;
     video.play();
 }
    , errBack);
 }
 else if(navigator.webkitGetUserMedia) {
 // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){
     video.src = window.webkitURL.createObjectURL(stream);
     video.play();
 }
    , errBack);
 }
 // 对拍照按钮的事件监听 document.getElementById("snap").addEventListener("click", function() {
     // 画到画布上 context.drawImage(video, 0, 0, 640, 480);
 }
    );
 }
    , false);
     /script>
     /head>
     body>
     p>
     !-- 声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 宽高： 640 *480,当然，可以动态控制啦! -->
     !-- Ideally these elements aren't created until it's confirmed that the client supports video/camera, but for the sake of illustrating the elements involved, they are created with markup (not JavaScript) -->
     video id="video" width="640" height="480" autoplay>
    /video>
     button id="snap">
    Snap Photo/button>
     canvas id="canvas" width="640" height="480">
    /canvas>
     /p>
     /body>
     /html>
    

【相关推荐】

1. Html5免费视频教程

2. HTML5实现微信播放全屏的方法详解

3. 关于H5新标签的浏览器兼容问题的详解

4. 整体概述如何用H5制作网页

5. H5与传统html的区别

以上就是通过H5实现拍照功能的实例详解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！