JS呼叫本地攝像頭拍照（相容各大瀏覽器及IE8+）

阿新 • • 發佈：2019-01-16

最近做的專案遇到了個難題，使用video+canvas+getUserMedia()寫的呼叫本地攝像頭拍照不相容IE。
原因：IE8及以下不支援HTML5標籤：video和canvas；IE11及以下所有版本，包括Edge都不支援getUserMedia()。
所以，這幾天在網上各種搜，發現想要相容IE瀏覽器就只能使用Flash。

解決方案

方案一

flash+as3.0+swfobject實現攝像頭拍照
方案分析：
1、使用 adobe flash + actionscript 製作swf檔案；
2、採用swfobject.js外掛實現頁面呼叫swf檔案。
有一篇部落格寫得特別好：

flash+as3.0+swfobject實現攝像頭拍照

這樣可以自定義swf檔案，但是代價好高啊，還要去學actionscript並且要裝adobe flash CS6，花的時間太多了。

所以我想到既然有封裝的swfobject外掛可以更方便的插入flash，那是不是有相容性好的封裝好的控制元件可以直接呼叫攝像頭。這個搜尋過程真的是艱辛無比啊！終於讓我找到了jQuery攝像頭外掛“jquery-webcam-plugin”。

方案二

jquery-webcam-plugin+canvas+後臺處理
方案分析：

使用 jquery-webcam-plugin 顯示本地攝像頭。
點選拍照按鈕後，
（a）針對 IE9 及以上：通過flash呼叫攝像頭後，將影象直接輸出到canvas畫布中，再通過canvas中的方法 toDataURL()方法，生成影象的base64編碼傳到後臺。
（b）針對 IE8 及以下：因為 IE8 無法用canvas.toDataURL() ，因此拍照後無法直接將圖片進行顯示。這時通過flash呼叫攝像頭，將得到的畫素點陣傳到後臺，讓後臺處理，生成影象的 base64 編碼，再在前端進行顯示。

/* CSS */
.borderstyle {
    border: 1px solid #b6b6b6;
    width: 320px;
    height: 240px;
}
#camera {
    float: left;
    margin:10px;
}
#canvas {
    width: 320px;
    height: 240px;
    margin:10px;
}

/* camera.js程式碼 */
$(function () {
    var w = 320, h = 240;
    var pos = 0,
        ctx = null,
        saveCB;

    var 
 canvas = document.getElementById("canvas")
    if (canvas.toDataURL) {
        ctx = canvas.getContext("2d");
        var image = ctx.getImageData(0, 0, w, h);

        saveCB = function (data) {
            var col = data.split(";");
            var img = image;

            for (var i = 0; i < 320; i++) {
                var tmp = parseInt(col[i]);
                img.data[pos + 0] = (tmp >> 16) & 0xff;
                img.data[pos + 1] = (tmp >> 8) & 0xff;
                img.data[pos + 2] = tmp & 0xff;
                img.data[pos + 3] = 0xff;
                pos += 4;
            }

            if (pos >= 4 * 320 * 240) {
                ctx.putImageData(img, 0, 0);
                var Imagedata = canvas.toDataURL().substring(22);  //上傳給後臺的圖片資料

                pos = 0;
            }
        };
    } else {
        var image = [];
        saveCB = function (data) {
            image.push(data);
            pos += 4 * 320;
            if (pos >= 4 * 320 * 240) {
                $.post(URL, {briStr: image.join(';')}, function (data) {
                    console.log(data);
                    //在頁面顯示base64圖片處理
                    pos = 0;
                    image = [];
                });
            }
        };
    }

    $("#camera").webcam({
        width: w,
        height: h,
        mode: "callback", 
        swffile: "plugins/jQuery-webcam-master/jscam.swf",
        onSave: saveCB,
        onCapture: function () {               //捕獲影象
            webcam.save();
        },
        debug: function (type, string) {       //控制檯資訊
            //console.log(type + ": " + string);
        },
        onLoad: function () {                   //flash 載入完畢執行
            //console.log('載入完畢！')
        }
    });

    $(".play").click(function () {
        webcam.capture();
    });

});

<!-- index.html -->
<body>
<div>
    <div id="camera" class="borderstyle"></div>
    <canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
    <div id="showImg"></div>
    <button class="play">拍照</button>
</div>
<script src="camera.js"></script>
</body>

JS呼叫本地攝像頭拍照（相容各大瀏覽器及IE8+）

解決方案

方案一

方案二

JS呼叫本地攝像頭拍照（相容各大瀏覽器及IE8+）

調用本地攝像頭拍照（H5和畫布）

js呼叫攝像頭拍照,js呼叫攝像頭線上拍照,js呼叫電腦攝像頭拍照

使用JS讀取本地文字檔案（相容各種瀏覽器）

利用html5呼叫本地攝像頭拍照上傳圖片

js回車事件相容各大瀏覽器

相容各大瀏覽器的js 陣列刪除元素方法方法

js的window.onscroll事件兼容各大瀏覽器

css3相容各大瀏覽器的漸變色

呼叫本地攝像頭進行拍照

H5實現呼叫本地攝像頭實現實時視訊以及拍照功能

在chrome中，呼叫本地攝像頭

PC網頁js呼叫本地應用程式

Html5呼叫本地攝像頭

js貪吃蛇小遊戲（相容ie8）DOM,BOM操作

Android呼叫相簿、相機（相容6.0、7.0、8.0）所需新增的許可權

HTML5呼叫手機攝像頭拍照

java呼叫本地攝像頭，實現人臉識別

js滾動條外掛（相容各個主流瀏覽器）

給某個元素的innerHTML賦值,並使得值中的js程式碼有效（相容多個瀏覽器）

JS呼叫本地攝像頭拍照（相容各大瀏覽器及IE8+）

解決方案

方案一

方案二

相關推薦