直播项目（vue）总结与注意点

1、iOS上息屏、切后台可能会出现断开连接的情况，需要加心跳包

2、（针对嵌入在APP中的H5页面）如果需要需要监听横竖屏（监听window.orientation或者innerWidth），可以在监听方法外设置少许延时，防止监听方法过早得执行

3、移动端的video设置autoplay属性是无效的，播放需要用户点击

4、video在iOS和安卓中都会自动全屏，可以添加： webkit-playsinline="true" playsinline x5-playsinline="true"；阻止自动全屏

5、vue中socket.io的使用:

main.js中引入：

import VueSocketio from 'vue-socket.io';

Vue.use(VideoPlayer,VueSocketio)

用到的组件中：

        this.socketTimeout && clearTimeout(this.socketTimeout);

        this.socketTimeout = setTimeout(() => {

            this.$socketio = io('http://io.xxx.com')

            var socket = this.$socketio

            socket.on("connect", (res) => {              //连接socket

              console.log('connected,socketid为',socket.id,this.roomId)

              socket.emit('join', this.roomId)        //加入房间

              if (this.heartBeatInterval) {             

                clearInterval(this.heartBeatInterval);

              }

              this.heartBeatInterval = setInterval(() => {  //发送心跳包，向服务器证明自己还活着。。

                socket.emit('HEARTBEAT');

              }, 20000)

            });

            socket.on('disconnect', (reason) => {      //断线判断是否重连

                console.log('reason',reason)

                if (reason === 'io server disconnect') {

                    socket.connect();

                }else if(reason === 'io client disconnect'){

                    socket.close();

                }

            });

            socket.on('message', (res) => {              //调用接口后服务端返回的socket内容,根据标识执行不同的代码

                if(res.eventType == "TEAMLIKE"){

                    if(res.teamId == this.teamRight.id){

                        // this.teamRight.like_count = res.likeCount

                        this.$set(this.teamRight,'like_count',res.likeCount)

                        console.log(this.teamRight.like_count)

                    }else{

                        // this.teamLeft.like_count = res.likeCount

                        this.$set(this.teamLeft,'like_count',res.likeCount)

                        console.log(this.teamLeft.like_count)

                    }

                }

        }, 50);

6、打包上线时：

使用‘/static/XXX’

js、CSS加载不到资源，修改config/index.js中assetsPublicPath为‘./’

只有css中的background资源取不到时，①、修改build/utils.js中找到

return ExtractTextPlugin.extract({

        use: loaders,

        fallback: 'vue-style-loader'

      })

添加：publicPath: '../../',

②、可能后端未将图片放入相应static文件夹

7、微信授权时出现部分手机在微信浏览器中打不开授权界面的情况，这种情况可能是浏览器缓存的原因，可以在重定向URL中加入时间戳，保证每次请求的地址都是是最新的：

let redirectUrl = encodeURIComponent('http://app.binvshe.com/weixin/redirect?uri=' + uri +'?r=' + date.getTime() + '&hash=authorize')

连接中拼接入：r=(唯一值)

未解决的难点：

1、嵌入APP中的H5页面横竖屏切换时，video会暂停；这种情况在其他浏览器中不会出现

2、安卓中点击输入框，弹出的软键盘会把输入框遮住，尝试过1、scrollIntoViewIfNeeded()2、document.body.scrollTop = document.body.scrollHeight仍无法解决(最后发现是安卓APP端代码问题)

3、playsinline+webkit-playsinline在iOS中基本上可以完美解决自动全屏的问题，但是在安卓的微信浏览器中会导致视频无法播放，但是如果不加的话又会导致iOS及安卓其他浏览器中video自动全屏