程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#入門知識 >> 海康威視頻監控設備Web查看系統（三）：Web篇

海康威視頻監控設備Web查看系統（三）：Web篇

編輯：C#入門知識

聲明：本系列文章只提供交流與學習使用。文章中所有涉及到海康威視設備的SDK均可在海康威視官方網站下載得到。文章中所有除官方SDK以為的代碼均可隨意使用，任何涉及到海康威視公司利益的非正常使用由使用者自己負責，與本人無關。

前言：

《海康威視頻監控設備Web查看系統（一）：概要篇》

《海康威視頻監控設備Web查看系統（二）：服務器篇》

本文是本系列三篇文章中的最後一篇，在前兩篇文章中，介紹了開發海康監控的方案及中轉服務器的實現，本篇文章介紹Web端的功能實現，經過本篇文章中的項目開發，我們就實現了最初的項目需求。項目中需要海康官方播放器SDK，請各位根據項目需要下載相應版本。先來作者就帶著大家一步步來實現客戶端插件的開發。

播放器開發：

根據海康官方的SDK，我們要做的播放器其實只是將海康的播放庫引入到我們自己的項目中，然後接收來自中轉服務器的數據，最後播放顯示到客戶Web浏覽器上。其實整個就是一個引入了海康播放庫的ActiveX插件開發。下面按照開發流程一步步實現播放器插件開發。

關於C#開發ActiveX的詳細過程，園子裡有好多文章寫的非常詳細，我這裡不在累述，有不太了解的朋友，我這裡推薦一篇比較詳細的文章《ASP.NET C# 之 Activex用C#編寫ActiveX控件》。本篇文章寫播放器插件的核心功能。

首先來看SDK的C#調用的內容：

 1 public class PlayCtrlSDK
 2     {
 3         #region 解碼庫
 4         [DllImport("PlayCtrl.dll")]
 5         public static extern uint PlayM4_GetLastError(int nPort);
 6         [DllImport("PlayCtrl.dll")]
 7         public static extern int PlayM4_GetCaps();
 8         /// <summary>
 9         /// 獲取未使用的通道號
10         /// </summary>
11         /// <param name="nPort"></param>
12         /// <returns></returns>
13         [DllImport("PlayCtrl.dll")]
14         public static extern bool PlayM4_GetPort(ref int nPort);
15         /// <summary>
16         /// 設置流播放模式
17         /// </summary>
18         /// <param name="port"></param>
19         /// <param name="mode"></param>
20         /// <returns></returns>
21         [DllImport("PlayCtrl.dll")]
22         public static extern bool PlayM4_SetStreamOpenMode(int nPort, int mode);
23         /// <summary>
24         /// 打開流
25         /// </summary>
26         /// <param name="nPort"></param>
27         /// <param name="pFileHeadBuf"></param>
28         /// <param name="nSize"></param>
29         /// <param name="nBufPoolSize"></param>
30         /// <returns></returns>
31         [DllImport("PlayCtrl.dll")]
32         public static extern bool PlayM4_OpenStream(int nPort, byte[] pFileHeadBuf, UInt32 nSize, uint nBufPoolSize);
33         /// <summary>
34         /// 設置播放緩沖區最大緩沖幀數
35         /// </summary>
36         /// <param name="nPort"></param>
37         /// <param name="nNum"></param>
38         /// <returns></returns>
39         [DllImport("PlayCtrl.dll")]
40         public static extern bool PlayM4_SetDisplayBuf(int nPort, uint nBufPoolSize);
41         /// <summary>
42         /// 開啟播放
43         /// </summary>
44         /// <param name="nPort"></param>
45         /// <param name="hWnd"></param>
46         /// <returns></returns>
47         [DllImport("PlayCtrl.dll")]
48         public static extern bool PlayM4_Play(int nPort, IntPtr hWnd);
49         /// <summary>
50         /// 開始倒放
51         /// </summary>
52         /// <param name="nPort"></param>
53         /// <returns></returns>
54         [DllImport("PlayCtrl.dll")]
55         public static extern bool PlayM4_ReversePlay(int nPort);
56         /// <summary>
57         /// 輸入流數據
58         /// </summary>
59         /// <param name="nPort"></param>
60         /// <param name="pBuf"></param>
61         /// <param name="nSize"></param>
62         /// <returns></returns>
63         [DllImport("PlayCtrl.dll")]
64         public static extern bool PlayM4_InputData(int nPort, byte[] pBuf, uint nSize);
65         /// <summary>
66         /// 關閉播放
67         /// </summary>
68         /// <param name="nPort"></param>
69         /// <returns></returns>
70         [DllImport("PlayCtrl.dll")]
71         public static extern bool PlayM4_Stop(int nPort);
72         /// <summary>
73         /// 關閉流
74         /// </summary>
75         /// <param name="nPort"></param>
76         /// <returns></returns>
77         [DllImport("PlayCtrl.dll")]
78         public static extern bool PlayM4_CloseStream(int nPort);
79         /// <summary>
80         /// 釋放已使用的通道號
81         /// </summary>
82         /// <param name="nPort"></param>
83         /// <returns></returns>
84         [DllImport("PlayCtrl.dll")]
85         public static extern bool PlayM4_FreePort(int nPort);
86 
87         #endregion
88     }

根據SDK文檔內的說明，這幾個函數的調用順序如下：

[Guid("A4277AC0-7F3F-4950-9130-27025D6E18F8")] public partial class Player : UserControl, IObjectSafety { int prot = -1; static Socket socket; bool isPlayInit = false; IPEndPoint iep; Thread thread; #region Web頁面調用的接口 /// <summary> /// 釋放Socket連接和SDK播放庫資源 /// </summary> public void PageClose() { isPlayInit = false; if (thread != null && thread.IsAlive) { thread.Abort(); } if (socket != null && socket.Connected) { socket.Shutdown(SocketShutdown.Both); socket.Close(); socket = null; } if (prot != -1) { PlayCtrlSDK.PlayM4_CloseStream(prot); } } //插件初始化 public Player() { InitializeComponent(); } /// <summary> /// 初始化網絡連接 /// </summary> /// <param name="ip">中轉服務器IP</param> /// <param name="iPprot">中轉服務器端口</param> public void InitPlay(string ip, int iPprot) { PageClose(); iep = new IPEndPoint(IPAddress.Parse(ip), iPprot); socket = new Socket(iep.AddressFamily, SocketType.Stream, ProtocolType.Tcp); thread = new Thread((object o) => { socket.Connect(iep); byte[] bt = new byte[262144]; while (true) { int count = socket.Receive(bt); StreamType st = count == 40 ? StreamType.Head : StreamType.Body; setPlay(bt, (uint)count, st); Thread.Sleep(100); } }); thread.IsBackground = true; } /// <summary> /// 開始播放 /// </summary> /// <returns></returns> public bool ShowVideo() { thread.Start(); return true; } #endregion /// <summary> /// 調用SDK播放庫 /// </summary> /// <param name="buffer">從中轉服務器接收到的數據</param> /// <param name="size">中轉服務器發送的數據大小</param> /// <param name="type">數據類型</param> private void setPlay(byte[] buffer, uint size, StreamType type) { switch (type) { case StreamType.Head: if (size > 40) { return; } if (!PlayCtrlSDK.PlayM4_GetPort(ref prot)) { PageClose(); showError(PlayCtrlSDK.PlayM4_GetLastError(prot)); break; } if (!PlayCtrlSDK.PlayM4_SetStreamOpenMode(prot, 0)) { PageClose(); showError(PlayCtrlSDK.PlayM4_GetLastError(prot)); break; } if (!PlayCtrlSDK.PlayM4_OpenStream(prot, buffer, size, 1024 * 1024)) { PageClose(); showError(PlayCtrlSDK.PlayM4_GetLastError(prot)); break; } if (!PlayCtrlSDK.PlayM4_SetDisplayBuf(prot, 15)) { PageClose(); showError(PlayCtrlSDK.PlayM4_GetLastError(prot)); break; } this.Invoke(new MethodInvoker(delegate { //使用PictureBox控件句柄作為參數傳給播放器，播放器將其作為容器進行圖像渲染 if (!PlayCtrlSDK.PlayM4_Play(prot, this.pictureBox1.Handle)) { PageClose(); showError(PlayCtrlSDK.PlayM4_GetLastError(prot)); } })); isPlayInit = true; break; case StreamType.Body: if (isPlayInit && !PlayCtrlSDK.PlayM4_InputData(prot, buffer, size)) { PageClose(); showError(PlayCtrlSDK.PlayM4_GetLastError(prot)); } break; } } /// <summary> /// 錯誤提示 /// </summary> /// <param name="p"></param> private void showError(uint p) { MessageBox.Show(p.ToString()); } #region IObjectSafety接口方法 public void GetInterfacceSafyOptions(int riid, out int pdwSupportedOptions, out int pdwEnabledOptions) { pdwEnabledOptions = 2; pdwSupportedOptions = 1; } public void SetInterfaceSafetyOptions(int riid, int dwOptionsSetMask, int dwEnabledOptions) { } #endregion enum StreamType { Head, Body } }

如上文所提到的，PlayCtrlSDK.PlayM4_OpenStream(int nPort, byte[] pFileHeadBuf, UInt32 nSize, uint nBufPoolSize);方法必須以中轉服務器發送的長度為40個字節的數據作為形參pFileHeadBuf的實參傳入，否則播放器無法正常工作。另外，InitPlay(string ip, int iPprot)用JS直接調用，講實參傳入即可，利於中轉服務調整和擴展。

到這裡，Web浏覽器插件的內容介紹完了。最後直接貼出Web網站的內容給大家，相信一看就明白，真的不用不用說什麼了吧。。。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>視頻播放</title>
  5     <style type="text/css">
  6         *
  7         {
  8             padding: 0;
  9             margin: 0;
 10         }
 11         body
 12         {
 13             background: #000;
 14         }
 15         a
 16         {
 17             display: block;
 18             text-decoration: none;
 19             line-height: 40px;
 20             color: #fff;
 21             width: 293px;
 22             height: 40px;
 23             text-align: center;
 24             background: #333;
 25         }
 26         a:hover
 27         {
 28             color: #000;
 29             background: #eee;
 30         }
 31     </style>
 32     <script type="text/javascript" language="javascript">
 33         var channel = 1;
 34         window.onbeforeunload = function () {
 35             player.PageClose();
 36             var result = getServer("unload");
 37         };
 38 
 39         function getServer(operate) {
 40             var xmlhttp;
 41             if (window.XMLHttpRequest) {
 42                 xmlhttp = new XMLHttpRequest();
 43             }
 44             else {
 45                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 46             }
 47             //說明：
 48             //******這裡的方法是為取得視頻中轉服務器的IP以及端口***************
 49             xmlhttp.open("GET", "ServerHandler.ashx?channel=" + channel + "&operate=" + operate, false);
 50 
 51             xmlhttp.send();
 52             return xmlhttp.responseText;
 53         }
 54 
 55         function Show(ch) {
 56             getServer("unload");
 57             var ctrls = document.getElementsByTagName("a");
 58             for (var i = 0; i < ctrls.length; i++) {
 59                 ctrls[i].disabled = "";
 60             }
 61             channel = ch;
 62             var host = getServer("load").split(':');
 63             document.getElementById("errorDiv").innerHTML = "IP:" + host[0] + "   Port:" + host[1] + " Count:" + host[2];
 64             player.PageClose();
 65             player.InitPlay(host[0], host[1]);
 66             var result = player.ShowVideo();
 67             document.getElementById("but" + channel).disabled = result;
 68         }
 69 
 70         function refreshSession() {
 71             getServer("refresh");
 72         }
 73 
 74         setInterval("refreshSession()", 3000);
 75     </script>
 76 </head>
 77 <body>
 78     <table width="600" align="center">
 79         <tr>
 80             <td colspan="2" align="center">
 81                 <object id="player" classid="clsid:A4277AC0-7F3F-4950-9130-27025D6E18F8" width="600"
 82                     height="400" codebase="Setup.exe">
 83                 </object>
 84             </td>
 85         </tr>
 86         <tr>
 87             <td height="40" width="300" align="center">
 88                 <a href="#" onclick="Show(1)" id="but1">視頻1</a>
 89             </td>
 90             <td width="300" align="center">
 91                 <a href="#" onclick="Show(2)" id="but2">視頻2</a>
 92             </td>
 93         </tr>
 94         <tr>
 95             <td colspan="2">
 96                 <div id="errorDiv">
 97                 </div>
 98             </td>
 99         </tr>
100     </table>
101     <script language="javascript">
102         Show(1);
103     </script>
104 </body>
105 </html>

至此，關於海康威視視頻中轉系統的所有內容都已經介紹完了，希望本人的文章能給您帶來一點幫助。如果您還有任何問題，非常歡迎發送郵件到maidi-mao@163.com進行交流。

另外也非常歡迎大家加入QQ群：107943411來交流學習。