引言
在做监控视频时，一个很重要需求就是视频全屏以及退出。下面就讲讲用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)
