// import { CommonCtrl } from '../CommonCtrl' // import { GameType } from '../CommonDefine' // import LocalDataMgr from '../managers/LocalDataMgr' // import * as TCPlayer from '../Library/TcPlayer.js' // import Common, { Skins } from '../Common' // import { CommonUIs, UIManager } from '../managers/UIManager' // import sdpPlayer from '../Library/sdpPlayer' // import BaseVideoPlayer from '../Library/BaseVideoPlayer' // import { UserInfo } from '../store/UserInfo' // import { VideoConfig } from '../store/VideoConfig' // import TableMgr from '../managers/TableMgr' // const { ccclass, property } = cc._decorator // @ccclass // export default class FlvPlayerCanvas extends BaseVideoPlayer { // private tcplayer: TCPlayer = null; // private nodeplayer: NodePlayer = null // private sdpPlayer: sdpPlayer = null; // private tcplayerArray = []; // private bufZeroCounts: number = 0; // private bufCounts: number = 0; // private nodePlayerElement: HTMLElement; // private tcPlayerElement: HTMLElement; // private intervalHandler: any; // private errorArray: Array = []; // private readonly defaultTimeout: number = 5; // private videoTimeout: number = this.defaultTimeout; // private webrtcTimeout: number = 10; // public init(): void { // // tcplayer flv webrtc && nodplayer 容器改用生成至Cocos2dGameContainer,可解決anroid 6以下(包含)和android app webview聊天室開啟後`直播視訊`被推走 // const Cocos2dGameContainer = document.getElementById('Cocos2dGameContainer'); // Cocos2dGameContainer.insertAdjacentHTML('beforeend', ` // // `); // this.tcPlayerElement = document.getElementById('id_test_video'); // this.setNodePlayer(); // this.setSdpPlayer(); // this.videoElementList = [this.nodePlayerElement, this.tcPlayerElement, this.sdpPlayer.player] // } // // init sdpPlayer // private setSdpPlayer(): void { // this.sdpPlayer = new sdpPlayer(); // this.sdpPlayer.setView("sdp_video"); // this.sdpPlayer.player.style.visibility = !Common.isIos ? 'hidden' : 'visible'; // this.sdpPlayer.on("start", () => { // this.sdpPlayer.setVolume(LocalDataMgr.inst.liveVolume); // this.setVideoBgWithLoad(true); // this.setVideoDisplay(true); // // cc.log('Received remote stream complete'); // clearTimeout(this.timeoutHandler); // // wait 5s change to second-Line // this.timeoutHandler = setTimeout(() => { // this.errorArray.push({ // error: "sdp webrtc timeout 5s", // player:"sdpPlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`IOS webrtc timeout 5s change to ndoePlayer`, "sdpPlayer"); // this.switchVideoLine(); // cahnge to second-Line // }, this.webrtcTimeout * 1000); // }) // this.sdpPlayer.on("error", (e) => { // this.setVideoBgWithLoad(true); // this.errorArray.push({ // error: `sdp webrtc error: ${e}`, // player:"sdpPlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`IOS webrtc error change to ndoePlayer: ${e}`, "sdpPlayer"); // this.switchVideoLine(); // }); // this.sdpPlayer.on("stats", () => { // let currentPlayPos = 0; // // this.sdpPlayer.setVolume(LocalDataMgr.inst.liveVolume); // currentPlayPos = this.sdpPlayer.player.currentTime; // if (currentPlayPos > 1) { // clearTimeout(this.timeoutHandler); // if (this.sdpPlayer.player.paused) this.sdpPlayer.player.play(); // this.setVideoBgWithLoad(false); // } // }) // } // // init nodePlayer // private setNodePlayer(): void { // this.nodePlayerElement = document.getElementById("video1w"); // this.nodePlayerElement.style.visibility = 'hidden' // NodePlayer.load(()=>{ // this.nodeplayer = new NodePlayer() // this.nodeplayer.setScaleMode(1) // this.nodeplayer.setView('video1w') // this.nodeplayer.setBufferTime(2000) // this.nodeplayer.setVolume(LocalDataMgr.inst.liveVolume) // // this.nodeplayer.on('videoInfo', (width: number, height: number) => { // // // this.resetSize(width, height) // // }) // this.nodeplayer.on('start', () => { // this.bufZeroCounts = 0; // this.bufCounts = 0; // this.setVideoBgWithLoad(true); // this.nodeplayer.setVolume(LocalDataMgr.inst.liveVolume); // this.setVideoDisplay(true); // CommonCtrl.inst.curDeviceType.resetDesignResolution(); // }) // this.nodeplayer.on('error', (err: any) => { // cc.error("NodePlayer: ", err); // clearTimeout(this.timeoutHandler); // this.setVideoBgWithLoad(true); // this.errorArray.push({ // error: `node flv error: ${JSON.stringify(err)}`, // player: "nodePlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`IOS flv error: ${JSON.stringify(err)}`, "nodePlayer"); // this.NodeReTry(); // }) // this.nodeplayer.on('stats', (args: any) => { // if (!this.isPlaying) this.nodeplayer.stop(); // if (args.buf === 0) { // this.bufZeroCounts++; // if (this.bufCounts > 0) this.bufCounts--; // if (this.bufZeroCounts > 60) { // this.setVideoBgWithLoad(true); // this.NodeReTry(); // } // } else if (args.buf > 180 && this.bufCounts < 3) { // this.bufCounts++; // } // if (this.bufCounts > 1 && args.buf > 0) { // this.setVideoBgWithLoad(false); // clearTimeout(this.timeoutHandler); // } // }) // // this.nodeplayer.on('stop', () => { }) // }) // } // wakePlayerUp() { // if (this.nodeplayer) this.nodeplayer.audioResume() // // trigger sdpPlayer video // this.sdpPlayer.autoPlayActive(); // } // setVolume(num) { // if (Common.isIos) { // // ios // if (CommonCtrl.inst.videoConfig.useSecondLine) { // this.tcplayer && this.isReady && this.tcplayer.volume(0); // this.sdpPlayer.setVolume(0); // if (this.nodeplayer) { // this.nodeplayer.setVolume(num); // } // } else if (CommonCtrl.inst.videoConfig.useSecWebrtcLine) { // this.tcplayer && this.isReady && this.tcplayer.volume(0); // if (this.nodeplayer) this.nodeplayer.setVolume(0); // if (this.sdpPlayer) { // this.sdpPlayer.setVolume(num); // } // } else { // this.sdpPlayer.setVolume(0); // if (this.nodeplayer) this.nodeplayer.setVolume(0); // if (this.tcPlayerElement && this.isReady) { // this.tcplayer.volume(num); // } // } // } else { // // android // if (CommonCtrl.inst.videoConfig.useSecondLine) { // this.sdpPlayer.setVolume(0); // if (this.nodeplayer) this.nodeplayer.setVolume(num); // if (this.tcplayer) this.tcplayer.volume(0); // } else { // this.sdpPlayer.setVolume(0); // if (this.nodeplayer) this.nodeplayer.setVolume(0); // if (this.tcplayer && this.isReady) { // this.tcplayer.volume(num); // } // } // } // } // updateUrl(url: string) { // cc.warn("updateUrl ", url, this.url); // clearTimeout(this.timeoutHandler); // this.setVideoBg(true); // this.videoErrorCounts = 0; // if (Common.isAndroidApp && LocalDataMgr.inst.liveEnable && !CommonCtrl.inst.videoConfig.useSecondLine) { // this.switchVideoLine(); // return; // } // if (!this.checkURLValid) { // // UIManager.inst.showCommonUI(CommonUIs.VideoConnectErrorPanel); // this.retry(); // return; // } else if (url == "" || !url) { // this.url = url; // this.errorArray.push({ // error: `video url empty`, // player: "", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`video url empty`, ""); // this.sprite.node.active = true; // this.loadingNode.active = true; // this.videoBg.active = true; // const showVideoConnect = () =>{ // this.timeoutHandler = setTimeout(() => { // this.stop(); // UIManager.inst.showCommonUI(CommonUIs.VideoConnectErrorPanel); // }, 2000); // } // // ios切線路,其餘直接show無法連接視訊 // if (Common.isIos) { // if (CommonCtrl.inst.videoConfig.isURLNotExist) showVideoConnect(); // else this.switchVideoLine(); // } else showVideoConnect(); // return // } // if (!this.sprite || !LocalDataMgr.inst.videoEnable) return; // this.url = url; // this.isPlaying = true; // this.reconnect(); // } // stop() { // this.isPlaying = false; // this.videoTimeout = this.defaultTimeout; // this.nodeplayer.stop(); // this.setVolume(0); // this.isReady = false; // this.nodeplayer.clearView() // this.sdpPlayer.stop(); // if (this.sprite && this.sprite.isValid) // this.sprite.node.active = false; // clearInterval(this.intervalHandler); // clearTimeout(this.timeoutHandler); // this.unscheduleAllCallbacks(); // this.clearOldTcPlayer(); // this.setVideoDisplay(false); // this.setLoading(false); // this.setVideoBg(true); // // cc.warn("stop sprite node active ", this.sprite.node.active); // } // // cahnge video player // setVideoDisplay(flag: boolean) { // const visibility: string = flag ? 'visible' : 'hidden'; // if (Common.isIos) { // // ios // this.nodePlayerElement.style.visibility = "hidden"; // this.sdpPlayer.player.style.visibility = "hidden"; // this.tcPlayerElement.style.visibility = 'hidden'; // if (CommonCtrl.inst.videoConfig.useSecondLine) { // when is ios second line use nodplay play flv // this.nodePlayerElement.style.visibility = visibility; // } else if (CommonCtrl.inst.videoConfig.useSecWebrtcLine) { // when is ios WebrtcSecond Line use sdpplay play webrtc // this.sdpPlayer.player.style.visibility = visibility; // } else { // other use tcplayer tcplay play webrtc // this.tcPlayerElement.style.visibility = visibility; // } // } else { // // android // if (Common.isAndroidApp) { // this.sdpPlayer.player.style.visibility = 'hidden'; // this.nodePlayerElement.style.visibility = 'hidden'; // this.tcPlayerElement.style.visibility = 'hidden'; // if (CommonCtrl.inst.videoConfig.useSecondLine) this.nodePlayerElement.style.visibility = visibility; // else this.tcPlayerElement.style.visibility = visibility; // } else { // this.sdpPlayer.player.style.visibility = 'hidden'; // this.nodePlayerElement.style.visibility = 'hidden'; // this.tcPlayerElement.style.visibility = visibility; // } // } // } // // tcplayer event // eventListener(data) { // if (!this.tcplayer) return // switch (data.type) { // case "load": // // wait 5s retry // // cc.error("wait 5s retry") // clearTimeout(this.timeoutHandler); // this.timeoutHandler = setTimeout(() => { // if (Common.isIos) { // this.errorArray.push({ // error: `tc webrtc timeout ${this.videoTimeout}s`, // player: "tcPlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`IOS webrtc timeout 5s change to sdpPlayer`, "tcPlayer"); // this.switchVideoLine(); // } else { // this.errorArray.push({ // error: `tc flv timeout ${this.videoTimeout}s`, // player: "tcPlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`Android or PC flv Timeout 5s`, "tcPlayer"); // this.tcReTry(); // // this.videoTimeout = (this.videoErrorCounts + 1) * this.defaultTimeout; // } // }, this.videoTimeout * 1000); // this.setVideoBgWithLoad(true); // // this.clearOldTcPlayer(); // this.tcplayer = data.src.player; // data.src.player.volume(LocalDataMgr.inst.liveVolume) // // cc.warn("load", data.src.player); // this.isReady = true; // this.tcplayerArray.push(data.src.player); // break; // case "loadeddata": // clearInterval(this.intervalHandler); // this.intervalHandler = setInterval(() => { // if (Common.isIos) this.tcVideoSync(data.src.el); // else this.tcVideoSync(data.src.flv); // }, 2000); // // cc.warn("loadeddata ", data.src.player) // break; // case "error": // cc.log(data) // cc.error("TCPlayer Error", data?.detail); // clearTimeout(this.timeoutHandler); // this.setVideoBgWithLoad(true); // if (Common.isIos) { // this.errorArray.push({ // error: `tc webrtc error: ${JSON.stringify(data.detail)}`, // player: "tcPlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`IOS webrtc error change to sdpPlayer: ${JSON.stringify(data.detail)}`, "tcPlayer"); // this.switchVideoLine(); // } else { // this.errorArray.push({ // error: `tc flv error: ${JSON.stringify(data.detail)}`, // player: "tcPlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // // this.sendVideoLog(`Android or PC flv error: ${JSON.stringify(data.detail)}`, "tcPlayer"); // this.tcReTry(); // } // break; // case "playing": // data.src.player.volume(LocalDataMgr.inst.liveVolume) // this.isPlaying && data.src.player.play(); // // cc.warn("playing ", data.src.player) // //测试可以清除渲染残影 // CommonCtrl.inst.curDeviceType.resetDesignResolution(); // break; // case "progress": // this.isPlaying && this.setVideoDisplay(true); // break; // case "timeupdate": // // this.tcVideoSync(data.src.flv._mediaElement); // this.isPlaying && this.setVideoDisplay(true); // break; // } // } // // tcplayer flv ReTry for android // private tcReTry(): void { // // retry 3 times // this.videoErrorCounts++; // if (this.videoErrorCounts >= 3 && this.isPlaying) { // this.writeVideoLog(); // this.stop(); // UIManager.inst.showCommonUI(CommonUIs.VideoConnectErrorPanel); // } else { // if (this.tcplayer) { // this.tcplayer.load(); // this.reconnect(); // } // } // } // // nodePlayer flv ReTry for ios // private NodeReTry(): void { // // retry 3 times // this.videoErrorCounts++; // if (this.videoErrorCounts >= 3 && this.isPlaying) { // this.writeVideoLog(); // this.stop(); // UIManager.inst.showCommonUI(CommonUIs.VideoConnectErrorPanel); // } else { // this.reconnect(); // } // } // // reconnect tcplayer && ndoeplayer && sdpPlayer // reconnect() { // if (!this.sprite || !this.isPlaying) return; // this.setLoading(true); // this.isReady = false; // // main line // if (!CommonCtrl.inst.videoConfig.useSecondLine) { // if (Common.isIos && CommonCtrl.inst.videoConfig.useSecWebrtcLine) { // // webrtc second line .sdp // this.sdpPlayer.start(this.url); // this.updateVideoCanvas(); // } else { // // use tcPlayer play android flv or ios webrtc // this.updateVideoCanvas(); // cc.log("TC reconnect ", this.url); // this.clearOldTcPlayer(); // this.unschedule(this.newTcPlayer); // this.scheduleOnce(this.newTcPlayer, 0.5); // } // } else { // // backup line // // ios change to second-Line use nodePlayer // this.nodeplayer.stop(); // try { // cc.log("Node reconnect ", this.url); // this.updateVideoCanvas(); // this.nodeplayer.setView('video1w'); // setTimeout(() => { // clearTimeout(this.timeoutHandler); // // wait 5s retry // this.timeoutHandler = setTimeout(() => { // this.errorArray.push({ // error: `node flv timeout ${this.videoTimeout}s`, // player: "nodePlayer", // pullUrl: this.url, // videoResolution: LocalDataMgr.inst.videoResolution // }); // this.NodeReTry(); // }, this.videoTimeout * 1000); // this.nodeplayer.start(this.url); // }, 500); // } catch (e) { // // cc.error('player closed', e) // return; // } // } // this.sprite && (this.sprite.node.active = true); // //cc.warn("reconnect sprite node active ", this.sprite.node.active); // } // newTcPlayer() { // this.updateVideoCanvas(); // this.tcplayer = new TCPlayer.TcPlayer('id_test_video', { // "m3u8": this.url, // // "flv":this.url, // "width": '100%',//视频的显示宽度,请尽量使用视频分辨率宽度 // "height": '100%',//视频的显示高度,请尽量使用视频分辨率高度 // "controls": "none", // "flash": false, // "live": true, // "listener": this.eventListener.bind(this), // "volume": LocalDataMgr.inst.liveVolume, // "autoplay": true, // flvConfig: { // /** 直播追秒啟用 */ // liveBufferLatencyChasing: true, // /** 最大緩衝區延遲,以秒為單位 */ // liveBufferLatencyMaxLatency: 2, // /** 最小緩衝延遲,以秒為單位 */ // liveBufferLatencyMinRemain: 1, // /** 關閉IO隐藏缓衝區 */ // enableStashBuffer: false, // /** 自動清除緩存 */ // autoCleanupSourceBuffer: true, // } // }); // } // clearOldTcPlayer() { // this.isReady = false; // this.tcplayerArray.forEach((player) => { // player?.stop(); // player?.destroy(); // }); // this.tcplayerArray = []; // this.tcplayer = null; // let htmlElement = document.getElementById("id_test_video"); // if(htmlElement.childElementCount > 0) { // CommonCtrl.inst.log("remove extra video"); // htmlElement.innerHTML = ""; // } // } // // change video-line (ios use) // public switchVideoLine(): void { // this.stop(); // this.videoErrorCounts = 0; // if (Common.isAndroidApp) CommonCtrl.inst.videoConfig.switchAndroidVideo(); // else CommonCtrl.inst.videoConfig.switchVideo(); // const url = CommonCtrl.inst.videoConfig.url; // this.updateUrl(url) // } // // tcplayer sync // private tcVideoSync(videoPlyaer: any): void { // try { // if (videoPlyaer) { // const current = videoPlyaer.currentTime; // video current Time // if (current > 1) { // clearTimeout(this.timeoutHandler); // this.setVideoBgWithLoad(false); // } // if (videoPlyaer.paused) { // videoPlyaer.play(); // } // } // } catch (ex) { // cc.log(ex) // } // } // private writeVideoLog(): void { // const pullUrlArray = [], messageArray = []; // this.errorArray.forEach((info: any) => { // !pullUrlArray.includes(info.pullUrl) && pullUrlArray.push(info.pullUrl); // !messageArray.includes(info.error) && messageArray.push(info.error); // }) // const params = { // message: messageArray.toString(), // userId: CommonCtrl.inst.userInfo.userId, // userName: CommonCtrl.inst.userInfo.userName, // tableNo: TableMgr.inst.current?.tableNo, // pullUrl: pullUrlArray.toString(), // device: Common.isIos ? 3 : 2, // version: Common.version, // extInfo: JSON.stringify({ // userAgent: navigator.userAgent, // history: JSON.stringify(this.errorArray), // }) // }; // cc.log(params) // CommonCtrl.inst.log(params); // this.errorArray = []; // } // }