/* * @Author: 634665781 634665781@qq.com * @Date: 2023-04-11 13:40:18 * @LastEditors: 634665781 634665781@qq.com * @LastEditTime: 2023-05-30 11:08:31 * @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: '9745259F-76B5-4ECB-BDD7-8B1B2C5C84CD', name: '3L00AE9PAJ00034', protocol: '乐橙云HTTP-FLV', username: 'lc0f4b952c86c34c4b', password: 'dfdcae9267bf4964ae09998e16f016', pandavmsHost: 'ws://192.168.12.154:8080/', address: '3L00AE9PAJ00034', }; /*{ id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675 name: '琼海电信小区', // 设备名称 protocol:'萤石EZOPEN', // 萤石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, }; */ // VideoParam = { // id: '819DE637-BB78-49EB-9FBD-02907A3C1141', // 398993BB-A795-4237-BE75-B6A7EC9D675 // name: '锦绣豪庭_通道_2', // 设备名称 // protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 // username: 'cd12d49994a04fb2839037d3f559a801', // password: '24ecede07e9be5c5fccb85ccfec5e1ba', // dataRate: 'Sub', // Main 主码流 Sub 子码流 // pandavmsHost: 'ws://221.229.200.85:8086/', // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ // address: 'F65095407', // channel: 2, // options:{ // 不传递默认是今天的回放 // begin: '20231010000000', // 回放开始时间 // end: '20231010235959', // 回放结束时间 // }, // type:'rec', // 回放标识 // }; // VideoParam = { // id: 'D21D9F91-F546-4A54-AE31-8E30A83214B2', // 398993BB-A795-4237-BE75-B6A7EC9D675 // name: '金山蓝景_通道_1', // 设备名称 // protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181 // username: '6c44c8e92d1c4d75a9818756025df550', // password: '78b7dc88f9f4bf19c2b1aabfdd995244', // dataRate: 'Sub', // Main 主码流 Sub 子码流 // pandavmsHost: 'ws://120.194.86.66:8096/', // pandavms后端主机地址 eg: ws://172.16.19.19:8080/ // address: 'F97957614', // channel: 1, // options:{ // 不传递默认是今天的回放 // begin: '20231010000000', // 回放开始时间 // end: '20231010235959', // 回放结束时间 // }, // type:'rec', // 回放标识 // }; 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); }); // ****** // 其他事件需查看在线文档 // ****** return () => { console.log('销毁。。。。。。。。。。。。。。。。。。。。。。。。。'); stopVideo(); }; }, []); 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> <div style={{ height: '700px' }}> <Video {...{ JessibucaObj: JessibucaObj, VideoInfo: VideoParam }} ref={jessibuca} /> </div> </div> ); }; export default Demo1;