全屏或者退出全屏检测

引言

在做监控视频时，一个很重要需求就是视频全屏以及退出。下面就讲讲用JavaScript来检测全屏以及退出。

全屏实现

全屏有一套Web API已经为我们准备好，见这里，不过有时我们在使用第三方Web SDK时，可能已经提供，比如海康威视、大华、宇视等。但是第三方其实也是基于Web API的二次封装而已，所以本质还是要了解的。

export const clickFullScreen = () => {
	const objElement = document.querySelector('.parent-wnd').childNodes[0];//将要全屏的元素

	//返回一个Promise，如果要基于全屏之后做一些事情，可以利用Promsie链式调用
	objElement.requesetFullscreen().then(()=>{
	//... do something
	},(err)=>{
	console.log(err.message)
	});
	//也可以采用async/await来分布调用
	// return new Promise((resolve, reject) => {
  //   document.querySelector('.parent-wnd').childNodes[wndIndex].requestFullscreen().then(() => {
  //     resolve()
  //   }, (err) => {
  //     console.log(err.message)
  //     reject(new Error(err.message))
  //   })
  // });
	//再需要do something的地方进行调用
	//await clickFullScreen();
	//... do something
}

这里需要注意Chrome浏览器需要特殊处理，对于待全屏的元素，需要指定{ width:100%; height:100%}

全屏检测

一般的，我们通过监听document.fullscreenElement是否存在即可，如果处于全屏状态，这个值不为空，否则为空(null)

if(!document.fullscreenElement){
//...do something
}else{
//...do other
}

但是这里有个坑，就是Chrome浏览器（webkit内核）在全屏下是无法监听键盘事件的，如果想在退出全屏下做一些事情，在Chrome浏览器下需要依赖resize事件。

this.__resizeHanlder = this.lodash.debounce(() => {
if (!document.fullscreenElement) { // webkit下全屏无法监听键盘事件，所以只能通过resize事件来监听
  this.isFullScreen = false
}
if (this.hasInit && !this.isFullScreen) {
  this.initWebCtrl()//退出全屏做的事情
}
}, 150)
window.addEventListener('resize', this.__resizeHanlder)