H5调用摄像头

html5概念啥的就不废话了,不知道的 百度, 谷歌一堆。。今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取。。
目前支持html5的浏览器(参考
http://www.cnblogs.com/jerry_cong/archive/2011/05/15/2047143.html

看看主要代码吧:

这个是前台HTML的代码。

  1. <div id="contentHolder">       
  2. <video id="video" width="320" height="320" autoplay>
  3. </video>       
  4. <button id="snap" style="display:none"> 拍照</button>        
  5. <canvas style="display:none" id="canvas" width="320" height="320">
  6. </canvas> 
  7.    </div>
复制代码

下面这个是主要代码了。(jquery)
  1. <script>     
  2.   //判断浏览器是否支持HTML5 Canvas           
  3. window.onload = function () {          
  4.      try {                   
  5. //动态创建一个canvas元 ,并获取他2Dcontext。如果出现异常则表示不支持                   document.createElement("canvas").getContext("2d");        
  6.            document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";         
  7.       }          
  8.      catch (e) {           
  9.         document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";       
  10.         }                
  11.      };                
  12.      //这段代 主要是获取摄像头的视频流并显示在Video 签中           
  13. window.addEventListener("DOMContentLoaded", function () {            
  14.    var canvas = document.getElementByIdx("canvas"),              
  15.      context = canvas.getContext("2d"),                
  16.    video = document.getElementByIdx("video"),          
  17.          videoObj = { "video": true },             
  18.       errBack = function (error) {           
  19.             console.log("Video capture error: ", error.code);    
  20.                };               
  21.     //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow       
  22.         if (navigator.getUserMedia) {     
  23.               navigator.getUserMedia(videoObj, function (stream) {
  24.                        video.src = stream;                
  25.        video.play();      
  26.              }, errBack);           
  27.     } else if (navigator.webkitGetUserMedia) {        
  28.            navigator.webkitGetUserMedia(videoObj, function (stream) {          
  29.              video.src = window.webkitURL.createObjectURL(stream);           
  30.             video.play();           
  31.         }, errBack);           
  32.     }         
  33.       //这个是拍照按钮的事件,          
  34.      $("#snap").click(function () {          
  35.          context.drawImage(video, 0, 0, 320, 320);     
  36.               //CatchCode();           
  37.     });           
  38.           }, false);           
  39.           //定时器         
  40.   var interval = setInterval(CatchCode, "300");      
  41.                          //这个是 刷新上 图像的        
  42.    function CatchCode() {        
  43.        $("#snap").click();
  44. //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途    
  45.            var canvans = document.getElementByIdx("canvas"); 
  46. //获取浏览器页面的画布对象                       
  47.    //以下开始编 数据   
  48.                                   var imgData = canvans.toDataURL(); 
  49. //将图像转换为base64数据
  50.                var base64Data = imgData.substr(22); 
  51. //在前端截取22位之后的字符串作为图像数据       
  52.                             //开始异步上             
  53.    $.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {      
  54.              if (status == "success") {                 
  55.       if (data == "OK") {                
  56.            alert("二维 已经解析");                   
  57.     }                    
  58.    else {              
  59.              // alert(data);          
  60.              }          
  61.          }     
  62.               else {   
  63.                     alert("数据上 失败");                 
  64.   }               }, "text");           
  65.           }      
  66. </script>
复制代码

最后的就是接收经过base64编码之后的图像文件了。 
  1. public void ProcessRequest (HttpContext context) {    
  2.       string img;//接收经过base64编 之后的字符串    
  3.       context.Response.ContentType = "text/plain";        
  4.   try       {           
  5.    img =context.Request["img"].ToString();
  6. //获取base64字符串          
  7.     byte[] imgBytes = Convert.FromBase64String(img);
  8. //将base64字符串转换为字节数组            
  9.   System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);
  10. //将字节数组转换为字节流      
  11.         //将流转回Image,用于将PNG 式照片转为jpg,压缩体积以便保存。         
  12.      System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);    
  13.           imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片             
  14. context.Response.Write("OK");//输出调用结果                
  15.    }          catch (Exception msg)          {             
  16. img = null;            
  17.   context.Response.Write(msg);      
  18.         return;               
  19.     }              
  20.      }
复制代码

至此B/S通过本地摄像头拍照上传就完成了。HTML5的强大之处,爱不释手了。。。不在像以前需要写一堆烦人的东东了,而且你也可以不用去学flash... 额外说一句,如果您还在用IE6\IE7那您还是别玩html5了...

初出茅庐,欢迎指教!!

原文:http://blog.sina.com.cn/s/blog_75ad9c560101cu3t.html

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页