HTML5 PC、Mobile調用攝像頭（navigator.getUserMedia）

廢話少說，先貼上代碼

html:

<div id="main" class="masthead">
    <div id="face_scan_camera" class="container blackbg" style="height:792px; ">
        <div style="width:1400px;margin:0 auto;">
            <video id="video" width="1400" height="790" autoplay="autoplay" style="margin:0 auto;position:relative;z-index:100;"></video>                
        </div>
        <div class="camera-mask"></div>
        <div class="camera-area" style="width:450px;height:350px;background:url(/images/lifescan/scan_kuang1.png) no-repeat;z-index:102;top:560px;left:780px;"> 
            <img src="/images/lifescan/scan_kuang1.png" />
            <div class="scan-area" style="height:585px;width:580px;display:none; ">
                <canvas id="canvas" width="1054" height="790" style="display:inline-block; margin:0 auto;position:relative;left:13px;top:70px;z-index:100;"></canvas>                    
            </div>
            <a id="snap" ><img src="/images/lifescan/camera_btn.png" /></a>
        </div>
    </div>
    <div id="cream_loading" style="display:none;position:absolute; margin:-62px 0 0 -62px;top:50%;left:50%;height:124px;width:124px;z-index:2001;"><img  src="/Images/cream_loading.gif"/></div>       
</div>

var scan_param = {};
var scanInterval;
var sn = 0;
var sel, fr;
$(function () {
    $('#canvas').hide();
    try {
        sel = document.getElementById('fileselect'); // get reference to file select input element

        window.addEventListener("DOMContentLoaded", function () {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function (error) {
                if (error.PERMISSION_DENIED) {
                    //swal("", privacyRequiredMsg, "warning");
                    swal("",'用戶拒絕了瀏覽器請求媒體的權限', 'warning');
                } else if (error.NOT_SUPPORTED_ERROR) {
                    swal("", '對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器', 'warning');
                } else if (error.MANDATORY_UNSATISFIED_ERROR) {
                    swal("", '指定的媒體類型未接收到媒體流', 'warning');
                } else {
                    swal("", '系統未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試', 'warning');
                }
            };

            var message = "為了獲得更准確的測試結果，請盡量將面部置於紅框中，然后進行拍攝、掃描。 點擊“OK”后，請在屏幕上方出現的提示框選擇“允許”，以開啟攝像功能";
            // Put video listeners into place
            if (navigator.getUserMedia) { // Standard
                if (navigator.userAgent.indexOf('MQQBrowser') > -1) {
                    swal("",'對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器', 'warning');
                    return false;
                }
                swal({
                    title: "",
                    text: message,
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "OK",
                    closeOnConfirm: true
                },
                function (isConfirm) {
                    $(document).scrollTop($(window).height());
                });
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                    $('#lifescan #main .btn_click').css('margin-top', '-550px');
                    video.addEventListener('loadeddata', function () {
                        $(document).scrollTop($(window).height());
                    }, false);
                    $('#snap').click(function () {
                        //$('.scan-area').show();
                        $('#cream_loading').toggle();
                        context.drawImage(video, 0, 0, 640, 480);
                        convertCanvasToImage();
                    });
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                swal({
                    title: "",
                    text: message,
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "OK",
                    closeOnConfirm: true
                },
                function (isConfirm) {
                    $(document).scrollTop($(window).height());
                });
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                    $('#lifescan #main .btn_click').css('margin-top', '-550px');
                    video.addEventListener('loadeddata', function () {
                        $(document).scrollTop($(window).height());
                    }, false);
                    if (navigator.userAgent.indexOf('UCBrowser') > -1) {
                        $('#lifescan #main .btn_click').css('margin-top', '-10px');
                    }
                    $('#snap').click(function () {
                        $('#cream_loading').toggle();
                        context.drawImage(video, 0, 0, 640, 480);
                        convertCanvasToImage();
                    });
                }, errBack);

            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                swal({
                    title: "",
                    text: message,
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "OK",
                    closeOnConfirm: true
                },
                function (isConfirm) {
                    $(document).scrollTop($(window).height());
                });
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    video.addEventListener('loadeddata', function () {
                        $(document).scrollTop($(window).height());
                    }, false);
                    $('#lifescan #main .btn_click').css('margin-top', '-550px');

                    $('#snap').click(function () {
                        $('#cream_loading').toggle();
                        context.drawImage(video, 0, 0, 640, 480);
                        convertCanvasToImage();
                    });
                }, errBack);

            }
            else if (navigator.msGetUserMedia) {
                swal({
                    title: "",
                    text: message,
                    type: "warning",
                    showCancelButton: false,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "OK",
                    closeOnConfirm: true
                },
                function (isConfirm) {
                    $(document).scrollTop($(window).height());
                });
                navigator.msGetUserMedia(videoObj, function (stream) {
                    $(document).scrollTop($(window).height());
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                    $('#lifescan #main .btn_click').css('margin-top', '-550px');
                    video.addEventListener('loadeddata', function () {
                        $(document).scrollTop($(window).height());
                    }, false);
                    $('#snap').click(function () {
                        $('#cream_loading').toggle();
                        context.drawImage(video, 0, 0, 640, 480);
                        convertCanvasToImage();
                    });
                }, errBack);

            }
            else {
                var userAgent = navigator.userAgent;
                if (navigator.vendor == "Apple Computer, Inc.") {//這里是對Safari瀏覽器的判斷
                    sel.addEventListener('change', function (e) {
                        var f = sel.files[0]; // get selected file (camera capture)
                        fr = new FileReader();
                        fr.onload = receivedData; // add onload event

                        fr.readAsDataURL(f); // get captured image as data URI
                    });
                    $('#imgtag').show();
                    //$('.div_video').hide();
                    $('#snap').click(function () {
                        sel.click();
                    });
                } //判斷是否Safari瀏覽器
                else {
                    swal("", "對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器", "warning");
                }
            }
        }, false);
    }
    catch (err) {
        swal("", "對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器", "warning");
    }
});
// for iOS 
// create file reader
function receivedData() {
    // readAsDataURL is finished - add URI to IMG tag src
    $('.div_video #video').hide();
    $('.div_video #imgtag').show();
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var imgtag = document.getElementById('imgtag'); // get reference to img tag
    imgtag.src = fr.result;
    $('#cream_loading').toggle();

    try {
        setTimeout(function () {
            context.drawImage(imgtag, 0, 0, 640, 480);
            convertCanvasToImage();
        }, 500);

    }
    catch (err) {
        swal(err, "warning");
    }
}
//帆布轉換成圖像並保存圖片
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = document.getElementById("canvas").toDataURL("image/png");
    //alert(image.src);
    //刪除字符串前的提示信息“data:image/png;base64”
    var b64 = image.src.substring(22);
    var myDate = new Date();
    var filename = myDate.getTime();
    $.post("/Article/SavePhoto", { data: b64, name: filename }, function (result) {
        if (result.success) {
            $('#cream_loading').toggle();
            window.location.href = "/yourreenex?photo=" + result.photo;
        }
    });
    return image;
}

function initScanParam() {
    scan_param = {
        lineHeight: 0
    };
    scan_param.scanBorder = $('.scan-area').height();
    var $scan = $('.scanL');
    scan_param.scanTop = $scan.css('top');
    scan_param.scanHeight = $scan.css('height');
}
function scanImage() {
    var $scan = $('.scanL');

    var top = Math.ceil(parseFloat($scan.css('top')));
    //alert(top +"||"+ scan_param.lineHeight +"|||"+ scan_param.scanBorder);
    if (top < scan_param.scanBorder) {
        //alert(top + "||" + scan_param.lineHeight + "|||" + scan_param.scanBorder);
        $scan.css({ 'top': (top + 1) + 'px', 'height': ($scan.height() - 1) + 'px' });
        if ($scan.height() == 0) {
            $('.right .result-number').text(createData(40, 100) + "%");
        }
    } else {

        clearInterval(scanInterval);
    }
}


//分析瀏覽器是否支持
function isStreamSupported() {
    if (navigator.mozGetUserMedia) {
        return true;
    }
    else {
        return false;
    }
}

navigator.vendor == "Apple Computer, Inc." 這句的解釋請看這篇文章http://www.cnblogs.com/lechenging/p/4226494.html 

 然后說一下這個兼容性，目前支持，PC端：chrome，Firefox，360;移動端：chrome,Firefox,UC,Safair(這個的調用跟其他有點區別，后面會說道)

接着上圖片：PC端的沒上圖片，第一張是mobile chrome，后面兩張是mobile firefox

 

 

 然后我們來說一下代碼，html代碼中其中用到的就是video 跟 canvas  標簽，其中canvas是隱藏的，其中的height width 不是卸載style那種。

 

我們還是來重點說明一下js代碼吧

 

為了兼容不同的瀏覽器我們這里對navigator.getUserMedia 進行了判斷，因為手機上video的width實在不好控制要滿屏，所以我特意放大了，但這樣就會有一個拍照按鈕被撐到了下面，需要滑動頁面才能找到，用戶體驗不好，為了解決這一問題我給video  添加了 'loadeddata'事件，讓頁面能再及時的自動下滑到地步

 

再來說一下拍照，用到了context.drawImage(video, 0, 0, 640, 480 );但這樣並不能達到生成圖片的目的，所以后面我又用到了convertCanvasToImage（）函數

 

 

我再來說一下對Safair的處理，safair似乎不支持navigator.getUserMedia，再一大牛的幫助下，處理找到了另一種處理方法：

 

就是調用safair自己的拍照來實現，sel.addEventListener('change', function (e){...}) 就是添加了 你選取的是拍照還是圖片的事件，后面的receivedData()函數是對其的處理，其中的一定要做一個setTimeout，蘋果的圖片高質量，加載沒有那么迅速，為了讓drawImage能夠取到已經加載的圖片要做一個延時，否則會取不到圖片

 

 

為了解決程序處理圖片速度慢的問題，我還加了一個loading圖片，來提高用戶體驗。

 

對了忘了說一下，safair拍出的圖片是反着的，我也不知道怎么回事，大家有知道，希望指點一下！！！