Newer
Older
KaiFengPC / src / views / dataAnalysis / syntheticData / equipVideo.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <!-- 站点- 查看视频监控 -->
  3. <div class="equipVideo flex">
  4. <div class="contLeft-nopx">
  5. <p><span>运维单位</span><span class="title">武汉新烽光电</span></p>
  6. <p><span>责任人</span><span class="title">朱方仁</span></p>
  7. <p><span>安装位置</span><span class="title">汤逊湖1号排口</span></p>
  8. <p><span>摄像头类型</span><span class="title">球机</span></p>
  9. <p><span>安装时间</span><span class="title">2019-09-10</span></p>
  10. <p><span>视频状态</span><span class="title">在线</span></p>
  11. </div>
  12. <div id="videoEquip" style="height: 260px"></div>
  13. </div>
  14. </template>
  15. <script setup>
  16. import {} from '@/api/dataAnalysis/syntherticData';
  17.  
  18. // 海康视频
  19. const showVideos = ref({
  20. cameraIndexCode: '8df2bf406a4a4eadad1d9e94ff7206ff', // 监控点编号
  21. streamMode: 0, // 主子码流标识:0-主码流,1-子码流
  22. transMode: 1, // 传输协议:0-UDP,1-TCP
  23. gpuMode: 0, // 是否启用GPU硬解,0-不启用,1-启用
  24. wndId: 1, // 播放窗口序号
  25. });
  26. const videoWidth = ref(200);
  27. const videoHeight = ref(260);
  28. const Count = ref(0);
  29. const plugKey = ref('');
  30.  
  31. /* 创建插件实例 */
  32. function initPlugin() {
  33. const dll = { dllPath: './VideoPluginConnect.dll' };
  34. window.videoWebControl = new WebControl({
  35. szPluginContainer: 'videoEquip', // 指定容器id
  36. iServicePortStart: 15900,
  37. iServicePortEnd: 15909,
  38. szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
  39.  
  40. cbConnectSuccess: () => {
  41. window.videoWebControl.JS_StartService('window', dll).then(() => {
  42. // 设置视频 web 插件消息回调
  43. window.videoWebControl.JS_SetWindowControlCallback({
  44. // cbIntegrationCallBack: msg => { }
  45. });
  46. // 启动插件服务成功
  47. window.videoWebControl.JS_CreateWnd('videoEquip', videoWidth.value, videoHeight.value).then(() => {
  48. // JS_CreateWnd创建视频播放窗口,宽高可设定
  49. initVideo(window.videoWebControl); // 创建播放实例成功后初始化
  50. console.log('启动插件成功!');
  51. });
  52. });
  53. },
  54. // 插件服务启动失败,弹框提示
  55. cbConnectError: () => {
  56. window.videoWebControl = null;
  57. Count.value++;
  58. if (Count.value < 2) {
  59. WebControl.JS_WakeUp('VideoWebPlugin://');
  60. setTimeout(() => {
  61. initPlugin();
  62. }, 8000);
  63. } else {
  64. }
  65. console.log('创建插件失败');
  66. },
  67. });
  68. }
  69. /* 获取公钥 */
  70. function initVideo(videoWebControl) {
  71. const params = {
  72. funcName: 'getRSAPubKey',
  73. argument: JSON.stringify({ keyLength: 1024 }),
  74. };
  75.  
  76. videoWebControl.JS_RequestInterface(params).then(res => {
  77. if (res.responseMsg.data) {
  78. plugKey.value = res.responseMsg.data;
  79. getVideoConfig(videoWebControl);
  80. }
  81. });
  82. }
  83. /* 视频插件配置 插件初始化 */
  84. function getVideoConfig(videoWebControl) {
  85. const configObj = {
  86. funcName: 'init',
  87. argument: JSON.stringify({
  88. appkey: '22920329', // API网关提供的appkey
  89. secret: setEncrypt('ryhnhHNWRoXqGYVjsKf9'), // API网关提供的secret
  90. ip: '183.64.91.250', // API网关IP地址z
  91. playMode: 0, // 播放模式 0-预览,1-回放
  92. port: 8443, // 端口
  93. snapDir: 'D:\\SnapDir', // 抓图存储路径
  94. videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
  95. layout: '1x1', // 布局
  96. enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
  97. encryptedFields: 'secret', // 加密字段
  98. showToolbar: 1, // 是否显示工具栏
  99. showSmart: 1, // 是否显示智能信息
  100. buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
  101. }),
  102. };
  103. videoWebControl.JS_RequestInterface(configObj).then(() => {
  104. videoWebControl.JS_Resize(videoWidth.value, videoHeight.value);
  105. getClickAction();
  106. });
  107. }
  108. /* 视频流RSA加密 */
  109. function setEncrypt(value) {
  110. const encrypt = new JSEncrypt();
  111. encrypt.setPublicKey(plugKey.value);
  112. return encrypt.encrypt(value);
  113. }
  114. /* 视频预览 */
  115. function getClickAction() {
  116. console.log(showVideos.value, 'showVideos');
  117. window.videoWebControl.JS_RequestInterface({
  118. funcName: 'startPreview',
  119. argument: JSON.stringify(showVideos.value),
  120. });
  121. }
  122. function windowResize() {
  123. let div = document.getElementById('videoEquip');
  124. videoWidth.value = div.offsetWidth; // 返回元素的总宽度
  125. videoHeight.value = div.offsetHeight; // 返回元素的总高度
  126. if (window.videoWebControl) {
  127. window.videoWebControl.JS_Resize(videoWidth.value, videoHeight.value);
  128. }
  129. }
  130.  
  131. onMounted(() => {
  132. videoWidth.value = document.getElementById('videoEquip').offsetWidth;
  133. if (window.videoWebControl == null) {
  134. setTimeout(() => {
  135. initPlugin();
  136. }, 500);
  137. } else {
  138. window.videoWebControl.JS_ShowWnd();
  139. }
  140. window.onresize = () => {
  141. videoWidth.value = document.getElementById('videoEquip').offsetWidth;
  142. console.log(document.getElementById('videoEquip').offsetWidth);
  143. windowResize();
  144. };
  145. });
  146. onBeforeUnmount(() => {
  147. if (window.videoWebControl != null) {
  148. window.videoWebControl.JS_HideWnd();
  149. window.videoWebControl.JS_DestroyWnd();
  150. window.videoWebControl = null;
  151. }
  152. });
  153. </script>
  154. <style lang="scss">
  155. .equipVideo {
  156. width: 100%;
  157. .contLeft-nopx {
  158. background: #f9fbff;
  159. padding: 10px;
  160. height: 260px;
  161. width: 200px;
  162. margin-right: 10px;
  163. p {
  164. display: flex;
  165. justify-content: space-between;
  166. .title {
  167. font-weight: bold;
  168. }
  169. }
  170. }
  171. #videoEquip {
  172. flex: 1;
  173. border: 1px solid red;
  174. .wc-grab-open-image {
  175. display: none;
  176. }
  177. }
  178. }
  179. </style>