/* * @Author: 634665781 634665781@qq.com * @Date: 2023-04-11 13:40:18 * @LastEditors: 634665781 634665781@qq.com * @LastEditTime: 2023-04-17 11:05:27 * @FilePath: \wisdom-components\packages\base-components\TestVideo\src\demos\dmeo1.tsx * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ // @ts-ignore import React, { useRef, useEffect } from 'react'; import Video from '../index'; const Demo1 = (props) => { const jessibuca = useRef(null); let JessibucaObj = { operateBtns: { // fullscreen: false, screenshot: false, }, loadingText: '演示视频加载中', decoder: '/JessibucaVideo/decoder.js', }; // 若是在子应用中,则需加上子应用名称,且兼容基座 // 如下: // let _url = '/civ_energy/JessibucaVideo/decoder.js' // let JessibucaObj = { // decoder: window.__POWERED_BY_QIANKUN__ ? '/civbase' + _url : _url // } // let VideoInfo = { // key: '123638446', //'1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76', // dataRate: `/2`, // fullUrl: 'ws://172.16.19.19:8080/jessica/1CEB209F-8BC7-44B5-9F6B-3D8FCB855E76', // useFullUrl: true, // cameraName: `摄像头s8`, // appKey: '6c44c8e92d1c4d75a9818756025df550', // appSecret: '78b7dc88f9f4bf19c2b1aabfdd995244', // protocol: '萤石EZOPEN', //}; let VideoParam = { id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675 name: '琼海电信小区', // 设备名称 protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 username: '6c44c8e92d1c4d75a9818756025df550', password: '78b7dc88f9f4bf19c2b1aabfdd995244', dataRate: 'Sub', // Main 主码流 Sub 子码流 pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ address: '236644034', width: 952, height: 500, }; /* { id: '398993BB-A795-4237-BE75-B6A7EC9D675', // 398993BB-A795-4237-BE75-B6A7EC9D675 name: '设备1', // 设备名称 protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 username: '6c44c8e92d1c4d75a9818756025df550', password: '78b7dc88f9f4bf19c2b1aabfdd995244', dataRate: 'Sub', // Main 主码流 Sub 子码流 pandavmsHost: 'ws://172.16.19.19:8080/', // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ address: '123638446', }; */ useEffect(() => { // 事件 ,返回视频信息 jessibuca && jessibuca.current && jessibuca.current.on('videoInfo', function (data) { console.log('width:', data.width, 'height:', data.width); }); // 事件 ,播放视频之后的回调 jessibuca && jessibuca.current && jessibuca.current.on('play', function (data) { console.log('play:', jessibuca); }); // 事件 ,暂停视频之后的回调 jessibuca && jessibuca.current && jessibuca.current.on('pause', function (data) { console.log('pause:', data); }); // ****** // 其他事件需查看在线文档 // ****** }, []); const stopVideo = () => { jessibuca.current.pause && jessibuca.current.pause(); }; const startVideo = () => { if (jessibuca && jessibuca.current) { jessibuca.current.play(); // console.log(jessibuca.current.isPlaying()); } }; const testVideo = () => { // console.log(jessibuca.current.isPlaying()); }; const destroyVideo = () => { if (VideoParam.protocol != '萤石EZOPEN') jessibuca && jessibuca.current && jessibuca.current.destroy(); }; return ( <div> <button onClick={stopVideo}>暂停</button> <button onClick={startVideo}>开始</button> <button onClick={testVideo}>测试</button> <button onClick={destroyVideo}>销毁</button> <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} /> </div> ); }; export default Demo1;