RTSP簡介：
Real Time Streaming Protocol或者RTSP（實時流媒體協議），是由Real network 和Netscape共同提出的如何有效地在IP網絡上傳輸流媒體數據的應用層協議。RTSP提供一種可擴展的框架，使能夠提供能控制的，按需傳輸實時數據，比如音頻和視頻文件。源數據可以包括現場數據的反饋和存貯的文件。rtsp對流媒體提供了諸如暫停，快進等控制，而它本身並不傳輸數據，rtsp作用相當於流媒體服務器的遠程控制。傳輸數據可以通過傳輸層的tcp，udp協議，rtsp也提供了基於rtp傳輸機制的一些有效的方法。
海康威視api官網：https://open.hikvision.com/
一、在官網找到“視頻web插件”最新版，下載程序包
二、解壓程序包
1.解壓文件夾中“\doc\視頻WEB插件V1.4.2開發指南.pdf”文檔，這就是視頻插件的開發文檔
2.開發文檔中顯示的解壓文件夾中各文件的功能作用
這里主要使用其中的視頻web插件和視頻預覽demo
3.必須安裝視頻web插件，海康威視rtsp需要該插件的支持
4.demo_window_simple_preview.html（官網給出的視頻預覽簡化demo）
重點：
包括jquery的話，開發還需要引入三個js文件的支持，引入的js也在程序包demo文件夾內
不需要請求接口獲取rtsp流，插件會通過cameraIndexCode（監控點編號）轉化為視頻
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>preview_demo</title> </head> <style> html, body { padding: 0; margin: 0; } .playWnd { margin: 30px 0 0 400px; width: 1000px; /*播放容器的寬和高設定*/ height: 600px; border: 1px solid red; } .operate { margin-top: 24px; } .operate::after { content: ''; display: block; clear: both; } .module { float: left; width: 340px; /*min-height: 320px;*/ margin-left: 16px; padding: 16px 8px; box-sizing: border-box; border: 1px solid #e5e5e5; } .module .item { margin-bottom: 4px; } .module input[type="text"] { box-sizing: border-box; display: inline-block; vertical-align: middle; margin-left: 0; width: 150px; min-height: 20px; } .module .btn { min-width: 80px; min-height: 24px; margin-top: 100px; margin-left: 80px; } </style> <body> <!--預覽界面--> <div id="operate" class="operate"> <div class="module"> <div class="item"><span class="label">監控點編號：</span><input id="cameraIndexCode" type="text" value=""></div> <div class="item" style="margin-top: 20px;margin-left: -20px;"> <button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn">預覽</button> <button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部預覽</button> </div> </div> </div> <!--視頻窗口展示--> <div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div> </body> <!--三個必要的js文件引入--> <script src="jquery-1.12.4.min.js"></script> <script src="jsencrypt.min.js"></script> <!-- 用於RSA加密 --> <script src="jsWebControl-1.0.0.min.js"></script> <!-- 用於前端與插件交互 --> <script type="text/javascript"> //頁面加載時創建播放實例初始化 $(window).load(function () { initPlugin(); }); //聲明公用變量 var initCount = 0; var pubKey = ''; // 創建播放實例 function initPlugin () { oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器id iServicePortStart: 15900, // 指定起止端口號，建議使用該值 iServicePortEnd: 15909, szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用於IE10使用ActiveX的clsid cbConnectSuccess: function () { // 創建WebControl實例成功 oWebControl.JS_StartService("window", { // WebControl實例創建成功后需要啟動服務 dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"寫死 }).then(function () { // 啟動插件服務成功 oWebControl.JS_SetWindowControlCallback({ // 設置消息回調 cbIntegrationCallBack: cbIntegrationCallBack }); oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () { //JS_CreateWnd創建視頻播放窗口，寬高可設定 init(); // 創建播放實例成功后初始化 }); }, function () { // 啟動插件服務失敗 }); }, cbConnectError: function () { // 創建WebControl實例失敗 oWebControl = null; $("#playWnd").html("插件未啟動，正在嘗試啟動，請稍候..."); WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未啟動時執行error函數，采用wakeup來啟動程序 initCount ++; if (initCount < 3) { setTimeout(function () { initPlugin(); }, 3000) } else { $("#playWnd").html("插件啟動失敗，請檢查插件是否安裝！"); } }, cbConnectClose: function (bNormalClose) { // 異常斷開：bNormalClose = false // JS_Disconnect正常斷開：bNormalClose = true console.log("cbConnectClose"); oWebControl = null; } }); } // 設置窗口控制回調 function setCallbacks() { oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: cbIntegrationCallBack }); } // 推送消息 function cbIntegrationCallBack(oData) { showCBInfo(JSON.stringify(oData.responseMsg)); } //初始化 function init() { getPubKey(function () { ////////////////////////////////// 請自行修改以下變量值 //////////////////////////////////// var appkey = "28730366"; //綜合安防管理平台提供的appkey，必填 var secret = setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //綜合安防管理平台提供的secret，必填 var ip = "10.19.132.75"; //綜合安防管理平台IP地址，必填 var playMode = 0; //初始播放模式：0-預覽，1-回放 var port = 443; //綜合安防管理平台端口，若啟用HTTPS協議，默認443 var snapDir = "D:\\SnapDir"; //抓圖存儲路徑 var videoDir = "D:\\VideoDir"; //緊急錄像或錄像剪輯存儲路徑 var layout = "1x1"; //playMode指定模式的布局 var enableHTTPS = 1; //是否啟用HTTPS協議與綜合安防管理平台交互，這里總是填1 var encryptedFields = 'secret'; //加密字段，默認加密領域為secret var showToolbar = 1; //是否顯示工具欄，0-不顯示，非0-顯示 var showSmart = 1; //是否顯示智能信息（如配置移動偵測后畫面上的線框），0-不顯示，非0-顯示 var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定義工具條按鈕 ////////////////////////////////// 請自行修改以上變量值 //////////////////////////////////// oWebControl.JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, //API網關提供的appkey secret: secret, //API網關提供的secret ip: ip, //API網關IP地址 playMode: playMode, //播放模式（決定顯示預覽還是回放界面） port: port, //端口 snapDir: snapDir, //抓圖存儲路徑 videoDir: videoDir, //緊急錄像或錄像剪輯存儲路徑 layout: layout, //布局 enableHTTPS: enableHTTPS, //是否啟用HTTPS協議 encryptedFields: encryptedFields, //加密字段 showToolbar: showToolbar, //是否顯示工具欄 showSmart: showSmart, //是否顯示智能信息 buttonIDs: buttonIDs //自定義工具條按鈕 }) }).then(function (oData) { oWebControl.JS_Resize(1000, 600); // 初始化后resize一次，規避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題 }); }); } //獲取公鑰 function getPubKey (callback) { oWebControl.JS_RequestInterface({ funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024 }) }).then(function (oData) { console.log(oData); if (oData.responseMsg.data) { pubKey = oData.responseMsg.data; callback() } }) } //RSA加密 function setEncrypt (value) { var encrypt = new JSEncrypt(); encrypt.setPublicKey(pubKey); return encrypt.encrypt(value); } // 監聽resize事件，使插件窗口尺寸跟隨DIV窗口變化 $(window).resize(function () { if (oWebControl != null) { oWebControl.JS_Resize(1000, 600); setWndCover(); } }); // 監聽滾動條scroll事件，使插件窗口跟隨瀏覽器滾動而移動 $(window).scroll(function () { if (oWebControl != null) { oWebControl.JS_Resize(1000, 600); setWndCover(); } }); // 設置窗口裁剪，當因滾動條滾動導致窗口需要被遮住的情況下需要JS_CuttingPartWindow部分窗口 function setWndCover() { var iWidth = $(window).width(); var iHeight = $(window).height(); var oDivRect = $("#playWnd").get(0).getBoundingClientRect(); var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0; var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0; var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0; var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0; iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft; iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop; iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight; iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom; oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1個像素點防止還原后邊界缺失一個像素條 if (iCoverLeft != 0) { oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600); } if (iCoverTop != 0) { oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一個像素條，防止出現剪掉一部分窗口后出現一個像素條 } if (iCoverRight != 0) { oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600); } if (iCoverBottom != 0) { oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom); } } //視頻預覽功能 $("#startPreview").click(function () { var cameraIndexCode = $("#cameraIndexCode").val(); //獲取輸入的監控點編號值，必填 var streamMode = 0; //主子碼流標識：0-主碼流，1-子碼流 var transMode = 1; //傳輸協議：0-UDP，1-TCP var gpuMode = 0; //是否啟用GPU硬解，0-不啟用，1-啟用 var wndId = -1; //播放窗口序號（在2x2以上布局下可指定播放窗口） cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify({ cameraIndexCode:cameraIndexCode, //監控點編號 streamMode: streamMode, //主子碼流標識 transMode: transMode, //傳輸協議 gpuMode: gpuMode, //是否開啟GPU硬解 wndId:wndId //可指定播放窗口 }) }) }); //停止全部預覽 $("#stopAllPreview").click(function () { oWebControl.JS_RequestInterface({ funcName: "stopAllPreview" }); }); // 標簽關閉 $(window).unload(function () { if (oWebControl != null){ oWebControl.JS_HideWnd(); // 先讓窗口隱藏，規避可能的插件窗口滯后於瀏覽器消失問題 oWebControl.JS_Disconnect().then(function(){ // 斷開與插件服務連接成功 }, function() { // 斷開與插件服務連接失敗 }); } }); </script> </html>
5.使用vue，改寫官網給出的視頻預覽簡化demo，剔除jquery
注意點：視頻不可超出屏幕，否則視頻中會出現白塊導致畫面顯示不完整
<template> <div id="playWnd" class="playWnd" ref="playWnd"></div> </template> <script> // 用於前端與插件交互 import * as jsWebControl from "@/util/jsWebControl-1.0.0.min"; // 用於RSA加密 import * as JsEncrypt from "@/util/jsencrypt.min"; export default { name: "preview", props: { cameraIndexCode: { type: String, default: () => "" }, }, watch: { cameraIndexCode: { handler(v, o) { if (v) { this.pre_viwe(v); } }, deep: true } }, data() { return { initCount: 0, pubKey: "", oWebControl: null, pre_width: 1550, // 播放器的寬度 pre_height: 900 // 播放器的高度 }; }, mounted() { this.$nextTick(() => { window.addEventListener("resize", this.listenResize); this.initPlugin(); }); }, methods: { listenResize() { let doc_width = this.$refs.playWnd; this.pre_width = doc_width.offsetWidth; this.pre_height = doc_width.offsetHeight; if (this.oWebControl != null) { this.oWebControl.JS_Resize(this.pre_width, this.pre_height); this.setWndCover(); } if (this.oWebControl != null) { this.oWebControl.JS_Resize(this.pre_width, this.pre_height); this.setWndCover(); } }, // 創建播放實例 initPlugin() { let this_ = this; let WebControl = jsWebControl.WebControl; this.oWebControl = new WebControl({ szPluginContainer: "playWnd", // 指定容器id iServicePortStart: 15900, // 指定起止端口號，建議使用該值 iServicePortEnd: 15909, szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用於IE10使用ActiveX的clsid cbConnectSuccess: () => { // 創建WebControl實例成功 this_.oWebControl ?.JS_StartService("window", { // WebControl實例創建成功后需要啟動服務 dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"寫死 }) .then( () => { // 啟動插件服務成功 this_.oWebControl.JS_SetWindowControlCallback({ // 設置消息回調 cbIntegrationCallBack: this_.cbIntegrationCallBack }); this_.oWebControl .JS_CreateWnd("playWnd", this_.pre_width, this_.pre_height) .then(() => { //JS_CreateWnd創建視頻播放窗口，寬高可設定 this_.init(); // 創建播放實例成功后初始化 }); }, () => { // 啟動插件服務失敗 } ); }, cbConnectError: () => { // 創建WebControl實例失敗 this_.oWebControl = null; console.log("插件未啟動，正在嘗試啟動，請稍候..."); WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未啟動時執行error函數，采用wakeup來啟動程序 this_.initCount++; if (initCount < 3) { setTimeout(() => { this_.initPlugin(); }, 3000); } else { console.log("插件啟動失敗，請檢查插件是否安裝！"); } }, cbConnectClose: bNormalClose => { // 異常斷開：bNormalClose = false // JS_Disconnect正常斷開：bNormalClose = true console.log("cbConnectClose"); this_.oWebControl = null; } }); }, // 設置窗口控制回調 setCallbacks() { this.oWebControl.JS_SetWindowControlCallback({ cbIntegrationCallBack: this.cbIntegrationCallBack }); }, // 推送消息 cbIntegrationCallBack(oData) { console.log(JSON.stringify(oData.responseMsg)); // this.showCBInfo() }, //初始化 init() { let this_ = this; this.getPubKey(() => { ////////////////////////////////// 請自行修改以下變量值 //////////////////////////////////// // AK 25907700 // SK F0Y4SPv1AVkEtaUq26Oa // 172.23.252.15 var appkey = "23...474"; //綜合安防管理平台提供的appkey，必填 var secret = this_.setEncrypt( "2NO7Dem....dqVCJQ0dS" ); //綜合安防管理平台提供的secret，必填 var ip = "17x.xx.xxx.15"; //綜合安防管理平台IP地址，必填 var playMode = 0; //初始播放模式：0-預覽，1-回放 var port = 443; //綜合安防管理平台端口，若啟用HTTPS協議，默認443 var snapDir = "D:\\SnapDir"; //抓圖存儲路徑 var videoDir = "D:\\VideoDir"; //緊急錄像或錄像剪輯存儲路徑 var layout = "1x1"; //playMode指定模式的布局 var enableHTTPS = 1; //是否啟用HTTPS協議與綜合安防管理平台交互，這里總是填1 var encryptedFields = "secret"; //加密字段，默認加密領域為secret var showToolbar = 0; //是否顯示工具欄，0-不顯示，非0-顯示 var showSmart = 0; //是否顯示智能信息（如配置移動偵測后畫面上的線框），0-不顯示，非0-顯示 var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定義工具條按鈕 ////////////////////////////////// 請自行修改以上變量值 //////////////////////////////////// this_.oWebControl .JS_RequestInterface({ funcName: "init", argument: JSON.stringify({ appkey: appkey, //API網關提供的appkey secret: secret, //API網關提供的secret ip: ip, //API網關IP地址 playMode: playMode, //播放模式（決定顯示預覽還是回放界面） port: port, //端口 snapDir: snapDir, //抓圖存儲路徑 videoDir: videoDir, //緊急錄像或錄像剪輯存儲路徑 layout: layout, //布局 enableHTTPS: enableHTTPS, //是否啟用HTTPS協議 encryptedFields: encryptedFields, //加密字段 showToolbar: showToolbar, //是否顯示工具欄 showSmart: showSmart, //是否顯示智能信息 buttonIDs: buttonIDs //自定義工具條按鈕 }) }) .then(oData => { // 初始化后resize一次，規避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題 this_.listenResize() this_.pre_viwe(this_.cameraIndexCode); }); }); }, //獲取公鑰 getPubKey(callback) { this.oWebControl .JS_RequestInterface({ funcName: "getRSAPubKey", argument: JSON.stringify({ keyLength: 1024 }) }) .then(oData => { if (oData.responseMsg.data) { this.pubKey = oData.responseMsg.data; callback(); } }); }, //RSA加密 setEncrypt(value) { let JSEncrypt = JsEncrypt.JSEncrypt; var encrypt = new JSEncrypt(); encrypt.setPublicKey(this.pubKey); return encrypt.encrypt(value); }, // 設置窗口裁剪，當因滾動條滾動導致窗口需要被遮住的情況下需要JS_CuttingPartWindow部分窗口 setWndCover() { var iWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var iHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var oDivRect = this.$refs.playWnd.getBoundingClientRect(); var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0; var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0; var iCoverRight = oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0; var iCoverBottom = oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0; iCoverLeft = iCoverLeft > 1000 ? 1000 : iCoverLeft; iCoverTop = iCoverTop > 600 ? 600 : iCoverTop; iCoverRight = iCoverRight > 1000 ? 1000 : iCoverRight; iCoverBottom = iCoverBottom > 600 ? 600 : iCoverBottom; this.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1個像素點防止還原后邊界缺失一個像素條 if (iCoverLeft != 0) { this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600); } if (iCoverTop != 0) { this.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一個像素條，防止出現剪掉一部分窗口后出現一個像素條 } if (iCoverRight != 0) { this.oWebControl.JS_CuttingPartWindow( 1000 - iCoverRight, 0, iCoverRight, 600 ); } if (iCoverBottom != 0) { this.oWebControl.JS_CuttingPartWindow( 0, 600 - iCoverBottom, 1000, iCoverBottom ); } }, //視頻預覽功能 pre_viwe(v) { var cameraIndexCode = v || "5308020.....10537517"; //獲取輸入的監控點編號值，必填 var streamMode = 0; //主子碼流標識：0-主碼流，1-子碼流 var transMode = 1; //傳輸協議：0-UDP，1-TCP var gpuMode = 0; //是否啟用GPU硬解，0-不啟用，1-啟用 var wndId = -1; //播放窗口序號（在2x2以上布局下可指定播放窗口） let obj = { cameraIndexCode: cameraIndexCode, //監控點編號 streamMode: streamMode, //主子碼流標識 transMode: transMode, //傳輸協議 gpuMode: gpuMode, //是否開啟GPU硬解 wndId: wndId, //可指定播放窗口 protocol: 'rtsp', expand: 'streamform=rtp', }; this.oWebControl.JS_RequestInterface({ funcName: "startPreview", argument: JSON.stringify(obj) }); }, }, destroyed() { window.removeEventListener("resize", this.listenResize); if (this.oWebControl != null) { this.oWebControl.JS_HideWnd(); // 先讓窗口隱藏，規避可能的插件窗口滯后於瀏覽器消失問題 this.oWebControl.JS_Disconnect().then( function () { // 斷開與插件服務連接成功 console.log("斷開成功"); }, function () { // 斷開與插件服務連接失敗 console.log("斷開失敗"); } ); } } }; </script> <style scoped lang="less"> .playWnd { width: 1550px !important; height: 900px !important; max-width: 100%; max-height: 90vh !important; img { width: 1550px !important; height: 900px !important; max-width: 100%; max-height: 90vh !important; } } </style>