- <template>
- <div id="DHVideo">
- <div id="dhplayer-dom" class="playWnd" v-html="AllData.Getchajian === null ? desc : ''"></div>
- </div>
- </template>
-
- <script setup name="DHVideo">
- import { ref, reactive, toRefs, onMounted } from 'vue';
- import { listConfig } from '@/api/system/config';
- const { proxy } = getCurrentInstance();
-
- const props = defineProps({
- // 内网、公网 4个配置
- channelId: {
- type: String,
- default: () => '1000131$1$0$0',
- },
- });
-
- const desc = ref('插件启动中....');
- const AllData = reactive({
- Getchajian: null,
- URL: null,
- channelId: null,
- myVideoPlayer: null,
- pluginLoginInfo: {
- // 传入 icc 平台的登录信息
- host: '172.28.41.16', // icc 平台ip
- port: '443', // icc 平台端口 https 默认 443
- username: 'sfduijie', // icc 平台用户名
- password: 'sfduijie@123', // icc 平台密码
- },
- });
-
- // 监听视频编码的改变(单个视频编码)
- watch(
- () => props.channelId,
- val => {
- if (props.channelId) {
- console.log('初始化视频', props.channelId);
- AllData.channelId = props.channelId.trim();
- if (AllData.Getchajian) {
- startReal();
- } else {
- initDHPlayer();
- }
- }
- },
- { deep: true, immediate: true }
- );
-
- // 初始化并登录插件
- function initDHPlayer() {
- console.log('初始化视频');
- desc.value = '插件启动中....';
- AllData.myVideoPlayer = new VideoPlayer({
- videoId: 'dhplayer-dom', // 唯一标识,必填,不能重复
- windowType: 0, // 播放器类型,必传, 0 - 实时预览,3 - 录像回放,7- 录像回放(支持倒放)
- usePluginLogin: true, // 采用登录 (请默认传true,插件内部自动拉流)
- pluginLoginInfo: AllData.pluginLoginInfo,
- division: 1, // 默认展示的窗口数量, 必传
- draggable: false, // 窗口拖拽 【暂不支持】
- showBar: true, // 底部操作栏, 选传,【true - 显示, false - 隐藏】
- shieldClass: ['shield-class', 'select'], // 如果DOM元素被插件挡住了,把DOM元素的类名传入。
- coverShieldClass: [], // 如果插件要在dom内滚动,需要把DOM元素的类名传入,请查看案例-遮挡
- parentIframeShieldClass: [], // 有 iframe 时,top层 的 dom 元素被插件挡住了,把DOM元素的类名传入。
- // 下面均为回调函数,请按需使用,具体可在 API 内进行功能的体验和查看。
-
- // 创建播放器成功回调
- createSuccess: versionInfo => {
- // 该回调触发后,我们可以进行实时预览/录像回放等操作
- // desc.value = '创建成功!!!' + versionInfo.message;
- AllData.Getchajian = 1;
- startReal();
- },
- // 创建播放器失败回调
- createError: err => {
- // 有错误码,可打印查看错误信息
- // desc.value = '创建失败!!!' + JSON.stringify(err);
- AllData.Getchajian = null;
-
- GetchajianUrl();
- },
- // 插件公共回调
- dhPlayerMessage: (info, err) => {},
- // 实时预览成功回调
- realSuccess: info => {},
- // 实时预览失败回调
- realError: (info, err) => {},
- // 对讲成功回调
- talkSuccess: info => {},
- // 对讲失败回调
- talkError: (info, err) => {},
- // 录像播放成功回调
- playbackSuccess: info => {},
- // 录像播放失败回调
- playbackError: (info, err) => {},
- // 录像播放完成回调
- playbackFinish: info => {},
- // 抓图成功回调
- snapshotSuccess: ({ base64Url, path }, info) => {
- var byteCharacters = atob(base64Url.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
- var byteNumbers = new Array(byteCharacters.length);
- for (var i = 0; i < byteCharacters.length; i++) {
- byteNumbers[i] = byteCharacters.charCodeAt(i);
- }
- var byteArray = new Uint8Array(byteNumbers);
- var blob = new Blob([byteArray], {
- type: undefined,
- });
- var aLink = document.createElement('a');
- let time = proxy.moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
- aLink.download = `大华截图-${time}.jpg`; //这里写保存时的图片名称
- aLink.href = URL.createObjectURL(blob);
- aLink.click();
- },
- // 本地录像下载成功回调
- videoDownloadSuccess: (path, info) => {
- alert('本地录像地址:' + path);
- },
- // 关闭视频窗口回调
- closeWindowSuccess: ({ isAll, snum, channelList }) => {},
- // 鼠标单击窗口回调
- clickWindow: snum => {},
- // 鼠标双击窗口回调
- dbClickWindow: snum => {},
- // 播放器窗口的数量回调
- changeDivision: division => {},
- // rtsp 流下载录像成功回调
- downloadRecordSuccess: info => {},
- // rtsp 流下载录像失败回调
- downloadRecordError: (info, err) => {},
- });
- }
-
- /** document.getElementById("recordDownload").onclick = function () {
- if(document.querySelector('#player-type').value == '0') {
- return console.error("创建录像回放播放器, 才能录像下载")
- }
- let date = document.querySelector('#date').value;
- AllData.myVideoPlayer.downloadRecord({
- channelId: AllData.channelId,
- snum: 0,
- 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',
- records: [],
- startTime: date + ' 01:00:00', // 开始时间
- endTime: date +' 01:00:20', // 结束时间
- redirect: true
- }); // 下载录像
- } */
-
- // 实时预览
- function startReal() {
- AllData.myVideoPlayer.startReal([
- // 通道id规则说明: 1000131(设备编码) + $1$0$(拼接字符串(固定)) + 0(通道编码) <br />可在ICC平台设备管理页面查看到通道id
- {
- channelId: AllData.channelId, // 通道id 【必传】
- channelName: '通道名称', // 通道名称 (用于本地录像下载)
- snum: 0, // 即将要播放的窗口序号,从0开始 【必传】
- streamType: 1, // 1-主码流 2-辅码流 (可不传,默认主码流)
- deviceType: 5, // 设备类别 (插件对讲时,需要配置该参数,否则无法对讲)
- cameraType: '1', // 摄像头类型 (用于云台)
- capability: '00000000000000000000000000000001', // 能力集 (用于云台)
- },
- ]);
- }
-
- // 录像回放
- function startPlayback() {
- let date = document.querySelector('#date').value;
- console.log(date);
- AllData.myVideoPlayer.startPlayback([
- {
- channelId: AllData.channelId, // 道id
- channelName: '通道名称', // 通道名称 (用于本地录像下载和错误提示)
- startTime: date + ' 00:00:00', // 开始时间
- endTime: date + ' 23:59:59', // 结束时间
- recordSource: AllData.channelId || 3, // 2-录像 3-中心
- streamType: 0, // 0-所有码流 1-主码流 2-辅码流
- snum: 0, // 播放的窗口序号 (从0开始计数,表示第一个窗口)
- },
- ]);
- }
-
- // 控制插件的显示,两种方式均试用
- function showDHPlayer() {
- // 1.
- AllData.myVideoPlayer._update({
- visible: true,
- });
- // 2.
- // AllData.myVideoPlayer.show();
- }
-
- // 控制插件的隐藏,两种方式均试用
- function hideDHPlayer() {
- // 1.
- AllData.myVideoPlayer._update({
- visible: false,
- });
- // 2.
- // AllData.myVideoPlayer.hide();
- }
-
- // 根据接口获取插件的url
- function GetchajianUrl() {
- let paramas = {
- configKey: 'dahua_player_url',
- };
- listConfig(paramas).then(res => {
- AllData.URL = res.data[0].configValue;
-
- desc.value = `插件启动失败,请检查插件是否安装!
- <a href=${AllData.URL} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
- });
- }
-
- onMounted(() => {});
- onBeforeUnmount(() => {
- if (AllData.Getchajian) {
- hideDHPlayer();
- AllData.myVideoPlayer.destroy();
- }
- });
- </script>
-
- <style lang="scss" scoped>
- #DHVideo {
- width: 100%;
- height: 100%;
- .playWnd {
- width: 100%;
- height: 100%;
- }
- }
- </style>