網頁播放攝像頭視頻 一種新的實現方式（非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，開發攝像頭播放程序》

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