|
|
@@ -0,0 +1,508 @@
|
|
|
+import { defHttp } from '/@/utils/http/axios';
|
|
|
+import { render, h, nextTick, VNode, ref } from 'vue';
|
|
|
+import { useDrag } from '../event/useDrag';
|
|
|
+import Player, { I18N } from 'xgplayer';
|
|
|
+import HlsPlugin from 'xgplayer-hls';
|
|
|
+import FlvPlugin from 'xgplayer-flv';
|
|
|
+import 'xgplayer/dist/index.min.css';
|
|
|
+import ZH from 'xgplayer/es/lang/zh-cn';
|
|
|
+import videojs from 'video.js';
|
|
|
+import { createPlayerVNode } from '../component/createPlayer';
|
|
|
+I18N.use(ZH);
|
|
|
+
|
|
|
+export function useCamera() {
|
|
|
+ const cameraList = (params) => defHttp.get({ url: '/safety/ventanalyCamera/listNew', params });
|
|
|
+ const cameraAddrList = (params) => defHttp.post({ url: '/monitor/camera/info', params });
|
|
|
+ const cameraAddr = (params) => defHttp.get({ url: '/monitor/camera/queryByCameraCode', params });
|
|
|
+
|
|
|
+
|
|
|
+ let webRtcServer = <any[]>[];
|
|
|
+ const playerList = <any[]>[];
|
|
|
+ const playerDoms = <(HTMLVideoElement | undefined | null)[]>[];
|
|
|
+ const videoParentDomList: (HTMLElement | [string, { name: string; addr: string; cameraRate: number; devicekind: string }])[] = [];
|
|
|
+ let Total = ref(0)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ async function getCamera(deviceid, parentPlayerDom, renderPlayer, pagination, cameraData?, devKind?, isCustom = false) {
|
|
|
+ await removeCameraRef(parentPlayerDom, renderPlayer);
|
|
|
+ let res;
|
|
|
+ if (!devKind) {
|
|
|
+ res = await cameraList({ deviceid, pageNo: pagination.current, pageSize: pagination.pageSize, });
|
|
|
+ }else {
|
|
|
+ res = await cameraList({ sysId: deviceid, devKind, pageNo: pagination.current, pageSize: pagination.pageSize, });
|
|
|
+ }
|
|
|
+ Total.value = !cameraData ? res.total : 0
|
|
|
+ const cameras: [] = !cameraData ? res.records || [] : cameraData;
|
|
|
+ console.log(cameras,'cameras===')
|
|
|
+ const cameraAddrs: any[] = [],
|
|
|
+ cameraNames: any[] = [];
|
|
|
+ if (cameras.length > 0) {
|
|
|
+ for (let i = 0; i < cameras.length; i++) {
|
|
|
+ const item = cameras[i];
|
|
|
+ if (
|
|
|
+ item['devicekind'] === 'toHKRtsp' ||
|
|
|
+ item['devicekind'] === 'toHKHLs' ||
|
|
|
+ item['devicekind'] === 'HLL' ||
|
|
|
+ item['devicekind'] === 'YZG_URL'
|
|
|
+ ) {
|
|
|
+ // 从海康平台接口获取视频流
|
|
|
+ const videoType = item['devicekind'] === 'toHKRtsp' ? 'rtsp' : '';
|
|
|
+ try {
|
|
|
+ const data = await cameraAddr({ devicekind: item['devicekind'], cameraCode: item['addr'], videoType });
|
|
|
+ if (data && data['url']) {
|
|
|
+ cameraAddrs.push({ name: item['name'], addr: data['url'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
|
|
|
+ }
|
|
|
+ // // 从海康平台接口获取视频流测试
|
|
|
+ // cameraAddrs.push({
|
|
|
+ // name: item['name'],
|
|
|
+ // addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
|
|
|
+ // });
|
|
|
+ } catch (error) { }
|
|
|
+ } else if (item['devicekind'] == 'toHKR') {
|
|
|
+ cameraNames.push({ name: item['name'], cameraRate: item['cameraRate'] });
|
|
|
+ } else {
|
|
|
+ cameraAddrs.push({ name: item['name'], addr: item['addr'], cameraRate: item['cameraRate'], devicekind: item['devicekind'] });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (cameraNames.length > 0) {
|
|
|
+ // 请求接口从装备院拿数据
|
|
|
+ const cameraNameList = cameraNames.map((item) => item.name);
|
|
|
+
|
|
|
+ const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNameList });
|
|
|
+ for (let i = 0; i < addrs.length; i++) {
|
|
|
+ cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (isCustom) {
|
|
|
+ return cameraAddrs;
|
|
|
+ } else {
|
|
|
+ await deviceCameraInit1(cameraAddrs, parentPlayerDom);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function deviceCameraInit(cameraAddrs, player: HTMLElement) {
|
|
|
+ const newWebRtcServer = [];
|
|
|
+ let livePlayerDiv: HTMLElement | null = document.getElementById('LivePlayerBox');
|
|
|
+ if (livePlayerDiv) {
|
|
|
+ livePlayerDiv.remove();
|
|
|
+ livePlayerDiv = null;
|
|
|
+ }
|
|
|
+ if (!livePlayerDiv) {
|
|
|
+ const dom = document.createElement('div');
|
|
|
+ dom.setAttribute('id', 'LivePlayerBox');
|
|
|
+ dom.setAttribute('class', 'live-player-box');
|
|
|
+ livePlayerDiv = dom;
|
|
|
+ player.appendChild(livePlayerDiv);
|
|
|
+ }
|
|
|
+
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ const playCamrea = () => {
|
|
|
+ if (cameraAddrs.length > 0) {
|
|
|
+ const promiseList: Promise<any>[] = [];
|
|
|
+ // debugger;
|
|
|
+ cameraAddrs.forEach(async (cameraUrl: { name: string; addr: string; cameraRate: number; devicekind: string }, index) => {
|
|
|
+ const promise = new Promise(async (childResolve) => {
|
|
|
+ let cameraNameDom: null | HTMLElement = null;
|
|
|
+ console.log('摄像头地址--------->', cameraUrl, cameraUrl.addr.startsWith('rtsp://'), livePlayerDiv);
|
|
|
+ if (cameraUrl.addr.includes('0.0.0.0')) {
|
|
|
+ cameraUrl.addr = cameraUrl.addr.replace('0.0.0.0', window.location.hostname);
|
|
|
+ }
|
|
|
+ if (cameraUrl.addr && cameraUrl.addr.startsWith('rtsp://')) {
|
|
|
+ const server = webRtcServer?.shift();
|
|
|
+ let videoDom: HTMLVideoElement | null = null;
|
|
|
+ if (server) {
|
|
|
+ try {
|
|
|
+ videoDom = server.videoElement as HTMLVideoElement;
|
|
|
+ videoDom.volume = 0;
|
|
|
+ const cameraNameDom = videoDom.parentElement?.getElementsByClassName('video-name')[0];
|
|
|
+ if (cameraNameDom) cameraNameDom.innerText = cameraUrl.name;
|
|
|
+ playerDoms.unshift(videoDom);
|
|
|
+ newWebRtcServer.unshift(server);
|
|
|
+ // videoParentDomList.unshift()
|
|
|
+ await server.connect(cameraUrl['addr']);
|
|
|
+ videoDom.play();
|
|
|
+ childResolve(null);
|
|
|
+ } catch (error) {
|
|
|
+ playerDoms.unshift(undefined);
|
|
|
+ childResolve(null);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ videoDom = document.createElement('video');
|
|
|
+ videoDom.volume = 0;
|
|
|
+ videoDom.setAttribute('class', 'rtspVideo');
|
|
|
+ videoDom.setAttribute('muted', 'muted');
|
|
|
+ videoDom.setAttribute('poster', '/src/assets/images/vent/noSinge.png');
|
|
|
+ videoDom.autoplay = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const server = new window['WebRtcStreamer'](
|
|
|
+ videoDom,
|
|
|
+ VUE_APP_URL.webRtcUrl.startsWith('/') ? location.protocol + VUE_APP_URL.webRtcUrl : VUE_APP_URL.webRtcUrl
|
|
|
+ );
|
|
|
+ newWebRtcServer.unshift(server);
|
|
|
+ await server.connect(cameraUrl.addr);
|
|
|
+ videoDom.play();
|
|
|
+ playerDoms.unshift(videoDom);
|
|
|
+ childResolve(null);
|
|
|
+ } catch (error) {
|
|
|
+ console.log('WebRtcStreamer 抛出异常！！！！！！');
|
|
|
+ playerDoms.unshift(null);
|
|
|
+ childResolve(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (videoDom) {
|
|
|
+ const videoParentDom: HTMLElement = document.createElement('div');
|
|
|
+ videoParentDom.setAttribute('class', 'video-parent');
|
|
|
+ videoParentDom.appendChild(videoDom);
|
|
|
+ cameraNameDom = document.createElement('div');
|
|
|
+ cameraNameDom.setAttribute('class', 'video-name');
|
|
|
+ cameraNameDom.innerText = cameraUrl.name;
|
|
|
+ videoParentDom.appendChild(cameraNameDom);
|
|
|
+ videoParentDom.addEventListener('dblclick', () => {
|
|
|
+ if (videoDom?.requestFullscreen) {
|
|
|
+ videoDom.requestFullscreen();
|
|
|
+ videoDom.play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ videoParentDomList.push(videoParentDom);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ videoParentDomList.push(['player' + index, cameraUrl]);
|
|
|
+ childResolve(null);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ promiseList.push(promise);
|
|
|
+ });
|
|
|
+ Promise.all(promiseList).then(() => {
|
|
|
+ resolve(null);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ resolve(null);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ playCamrea();
|
|
|
+ }).then(() => {
|
|
|
+ videoParentDomList.forEach((videoParent) => {
|
|
|
+ if (typeof videoParent[0] === 'string' && livePlayerDiv) {
|
|
|
+ const videoParentDom: HTMLElement = document.createElement('div');
|
|
|
+ videoParentDom.setAttribute('class', 'liveVideo');
|
|
|
+ livePlayerDiv?.appendChild(videoParentDom);
|
|
|
+ useDrag(videoParentDom);
|
|
|
+
|
|
|
+ if (videoParent[1] && videoParent[1].addr) {
|
|
|
+ let player;
|
|
|
+ const fileExtension = videoParent[1].addr.split('.').pop();
|
|
|
+ if (fileExtension === 'flv' || videoParent[1].devicekind == 'flv') {
|
|
|
+ const videoDom: HTMLElement = document.createElement('div');
|
|
|
+ videoDom.setAttribute('id', videoParent[0]);
|
|
|
+ videoDom.style = 'width: 100%; height: 100%;';
|
|
|
+ videoParentDom.appendChild(videoDom);
|
|
|
+ player = new Player({
|
|
|
+ lang: 'zh',
|
|
|
+ id: videoParent[0],
|
|
|
+ url: videoParent[1].addr,
|
|
|
+ width: 294,
|
|
|
+ height: 188,
|
|
|
+ poster: '/src/assets/images/vent/noSinge.png',
|
|
|
+ plugins: [FlvPlugin],
|
|
|
+ fluid: true,
|
|
|
+ autoplay: true,
|
|
|
+ isLive: true,
|
|
|
+ playsinline: true,
|
|
|
+ screenShot: true,
|
|
|
+ whitelist: [''],
|
|
|
+ ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
|
|
|
+ closeVideoClick: true,
|
|
|
+ customConfig: {
|
|
|
+ isClickPlayBack: false,
|
|
|
+ },
|
|
|
+ controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
|
|
|
+ defaultPlaybackRate: videoParent[1].cameraRate || 1,
|
|
|
+ flv: {
|
|
|
+ retryCount: 3, // 重试 3 次，默认值
|
|
|
+ retryDelay: 1000, // 每次重试间隔 1 秒，默认值
|
|
|
+ loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
|
|
|
+ fetchOptions: {
|
|
|
+ // 该参数会透传给 fetch，默认值为 undefined
|
|
|
+ mode: 'cors',
|
|
|
+ },
|
|
|
+ targetLatency: 10, // 直播目标延迟，默认 10 秒
|
|
|
+ maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
|
|
|
+ disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
|
|
|
+ maxJumpDistance: 10,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (fileExtension === 'm3u8' || videoParent[1].devicekind == 'm3u8') {
|
|
|
+ const videoDom: HTMLElement = document.createElement('video');
|
|
|
+ videoDom.setAttribute('id', videoParent[0]);
|
|
|
+ videoDom.style = 'width: 100%; height: 100%;';
|
|
|
+ videoParentDom.appendChild(videoDom);
|
|
|
+ if (videoDom.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
+ // 原生支持 hls 播放
|
|
|
+ player = new Player({
|
|
|
+ lang: 'zh',
|
|
|
+ id: videoParent[0],
|
|
|
+ url: videoParent[1].addr,
|
|
|
+ width: 294,
|
|
|
+ height: 188,
|
|
|
+ isLive: true,
|
|
|
+ autoplay: true,
|
|
|
+ autoplayMuted: true,
|
|
|
+ cors: true,
|
|
|
+ ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
|
|
|
+ poster: '/src/assets/images/vent/noSinge.png',
|
|
|
+ defaultPlaybackRate: videoParent[1].cameraRate || 1,
|
|
|
+ controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
|
|
|
+ hls: {
|
|
|
+ retryCount: 10, // 重试 3 次，默认值
|
|
|
+ retryDelay: 30000, // 每次重试间隔 1 秒，默认值
|
|
|
+ loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
|
|
|
+ disconnectTime: 30, //直播断流时间，
|
|
|
+ fetchOptions: {
|
|
|
+ // 该参数会透传给 fetch，默认值为 undefined
|
|
|
+ mode: 'cors',
|
|
|
+ },
|
|
|
+ targetLatency: 10, // 直播目标延迟，默认 10 秒
|
|
|
+ maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
|
|
|
+ maxJumpDistance: 10,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (HlsPlugin.isSupported()) {
|
|
|
+ // 第一步
|
|
|
+ player = new Player({
|
|
|
+ lang: 'zh',
|
|
|
+ id: videoParent[0],
|
|
|
+ url: videoParent[1].addr,
|
|
|
+ width: 294,
|
|
|
+ height: 188,
|
|
|
+ isLive: true,
|
|
|
+ autoplay: true,
|
|
|
+ autoplayMuted: true,
|
|
|
+ ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
|
|
|
+ plugins: [HlsPlugin], // 第二步
|
|
|
+ poster: '/src/assets/images/vent/noSinge.png',
|
|
|
+ defaultPlaybackRate: videoParent[1].cameraRate || 1,
|
|
|
+ controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
|
|
|
+ hls: {
|
|
|
+ retryCount: 10, // 重试 3 次，默认值
|
|
|
+ retryDelay: 30000, // 每次重试间隔 1 秒，默认值
|
|
|
+ loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
|
|
|
+ disconnectTime: 30,
|
|
|
+ fetchOptions: {
|
|
|
+ // 该参数会透传给 fetch，默认值为 undefined
|
|
|
+ mode: 'cors',
|
|
|
+ },
|
|
|
+ targetLatency: 10, // 直播目标延迟，默认 10 秒
|
|
|
+ maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
|
|
|
+ maxJumpDistance: 10,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const videoDom: HTMLElement = document.createElement('video');
|
|
|
+ videoDom.setAttribute('id', videoParent[0]);
|
|
|
+ videoDom.style = 'width: 100%; height: 100%;';
|
|
|
+ videoParentDom.appendChild(videoDom);
|
|
|
+ player = videojs(
|
|
|
+ videoParent[0],
|
|
|
+ {
|
|
|
+ controls: false,
|
|
|
+ autoplay: true,
|
|
|
+ preload: 'auto',
|
|
|
+ muted: true,
|
|
|
+ // src: cameraUrl,
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ src: videoParent[1].addr,
|
|
|
+ type: 'application/x-mpegURL',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ videojs.log('播放器准备好了!');
|
|
|
+ // this.play();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ player.play();
|
|
|
+ }
|
|
|
+ if (player) playerList.push(player);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ useDrag(videoParent as HTMLElement);
|
|
|
+ livePlayerDiv?.appendChild(videoParent as Node);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const players = livePlayerDiv?.getElementsByClassName('player');
|
|
|
+ if (players && players.length) {
|
|
|
+ for (let i = 0; i < players.length; i++) {
|
|
|
+ try {
|
|
|
+ const isCanPlayer = !players[i].getAttribute('id')?.startsWith('onPlayer');
|
|
|
+ const dom = players[i].getElementsByTagName('video')[0];
|
|
|
+ if (dom && isCanPlayer) {
|
|
|
+ playerDoms.unshift(dom);
|
|
|
+ } else {
|
|
|
+ playerDoms.unshift(null);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('可以捕获到异常吗？？？？？');
|
|
|
+ playerDoms.unshift(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (webRtcServer.length > 0) {
|
|
|
+ for (let i = 0; i < webRtcServer.length; i++) {
|
|
|
+ webRtcServer[i].videoElement.parentElement.remove();
|
|
|
+ webRtcServer[i].disconnect();
|
|
|
+ webRtcServer[i] = undefined;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ webRtcServer.length = 0;
|
|
|
+ webRtcServer = newWebRtcServer;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function deviceCameraInit1(cameraAddrs, player) {
|
|
|
+ const vnode = createPlayerVNode(cameraAddrs);
|
|
|
+ render(vnode, player.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ function getPlayer(fileExtension, playerDomId, camerakind, cameraUrl, cameraRate, option = { width: '100%', height: '100%' }) {
|
|
|
+ let player;
|
|
|
+ if (fileExtension === 'flv' || camerakind == 'flv') {
|
|
|
+ player = new Player({
|
|
|
+ lang: 'zh',
|
|
|
+ id: playerDomId,
|
|
|
+ url: cameraUrl,
|
|
|
+ width: option.width,
|
|
|
+ height: option.height,
|
|
|
+ poster: '/src/assets/images/vent/noSinge.png',
|
|
|
+ plugins: [FlvPlugin],
|
|
|
+ fluid: true,
|
|
|
+ autoplay: true,
|
|
|
+ isLive: true,
|
|
|
+ playsinline: true,
|
|
|
+ screenShot: true,
|
|
|
+ whitelist: [''],
|
|
|
+ ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
|
|
|
+ closeVideoClick: true,
|
|
|
+ customConfig: {
|
|
|
+ isClickPlayBack: false,
|
|
|
+ },
|
|
|
+ controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
|
|
|
+ defaultPlaybackRate: cameraRate || 1,
|
|
|
+ flv: {
|
|
|
+ retryCount: 3, // 重试 3 次，默认值
|
|
|
+ retryDelay: 1000, // 每次重试间隔 1 秒，默认值
|
|
|
+ loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
|
|
|
+ fetchOptions: {
|
|
|
+ // 该参数会透传给 fetch，默认值为 undefined
|
|
|
+ mode: 'cors',
|
|
|
+ },
|
|
|
+ targetLatency: 10, // 直播目标延迟，默认 10 秒
|
|
|
+ maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
|
|
|
+ disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
|
|
|
+ maxJumpDistance: 10,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // playerList.push(player);
|
|
|
+ }
|
|
|
+ if (fileExtension === 'm3u8' || camerakind == 'm3u8') {
|
|
|
+ if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
+ // 原生支持 hls 播放
|
|
|
+ player = new Player({
|
|
|
+ lang: 'zh',
|
|
|
+ id: playerDomId,
|
|
|
+ url: cameraUrl,
|
|
|
+ width: option.width,
|
|
|
+ height: option.height,
|
|
|
+ isLive: true,
|
|
|
+ autoplay: true,
|
|
|
+ autoplayMuted: true,
|
|
|
+ cors: true,
|
|
|
+ ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
|
|
|
+ poster: '/src/assets/images/vent/noSinge.png',
|
|
|
+ defaultPlaybackRate: cameraRate || 1,
|
|
|
+ controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
|
|
|
+ hls: {
|
|
|
+ retryCount: 10, // 重试 3 次，默认值
|
|
|
+ retryDelay: 30000, // 每次重试间隔 1 秒，默认值
|
|
|
+ loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
|
|
|
+ disconnectTime: 30, //直播断流时间，
|
|
|
+ fetchOptions: {
|
|
|
+ // 该参数会透传给 fetch，默认值为 undefined
|
|
|
+ mode: 'cors',
|
|
|
+ },
|
|
|
+ targetLatency: 10, // 直播目标延迟，默认 10 秒
|
|
|
+ maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
|
|
|
+ maxJumpDistance: 10,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (HlsPlugin.isSupported()) {
|
|
|
+ // 第一步
|
|
|
+ player = new Player({
|
|
|
+ lang: 'zh',
|
|
|
+ id: playerDomId,
|
|
|
+ url: cameraUrl,
|
|
|
+ width: option.width,
|
|
|
+ height: option.height,
|
|
|
+ isLive: true,
|
|
|
+ autoplay: true,
|
|
|
+ autoplayMuted: true,
|
|
|
+ ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
|
|
|
+ plugins: [HlsPlugin], // 第二步
|
|
|
+ poster: '/src/assets/images/vent/noSinge.png',
|
|
|
+ defaultPlaybackRate: cameraRate || 1,
|
|
|
+ controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
|
|
|
+ hls: {
|
|
|
+ retryCount: 10, // 重试 3 次，默认值
|
|
|
+ retryDelay: 30000, // 每次重试间隔 1 秒，默认值
|
|
|
+ loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
|
|
|
+ disconnectTime: 30,
|
|
|
+ fetchOptions: {
|
|
|
+ // 该参数会透传给 fetch，默认值为 undefined
|
|
|
+ mode: 'cors',
|
|
|
+ },
|
|
|
+ targetLatency: 10, // 直播目标延迟，默认 10 秒
|
|
|
+ maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
|
|
|
+ maxJumpDistance: 10,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return player;
|
|
|
+ }
|
|
|
+
|
|
|
+ function removeCamera(playerRef) {
|
|
|
+ if (playerRef.value) {
|
|
|
+ render(null, playerRef.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function removeCameraRef(playerRef, isShowPlayerRef) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ isShowPlayerRef.value = false;
|
|
|
+ if (playerRef.value) {
|
|
|
+ render(null, playerRef.value);
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ isShowPlayerRef.value = true;
|
|
|
+ resolve(null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ getCamera,
|
|
|
+ webRtcServer,
|
|
|
+ playerDoms,
|
|
|
+ deviceCameraInit,
|
|
|
+ removeCamera,
|
|
|
+ getPlayer,
|
|
|
+ removeCameraRef,
|
|
|
+ Total,
|
|
|
+ };
|
|
|
+}
|
