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>

 攝像頭不能兩個瀏覽器同時調用；

如在谷歌瀏覽器下可用，想在火狐下試試，就要把谷歌頁面關掉，火狐頁面才可以調的動攝像頭。