百度云音视频直播全屏时与layer弹框冲突问题的解决

        前段时间项目中做视频直播用到了百度云的音视频直播LSS，由于需求需要在pc端要加一些自定义的按钮，因此需要把百度云播放器放在页面弹框里面，而layer算是比较好用的一款弹框插件，做出的效果图如图：

弹框下面还有截图的功能，截图是用H5的canvas能直接截取video标签里内容drawImage()方法，点击截图按钮效果如图：

保存按钮直接上传到服务器，可以看到图一背景还引入了百度地图，当时做这个功能的时候确实花费了一点精力，因为页面的功能比较复杂，后面会把详细的js代码po出，当是给自己的一点积累吧，不过这些都不是这篇博客的主角，这篇博客主要是解决一个百度云音视频直播全屏时与layer弹框冲突的bug，当初这个功能好不容易告一段落的时候，发现点击百度云播放器右下角的全屏按钮会出现这样的奇怪问题：

可以看到的是本来应该全屏的视频却跑到左下角去了，而且把页面的样式全挤乱了，这也太奇葩了，度娘了好久，基本上找不到解决方法，可能把百度云播放器跟layer结合使用人很少吧，没办法只能自己找问题了，之前准备看百度云播放器web sdk里面的cyberplayer.js的，结果发现头大了，那就还是从layer找原因吧，看页面的结构：感觉就是这个layui-layer类的问题，我在页面直接删除这个类，果然可以全屏了，于是就在js里面点击全屏按钮的时候移除掉这个类，果然可以全屏了：

那么在点击Esc退出全屏或者点右下角按钮恢复原屏的时候再加上layui-layer这个类不就ok了。然而，并没有我想的这么简单，在我点击Esc的时候，发现需要点两下才能添加layui-layer，点一下的时候都不进keydown事件，解决了一个问题又来了新的问题。。。正在犯难的时候想着layui-layer应该是这个弹框的主要类名，直接移除可能是会有问题，于是就看到在这个类的后面还有layui-layer-page，layer-anim，layui-layer-camera，三个类名，最后一个是我自定义弹框样式的可以不用管，那么在不移除layui-layer情况下，移除layui-layer-page和layer-anim会不会有什么变化呢，经过测试移除layer-anim也是可以全屏显示的，而且。。。在移除layer-anim后全屏，点击Esc或者右下角恢复原屏时添加layer-anim类也是可以复原的，至此bug才得到了解决，这 bug着实困扰了我一段时间。

    最后作为积累，把这个功能的全部js都贴出来，里面的截屏函数，地图引用和自定义地图控件，保存上传截图等方法还是值得积累的~~~

/**
 * Created by wyj on 2017/12/28. 门店巡视
 */
(function (define) {
    'use strict';
    define(function (require, exports, module) {
        var controller = {
            //本页面对象相关元素
             thisObject:{
                //标题
                title:"门店巡视",
                //本页面的主html
                mainHtml:null,
                //门店信息
                storeData:null,
            	//视频流参数
            	streamname:'',
            	domain:'',
            	appname:'',
            	//截图数量
            	imgCount:0,
            	//批量保存截图
            	pathListArray:[],
            	//分页参数
            	pagerData:{
                	pageSize:6,//得到每页显示的条数，默认每页显示6条
                	pageIndex:1,//得到当前页，以便向服务端请求对应页的数据，默认第一页
                	counts:"",//总数量
                	otherValue:""
            	},
            	//地图对象
            	myMap:null,
            },
            //后台的方法的url
            RepositoryUrl:"kxls/basedata/storeinspect/repository/mainRepository",
            //初始化百度地图
            initBaiduMap:function(){
            	require(['bmap'],function(bmap){
            		var myMap = new BMap.Map("map", {enableMapClick:false});//构造底图时，关闭底图可点功能
                    //地图对象公开到外面，方便其他函数调用
                    controller.thisObject.myMap = myMap;
					
					 //判断当前登录账号是集团账号还是网点账号 3--网点账号
					if(window.$context.$api.auth.getCurrentUser().usertype!=3){
					 	var size = new BMap.Size(10, 15);
						myMap.addControl(new BMap.CityListControl({
						    anchor: BMAP_ANCHOR_TOP_LEFT,
						    offset: size,
						    // 切换城市之前事件
						     onChangeBefore: function(){
						        $(".curStore",controller.thisObject.mainHtml).text("选择门店").removeAttr("data-cecode").removeAttr("data-dealerdbcode");
						        $(".curCamera",controller.thisObject.mainHtml).text("选择摄像机").removeAttr("data-cameraip");
						     },
						    // 切换城市之后事件
						    // onChangeAfter:function(){
						    //   alert('after');
						    // }
						}));
					}
					//自定义控件
					// 定义一个控件类,即function
					function storeCameraControl(){
					  // 默认停靠位置和偏移量
					  this.defaultOffset = new BMap.Size(0, 0);
					}
				
					// 通过JavaScript的prototype属性继承于BMap.Control
					storeCameraControl.prototype = new BMap.Control();
				
					// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
					// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
					storeCameraControl.prototype.initialize = function(myMap){
					 //判断当前登录账号是集团账号还是网点账号 3--网点账号
					 if(window.$context.$api.auth.getCurrentUser().usertype==3){
					 	 // 创建一个DOM元素,先创建jQuery对象
						 var myMapHeaderBox = $('<ul class="myMapHeader">'
							+	'<li style="font-size: 16px;width:17%;"><span class="glyphicon glyphicon-facetime-video"></span>视频巡检系统</li>'
							+	'<li style="width:45%;text-align:center;font-size:18px;cursor:auto;">'
							+		'<div><img src="../../../../../wx/img/yaoyiyao/dpca_logo.png" style="width: 20%;margin: 0px 10px 5px 10px;" />'+controller.thisObject.storeData[0].DealerName+'</div>'
							+	'</li>'
							+	'<li class="chooseStore" style="display:none;">'
							+ 		'<p><i class="wxls-iconfont icon-weibiaoti1fuzhi02"></i>'
							+		'<span class="curStore" data-cecode="'+controller.thisObject.storeData[0].cecode+'" data-dealerdbcode="'+controller.thisObject.storeData[0].DealerDBCode+'" data-loginStatus="'+controller.thisObject.storeData[0].loginStatus+'">选择门店</span></p>'
							+	'</li>'
							+	'<li class="chooseCamera" >'
							+		'<p><i class="glyphicon glyphicon-facetime-video" style="color:#fff"></i><span class="curCamera">选择摄像机</span></p>'
							+	'</li>'
							+	'<li class="chooseCameraList">'
							+		'<div class="cameraMenu">'
							+			'<span class="triangle-up"></span>'
							+			'<ul>'
							+			'</ul>'
							+		'</div>'
							+	'</li>'
							+	'<li class="iconBtn"><span class="glyphicon glyphicon-picture" title="图片列表"></span></li>'
							+'</ul>');
					 }else{
						 // 创建一个DOM元素,先创建jQuery对象
						 var myMapHeaderBox = $('<ul class="myMapHeader">'
							+	'<li style="font-size: 16px;width:17%;"><span class="glyphicon glyphicon-facetime-video"></span>视频巡检系统</li>'
							+	'<li style="width:45%;">'
							+		'<input class="myMapSearchInput" type="text" placeholder="搜索门店，地址" />'
							+		'<i class="icon-search" style="position:absolute;top:21px;right:15px;font-size:16px;cursor:pointer;"></i>'
							+	'</li>'
							+	'<li class="chooseStore" >'
							+ 		'<p><i class="wxls-iconfont icon-liansuoOO"></i><span class="curStore">选择门店</span></p>'
							+	'</li>'
							+	'<li class="chooseStoreList">'
							+		'<div class="storeMenu">'
							+			'<span class="triangle-up"></span>'
							+			'<ul>'
							+			'</ul>'
							+		'</div>'
							+	'</li>'
							+	'<li class="chooseCamera" >'
							+		'<p><i class="glyphicon glyphicon-facetime-video" style="color:#fff"></i><span class="curCamera">选择摄像机</span></p>'
							+	'</li>'
							+	'<li class="chooseCameraList">'
							+		'<div class="cameraMenu">'
							+			'<span class="triangle-up"></span>'
							+			'<ul>'
							+			'</ul>'
							+		'</div>'
							+	'</li>'
							+	'<li class="iconBtn"><span class="glyphicon glyphicon-picture" title="图片列表"></span></li>'
							+'</ul>');
					  }
					  // 添加DOM元素到地图中
					  myMap.getContainer().appendChild(myMapHeaderBox[0]);
					  // 将DOM元素返回
					  return myMapHeaderBox[0];
					}
					// 创建控件
					var myStoreCameraCtrl = new storeCameraControl();
					// 添加到地图当中
					myMap.addControl(myStoreCameraCtrl);