drone/assets/script/reference/FlvPlayerCanvas.ts

// 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<object> = [];
// 	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', `<div id="id_test_video" class="id-test-video" style="visibility: hidden;"></div>
// 		<canvas width="640" height=360" id="video1w" class="video1w"></canvas>
// 		<video id="sdp_video" class="sdp-video" controls playsinline></video>`);
// 		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 = [];
// 	}
// }