網頁播放攝像頭視頻 一種新的實現方式（非ocx方式）

前言 出於安全性考慮，瀏覽器對網頁調用本地資源做了諸多限制。單純的js是不能調用本地攝像頭的，最常用的解決方案是通過ocx來實現。ocx是IE瀏覽器的擴展插件，並不是通用標准，很多瀏覽器並不支持ocx。有沒有別的方案實現視頻播放？作者另辟蹊徑，通過非常規手段實現了攝像頭視頻捕做；這種方案采用標准js代碼實現，可以適應任何瀏覽器。

 （一） 實現效果

 

　　圖的左邊是網頁顯示的視頻，右端是本地app顯示的視頻。看到此圖，你也許猜到實現方案的一點端倪。網頁視頻也是借助本地程序之力實現的；常規的實現方案是借助ocx。本文實現方案相比於ocx方案有如下優點：

1. 適應任何瀏覽器。ocx主要適應IE瀏覽器。
2. ocx與網頁在同一個進程。如果ocx不穩定，容易造成瀏覽器崩潰。
3. 網頁打開關閉也會造成ocx生成和卸載，性能受影響。

（二）實現方案示意圖

 

　　網頁通過ajax從應用程序獲取視頻數據； 應用程序實現了http服務，並將視頻數據通過http協議發送到網頁。下文逐步講解每一步處理過程。

（三）網頁播放視頻流

　　視頻本質上是圖片的連續播放。首先要解決的問題是：ajax獲取了圖像數據，能實時更新顯示。html顯示圖像可用如下方式：

<img id="idImg" src="data:image/jpg;base64,/9j/4AAQS...(base64表示的圖像數據)">

 src對應的數據可用通過ajax，從http服務器獲取。設置定時器，不斷的從服務器獲取圖像信息，不斷的更新img標簽的src數據。這就實現了視頻播放。

ajax調用代碼如下：

  function GetImgFromCarmera() {
            var setValue = {
                'GetImg': "Base64"
            };
            var json_setValue = JSON.stringify(setValue);

            $.ajax({
                type: "Post",
                url: "http://127.0.0.1:18168/Invent/Web/SetAppParam",
                data: json_setValue,
                async: true,
                success: function (result) {

                    var jsonObj = JSON.parse(result);
                    var img = document.getElementById("idImg");
                    img.src = jsonObj.Img;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(textStatus + ":" + errorThrown);
                }
            });
        }

從服務器獲取的數據就是base64格式的圖像數據，直接賦值就能顯示圖像。網頁端的調用是很簡單。關鍵是在本地實現http服務。

（四）本地app實現http服務

　　c#實現http服務並不困難，有封裝非常好的類庫。由於調用並不頻繁，所以對http服務器的性能要求不高。采用最方便的實現方式即可。如果需要非常高效http服務，可以參考我的文章《自己動手，開發輕量級，高性能http服務器》。本文不對如何實現http服務器再做敘述。

（五）實現攝像頭視頻捕做

    opencv對攝像頭調用提供了很好的封裝。具體調用方法見文章《基於opencv，開發攝像頭播放程序》

后記 本文提供了網頁操作本地資源的一種新思路；該解決方案不僅僅可以適應於攝像頭播放。本地應用程序可以實現的操作，網頁都可以實現；網頁用過本地應用借力打力，無所不能。采用此方案不用再擔心瀏覽器兼容問題了，開發人員終於可以睡個好覺了。