海康威視監控 Web 檢視系統 (三)：Web 端 ActiveX 播放器開發與整合

系列回顧

• (一) 概要：需求、限制 (6 連線上限)、方案架構 (中轉伺服器 + Web ActiveX)。
• (二) 伺服器端：Socket 服務、SDK 解碼、多客戶端分發。
• (三) Web 端 (本文)：C# ActiveX 播放器、網頁整合、JS 控制介面。

ActiveX 播放器核心開發步驟

1. 建立 C# 類別庫 專案。
2. 引入海康 SDK：PlayCtrl.dll、HCNetSDK.dll 等非受控 DLL。
3. 新增 WinForms UserControl 作為播放容器 (內含 PictureBox)。
4. 實作 IObjectSafety 介面讓 IE 信任載入。
5. 建立 Setup 部署專案 產出 .cab 或 .msi。
6. 數位簽名 (Authenticode) 避免瀏覽器攔截。
7. 發布至 Web 站台，透過 <object codebase="Setup.exe"> 自動下載安裝。

SDK 關鍵 API 序列 (PlayCtrl.dll)

PlayM4_GetPort(ref nPort)           // 取得空閒播放通道
PlayM4_SetStreamOpenMode(nPort, 0)  // 設定串流模式
PlayM4_OpenStream(nPort, headBuf, 40, 1024*1024) // 開啟串流 (頭部 40 bytes 關鍵)
PlayM4_SetDisplayBuf(nPort, 15)     // 設定顯示緩衝幀數
PlayM4_Play(nPort, pictureBox.Handle) // 開始渲染
PlayM4_InputData(nPort, buf, len)   // 送入視訊資料
PlayM4_Stop / CloseStream / FreePort // 停止釋放

播放器 UserControl 核心代碼

[Guid("A4277AC0-7F3F-4950-9130-27025D6E18F8")]
public partial class Player : UserControl, IObjectSafety
{
    int _port = -1;
    Socket _socket;
    Thread _recvThread;
    bool _isPlaying;

    // JS 呼叫：初始化連線
    public void InitPlay(string ip, int port)
    {
        CloseAll();
        var ep = new IPEndPoint(IPAddress.Parse(ip), port);
        _socket = new Socket(ep.AddressFamily, SocketType.Stream, ProtocolType.Tcp);
        _recvThread = new Thread(() => {
            _socket.Connect(ep);
            byte[] buf = new byte[262144];
            while (true)
            {
                int len = _socket.Receive(buf);
                var type = len == 40 ? StreamType.Head : StreamType.Body;
                ProcessData(buf, (uint)len, type);
                Thread.Sleep(100);
            }
        }) { IsBackground = true };
    }

    // JS 呼叫：開始播放
    public bool ShowVideo() { _recvThread.Start(); return true; }

    // 頁面關閉時釋放
    public void PageClose() { /* 關閉 Socket、SDK 資源 */ }

    private void ProcessData(byte[] buf, uint len, StreamType type)
    {
        if (type == StreamType.Head)
        {
            // 頭部 40 bytes 初始化 SDK
            PlayM4_GetPort(ref _port);
            PlayM4_SetStreamOpenMode(_port, 0);
            PlayM4_OpenStream(_port, buf, len, 1024*1024);
            PlayM4_SetDisplayBuf(_port, 15);
            this.Invoke(() => PlayM4_Play(_port, pictureBox1.Handle));
            _isPlaying = true;
        }
        else if (_isPlaying)
        {
            PlayM4_InputData(_port, buf, len);
        }
    }

    // IObjectSafety 實作...
    enum StreamType { Head, Body }
}

網頁整合 (HTML + JavaScript)

<object id="player" classid="clsid:A4277AC0-7F3F-4950-9130-27025D6E18F8" 
        width="600" height="400" codebase="Setup.exe"></object>

<script>
var channel = 1;
window.onbeforeunload = function() { player.PageClose(); getServer("unload"); };

function getServer(op) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "ServerHandler.ashx?channel=" + channel + "&operate=" + op, false);
    xhr.send();
    return xhr.responseText; // 回傳 "IP:Port:Count"
}

function Show(ch) {
    getServer("unload"); // 釋放前一通道
    channel = ch;
    var info = getServer("load").split(':'); // 取得中轉伺服器 IP:Port
    player.PageClose();
    player.InitPlay(info[0], parseInt(info[1]));
    player.ShowVideo();
    document.getElementById("but"+ch).disabled = true;
}

// 定時心跳保持 Session
setInterval(function() { getServer("refresh"); }, 3000);
</script>

<a href="#" onclick="Show(1)" id="but1">視頻 1</a>
<a href="#" onclick="Show(2)" id="but2">視頻 2</a>

關鍵技術點總結

• Head 40 bytes 必須先送入 OpenStream，否則解碼器無法初始化。
• Socket 接收迴圈獨立執行緒，避免阻塞 UI；Invoke 回 UI 執行緒呼叫 SDK 渲染。
• JS 控制流程：切換通道 → 釋放舊連線 → 向 ServerHandler 申請新 IP/Port → InitPlay → ShowVideo。
• 部署：codebase="Setup.exe" 讓 IE 自動下載安裝 ActiveX；需簽名並加入信任站台。

系統完成

至此三篇系列完整實現：中轉伺服器突破 6 連線限制，Web ActiveX 播放器提供無縫瀏覽體驗，JS 控制介面支援多通道切換與心跳保活。