vue监听sessionStorage变化（浏览器页面间的通信）+ jsmpeg

vue监听sessionStorage变化

1、项目需求

最近遇到项目，是在pc后台系统主界面，点击一个按钮，然后弹窗弹出一个新的视频页面，如图：

（本来设计是弹窗直接在显示器2上面弹出，可惜臣妾做不到啊/(ㄒoㄒ)/~~，有会的大佬指点一下），所以只能做成打开一个新的浏览器页面然后拖拽到显示器2上，这里面还有个需求就是每次点击按钮会传一个值过去，然后视频页面要根据传过来的值请求接口，更新页面视频，emmm。。。。。。我也是百度了好几种方法，最后还是选择监听session的变化来处理（可能不是最好的方案，但是功能实现了，哈哈哈。。。。。需要的可以参考一下）

2、使用工具

因为是实时获取视频播放流的，所以需要用到jsmpeg，直接使用jsmpeg.js文件（资源内有）

//视频展示页面
<canvas id="video-canvas"></canvas>
 // template里面的容器一定是canvas，不能是div，不然会报错
//直接引入js文件
import JSMpeg from '../utils/jsmpeg'

methods: {
	getPath(){
        const data = {
        user:window.sessionStorage.getItem('userName'),
        laneHex:window.sessionStorage.getItem('enTollStationHex')
        }
        this.$API.getPlayHttp(data).then(res=>{
        const result = res.result || {}
        if(!!result.videoUrl){ 
        //接口请求获取到的result.videoUrl是ws地址的
           var canvas = document.getElementById("video-canvas");
            this.player = new JSMpeg.Player(result.videoUrl, {canvas: canvas,autoplay: true });
        }else{
          this.$message.error('暂无视频数据')
        }
      }).catch(err=>{
        console.log(err)
        this.$message.error(err) 
      })
    }
}

mounted() {
   window.addEventListener('setItem', (e) => {
     if(e.newValue != this.oldData.laneHex){
        this.$API.getStopHttp(this.oldData)//终止视频传输
        this.player.destroy()//清除上一次视频
        clearInterval(this.timer);
        //项目中视频流是30秒请求一次的，换地址的话要终止前面视频流的定时器
        this.getPath()
      }
    });
    this.getPath()
  },

如果不使用destroy视频切换的时候就会出现两个视频来回播放

3、session传值

enTollStationHex这个值是点击主页面，弹出新的页面后set进session内的，
主页面按钮事件，打开新的弹窗并像新的弹窗sessionStorage set值

//主页面
openNewWind(){
      let {href}= this.$router.resolve({
        path: "laneMonitoring",   // 这里写的是要跳转的路由地址  
      });
      this.newWindow = window.open(href,'newWindow','_blank');
      this.$addStorageEvent('enTollStationHex',this.newSpecialTreatment.tollVehicle.laneHex,this.newWindow)
    }

main.js配置
之前sessionStorage set值发现新的弹窗如果不关闭，再次点击按钮的时候值就set不进去了，所以main.js里面用newWindow.sessionStorage去set值，这样新弹出的页面session里面的值只要点击主页面的按钮就会实时set值进去

/**
 * @param { string } key 键
 * @param { string } data 要存储的数据
 * @param { string } newWindow打开新页面的window值
 * @returns 
 */
Vue.prototype.$addStorageEvent = function (key, data,newWindow) {
  // 创建一个StorageEvent事件
  var newStorageEvent = document.createEvent('StorageEvent');
  const storage = {
      setItem: function (k, val) {
        newWindow.sessionStorage.setItem(k, val);
          // 初始化创建的事件
          newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
          // 派发对象
          newWindow.dispatchEvent(newStorageEvent);
      }
  }
  return storage.setItem(key, data);
}