Newer
Older
DH_Apicture / src / components / videoDHone / index.vue
@ZZJ ZZJ 19 days ago 7 KB update
  1. <template>
  2. <div id="DHVideo">
  3. <div id="dhplayer-dom" class="playWnd" v-html="AllData.Getchajian === null ? desc : ''"></div>
  4. </div>
  5. </template>
  6.  
  7. <script setup name="DHVideo">
  8. import { ref, reactive, toRefs, onMounted } from 'vue';
  9. import { listConfig } from '@/api/system/config';
  10. const { proxy } = getCurrentInstance();
  11.  
  12. const props = defineProps({
  13. // 内网、公网 4个配置
  14. channelId: {
  15. type: String,
  16. default: () => '1000131$1$0$0',
  17. },
  18. });
  19.  
  20. const desc = ref('插件启动中....');
  21. const AllData = reactive({
  22. Getchajian: null,
  23. URL: null,
  24. channelId: null,
  25. myVideoPlayer: null,
  26. pluginLoginInfo: {
  27. // 传入 icc 平台的登录信息
  28. host: '172.28.41.16', // icc 平台ip
  29. port: '443', // icc 平台端口 https 默认 443
  30. username: 'sfduijie', // icc 平台用户名
  31. password: 'sfduijie@123', // icc 平台密码
  32. },
  33. });
  34.  
  35. // 监听视频编码的改变(单个视频编码)
  36. watch(
  37. () => props.channelId,
  38. val => {
  39. if (props.channelId) {
  40. console.log('初始化视频', props.channelId);
  41. AllData.channelId = props.channelId.trim();
  42. if (AllData.Getchajian) {
  43. startReal();
  44. } else {
  45. initDHPlayer();
  46. }
  47. }
  48. },
  49. { deep: true, immediate: true }
  50. );
  51.  
  52. // 初始化并登录插件
  53. function initDHPlayer() {
  54. console.log('初始化视频');
  55. desc.value = '插件启动中....';
  56. AllData.myVideoPlayer = new VideoPlayer({
  57. videoId: 'dhplayer-dom', // 唯一标识,必填,不能重复
  58. windowType: 0, // 播放器类型,必传, 0 - 实时预览,3 - 录像回放,7- 录像回放(支持倒放)
  59. usePluginLogin: true, // 采用登录 (请默认传true,插件内部自动拉流)
  60. pluginLoginInfo: AllData.pluginLoginInfo,
  61. division: 1, // 默认展示的窗口数量, 必传
  62. draggable: false, // 窗口拖拽 【暂不支持】
  63. showBar: true, // 底部操作栏, 选传,【true - 显示, false - 隐藏】
  64. shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了,把DOM元素的类名传入。
  65. coverShieldClass: [], // 如果插件要在dom内滚动,需要把DOM元素的类名传入,请查看案例-遮挡
  66. parentIframeShieldClass: [], // 有 iframe 时,top层 的 dom 元素被插件挡住了,把DOM元素的类名传入。
  67. // 下面均为回调函数,请按需使用,具体可在 API 内进行功能的体验和查看。
  68.  
  69. // 创建播放器成功回调
  70. createSuccess: versionInfo => {
  71. // 该回调触发后,我们可以进行实时预览/录像回放等操作
  72. // desc.value = '创建成功!!!' + versionInfo.message;
  73. AllData.Getchajian = 1;
  74. startReal();
  75. },
  76. // 创建播放器失败回调
  77. createError: err => {
  78. // 有错误码,可打印查看错误信息
  79. // desc.value = '创建失败!!!' + JSON.stringify(err);
  80. AllData.Getchajian = null;
  81.  
  82. GetchajianUrl();
  83. },
  84. // 插件公共回调
  85. dhPlayerMessage: (info, err) => {},
  86. // 实时预览成功回调
  87. realSuccess: info => {},
  88. // 实时预览失败回调
  89. realError: (info, err) => {},
  90. // 对讲成功回调
  91. talkSuccess: info => {},
  92. // 对讲失败回调
  93. talkError: (info, err) => {},
  94. // 录像播放成功回调
  95. playbackSuccess: info => {},
  96. // 录像播放失败回调
  97. playbackError: (info, err) => {},
  98. // 录像播放完成回调
  99. playbackFinish: info => {},
  100. // 抓图成功回调
  101. snapshotSuccess: ({ base64Url, path }, info) => {
  102. var byteCharacters = atob(base64Url.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
  103. var byteNumbers = new Array(byteCharacters.length);
  104. for (var i = 0; i < byteCharacters.length; i++) {
  105. byteNumbers[i] = byteCharacters.charCodeAt(i);
  106. }
  107. var byteArray = new Uint8Array(byteNumbers);
  108. var blob = new Blob([byteArray], {
  109. type: undefined,
  110. });
  111. var aLink = document.createElement('a');
  112. let time = proxy.moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
  113. aLink.download = `大华截图-${time}.jpg`; //这里写保存时的图片名称
  114. aLink.href = URL.createObjectURL(blob);
  115. aLink.click();
  116. },
  117. // 本地录像下载成功回调
  118. videoDownloadSuccess: (path, info) => {
  119. alert('本地录像地址:' + path);
  120. },
  121. // 关闭视频窗口回调
  122. closeWindowSuccess: ({ isAll, snum, channelList }) => {},
  123. // 鼠标单击窗口回调
  124. clickWindow: snum => {},
  125. // 鼠标双击窗口回调
  126. dbClickWindow: snum => {},
  127. // 播放器窗口的数量回调
  128. changeDivision: division => {},
  129. // rtsp 流下载录像成功回调
  130. downloadRecordSuccess: info => {},
  131. // rtsp 流下载录像失败回调
  132. downloadRecordError: (info, err) => {},
  133. });
  134. }
  135.  
  136. /** document.getElementById("recordDownload").onclick = function () {
  137. if(document.querySelector('#player-type').value == '0') {
  138. return console.error("创建录像回放播放器, 才能录像下载")
  139. }
  140. let date = document.querySelector('#date').value;
  141. AllData.myVideoPlayer.downloadRecord({
  142. channelId: AllData.channelId,
  143. snum: 0,
  144. url: 'rtsp://10.56.10.35:9090/dss/playback/param?cameraid=1000025%240&substream=1&trackID=701&type=3&recordType=2&begintime=1703610000&endtime=1703630000',
  145. records: [],
  146. startTime: date + ' 01:00:00', // 开始时间
  147. endTime: date +' 01:00:20', // 结束时间
  148. redirect: true
  149. }); // 下载录像
  150. } */
  151.  
  152. // 实时预览
  153. function startReal() {
  154. AllData.myVideoPlayer.startReal([
  155. // 通道id规则说明: 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
  156. {
  157. channelId: AllData.channelId, // 通道id 【必传】
  158. channelName: '通道名称', // 通道名称 (用于本地录像下载)
  159. snum: 0, // 即将要播放的窗口序号,从0开始 【必传】
  160. streamType: 1, // 1-主码流 2-辅码流 (可不传,默认主码流)
  161. deviceType: 5, // 设备类别 (插件对讲时,需要配置该参数,否则无法对讲)
  162. cameraType: '1', // 摄像头类型 (用于云台)
  163. capability: '00000000000000000000000000000001', // 能力集 (用于云台)
  164. },
  165. ]);
  166. }
  167.  
  168. // 录像回放
  169. function startPlayback() {
  170. let date = document.querySelector('#date').value;
  171. console.log(date);
  172. AllData.myVideoPlayer.startPlayback([
  173. {
  174. channelId: AllData.channelId, // 道id
  175. channelName: '通道名称', // 通道名称 (用于本地录像下载和错误提示)
  176. startTime: date + ' 00:00:00', // 开始时间
  177. endTime: date + ' 23:59:59', // 结束时间
  178. recordSource: AllData.channelId || 3, // 2-录像 3-中心
  179. streamType: 0, // 0-所有码流 1-主码流 2-辅码流
  180. snum: 0, // 播放的窗口序号 (从0开始计数,表示第一个窗口)
  181. },
  182. ]);
  183. }
  184.  
  185. // 控制插件的显示,两种方式均试用
  186. function showDHPlayer() {
  187. // 1.
  188. AllData.myVideoPlayer._update({
  189. visible: true,
  190. });
  191. // 2.
  192. // AllData.myVideoPlayer.show();
  193. }
  194.  
  195. // 控制插件的隐藏,两种方式均试用
  196. function hideDHPlayer() {
  197. // 1.
  198. AllData.myVideoPlayer._update({
  199. visible: false,
  200. });
  201. // 2.
  202. // AllData.myVideoPlayer.hide();
  203. }
  204.  
  205. // 根据接口获取插件的url
  206. function GetchajianUrl() {
  207. let paramas = {
  208. configKey: 'dahua_player_url',
  209. };
  210. listConfig(paramas).then(res => {
  211. AllData.URL = res.data[0].configValue;
  212.  
  213. desc.value = `插件启动失败,请检查插件是否安装!
  214. <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
  215. });
  216. }
  217.  
  218. onMounted(() => {});
  219. onBeforeUnmount(() => {
  220. if (AllData.Getchajian) {
  221. hideDHPlayer();
  222. AllData.myVideoPlayer.destroy();
  223. }
  224. });
  225. </script>
  226.  
  227. <style lang="scss" scoped>
  228. #DHVideo {
  229. width: 100%;
  230. height: 100%;
  231. .playWnd {
  232. width: 100%;
  233. height: 100%;
  234. }
  235. }
  236. </style>