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

看看主要代码吧：

这个是前台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了...