HTML5 调用摄像头 抓拍 裁切图片 转为Base64编码

知识点：H5标签：canvas,video；H5 API：navigator.getUseMedia;

思   路：1 video标签的src由navigator.UseMedia提取；（这个src就是base64编码）

           2 canvas drawImage方法 取得video中画面；

　　　  3 canvas_l.toDataURL("image/png")  将canvas转为base64编码

<section class="clear">
    <video id="video" width="640" height="480" controls="controls"></video>
</section>


<div class="can_box">
    <canvas id="canvas_l" width="100" height="25"></canvas>
</div>

<div class="clear"><img class="img" src="" alt="" id="img_l"></div>
<p class="base_64_l  base_64_text">图片的base_64编码：</p>
<div class="picture"><button id="picture">picture</button></div>

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {  
    // Grab elements, create settings, etc.  
    var canvas_l = document.getElementById("canvas_l"),      
        img_l=document.getElementById('img_l'),
        context_l = canvas_l.getContext("2d"),
        video = document.getElementById("video"),  
        videoObj = { "video": true },  
        errBack = function(error) {  
            console.log("Video capture error: ", error.code);   
        };  
        if(navigator.webkitGetUserMedia){//navigator.getUsermedia兼容问题
            navigator.webkitGetUserMedia(videoObj, function(stream){  
                video.src = window.URL.createObjectURL(stream); 
                video.play();
            },errBack);
        }else if(navigator.mozGetUserMedia){
            navigator.mozGetUserMedia(videoObj, function(stream){  
                video.src = window.URL.createObjectURL(stream);  
                video.play();  
            }, errBack); 
        }else if(navigator.getUserMedia){
            navigator.getUserMedia(videoObj, function(stream) {  
                video.src = stream;  
                video.play();  
            }, errBack);  
        }
document.getElementById("picture").addEventListener("click", function () 
   　context_l.draeImage(video, 10, 10, 200, 100, 0, 0, 210, 110);//第一个参数video是图片来源，第二、三个是提取图片的X、Y轴的开始点（相对video），第四、五个参数是提取图片的宽度和高度，第六、七个参数是把提取出来的图片放置在canvas的开始位置，第八、九个参数是图片放置的结束位置。
　　
    img_l.src=canvas_l.toDataURL("image/png");//这个就是base64编码
});

}, false);
</script>

 摄像头不能两个浏览器同时调用；

如在谷歌浏览器下可用，想在火狐下试试，就要把谷歌页面关掉，火狐页面才可以调的动摄像头。