- <template>
- <!-- 站点- 查看视频监控 -->
- <div class="equipVideo flex">
- <div class="contLeft-nopx">
- <p><span>运维单位</span><span class="title">武汉新烽光电</span></p>
- <p><span>责任人</span><span class="title">朱方仁</span></p>
- <p><span>安装位置</span><span class="title">汤逊湖1号排口</span></p>
- <p><span>摄像头类型</span><span class="title">球机</span></p>
- <p><span>安装时间</span><span class="title">2019-09-10</span></p>
- <p><span>视频状态</span><span class="title">在线</span></p>
- </div>
- <div id="videoEquip" style="height: 260px"></div>
- </div>
- </template>
- <script setup>
- import {} from '@/api/dataAnalysis/syntherticData';
-
- // 海康视频
- const showVideos = ref({
- cameraIndexCode: '8df2bf406a4a4eadad1d9e94ff7206ff', // 监控点编号
- streamMode: 0, // 主子码流标识:0-主码流,1-子码流
- transMode: 1, // 传输协议:0-UDP,1-TCP
- gpuMode: 0, // 是否启用GPU硬解,0-不启用,1-启用
- wndId: 1, // 播放窗口序号
- });
- const videoWidth = ref(200);
- const videoHeight = ref(260);
- const Count = ref(0);
- const plugKey = ref('');
-
- /* 创建插件实例 */
- function initPlugin() {
- const dll = { dllPath: './VideoPluginConnect.dll' };
- window.videoWebControl = new WebControl({
- szPluginContainer: 'videoEquip', // 指定容器id
- iServicePortStart: 15900,
- iServicePortEnd: 15909,
- szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
-
- cbConnectSuccess: () => {
- window.videoWebControl.JS_StartService('window', dll).then(() => {
- // 设置视频 web 插件消息回调
- window.videoWebControl.JS_SetWindowControlCallback({
- // cbIntegrationCallBack: msg => { }
- });
- // 启动插件服务成功
- window.videoWebControl.JS_CreateWnd('videoEquip', videoWidth.value, videoHeight.value).then(() => {
- // JS_CreateWnd创建视频播放窗口,宽高可设定
- initVideo(window.videoWebControl); // 创建播放实例成功后初始化
- console.log('启动插件成功!');
- });
- });
- },
- // 插件服务启动失败,弹框提示
- cbConnectError: () => {
- window.videoWebControl = null;
- Count.value++;
- if (Count.value < 2) {
- WebControl.JS_WakeUp('VideoWebPlugin://');
- setTimeout(() => {
- initPlugin();
- }, 8000);
- } else {
- }
- console.log('创建插件失败');
- },
- });
- }
- /* 获取公钥 */
- function initVideo(videoWebControl) {
- const params = {
- funcName: 'getRSAPubKey',
- argument: JSON.stringify({ keyLength: 1024 }),
- };
-
- videoWebControl.JS_RequestInterface(params).then(res => {
- if (res.responseMsg.data) {
- plugKey.value = res.responseMsg.data;
- getVideoConfig(videoWebControl);
- }
- });
- }
- /* 视频插件配置 插件初始化 */
- function getVideoConfig(videoWebControl) {
- const configObj = {
- funcName: 'init',
- argument: JSON.stringify({
- appkey: '22920329', // API网关提供的appkey
- secret: setEncrypt('ryhnhHNWRoXqGYVjsKf9'), // API网关提供的secret
- ip: '183.64.91.250', // API网关IP地址z
- playMode: 0, // 播放模式 0-预览,1-回放
- port: 8443, // 端口
- snapDir: 'D:\\SnapDir', // 抓图存储路径
- videoDir: 'D:\\VideoDir', // 紧急录像或录像剪辑存储路径
- layout: '1x1', // 布局
- enableHTTPS: 1, // 是否启用HTTPS协议 0https 1http
- encryptedFields: 'secret', // 加密字段
- showToolbar: 1, // 是否显示工具栏
- showSmart: 1, // 是否显示智能信息
- buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 自定义工具条按钮 新的
- }),
- };
- videoWebControl.JS_RequestInterface(configObj).then(() => {
- videoWebControl.JS_Resize(videoWidth.value, videoHeight.value);
- getClickAction();
- });
- }
- /* 视频流RSA加密 */
- function setEncrypt(value) {
- const encrypt = new JSEncrypt();
- encrypt.setPublicKey(plugKey.value);
- return encrypt.encrypt(value);
- }
- /* 视频预览 */
- function getClickAction() {
- console.log(showVideos.value, 'showVideos');
- window.videoWebControl.JS_RequestInterface({
- funcName: 'startPreview',
- argument: JSON.stringify(showVideos.value),
- });
- }
- function windowResize() {
- let div = document.getElementById('videoEquip');
- videoWidth.value = div.offsetWidth; // 返回元素的总宽度
- videoHeight.value = div.offsetHeight; // 返回元素的总高度
- if (window.videoWebControl) {
- window.videoWebControl.JS_Resize(videoWidth.value, videoHeight.value);
- }
- }
-
- onMounted(() => {
- videoWidth.value = document.getElementById('videoEquip').offsetWidth;
- if (window.videoWebControl == null) {
- setTimeout(() => {
- initPlugin();
- }, 500);
- } else {
- window.videoWebControl.JS_ShowWnd();
- }
- window.onresize = () => {
- videoWidth.value = document.getElementById('videoEquip').offsetWidth;
- console.log(document.getElementById('videoEquip').offsetWidth);
- windowResize();
- };
- });
- onBeforeUnmount(() => {
- if (window.videoWebControl != null) {
- window.videoWebControl.JS_HideWnd();
- window.videoWebControl.JS_DestroyWnd();
- window.videoWebControl = null;
- }
- });
- </script>
- <style lang="scss">
- .equipVideo {
- width: 100%;
- .contLeft-nopx {
- background: #f9fbff;
- padding: 10px;
- height: 260px;
- width: 200px;
- margin-right: 10px;
- p {
- display: flex;
- justify-content: space-between;
- .title {
- font-weight: bold;
- }
- }
- }
- #videoEquip {
- flex: 1;
- border: 1px solid red;
- .wc-grab-open-image {
- display: none;
- }
- }
- }
- </style>