vue monitors sessionStorage changes
1. Project requirements
When I encountered a project recently, I clicked a button on the main interface of the PC backend system, and then a new video page popped up, as shown in the picture:
(The original design is for the pop-up window to pop up directly on monitor 2, but unfortunately I can’t do it./(ㄒoㄒ)/~~, someone who knows how to do it can give me some advice), so I can only open a new browser. The page is then dragged to display 2. Another requirement is that every time the button is clicked, a value will be passed to it, and then the video page must request the interface based on the passed value to update the page video, emmm. . . . . . I also searched for several methods, and finally chose to listen to session changes to deal with it (it may not be the best solution, but the function is realized, hahaha... You can refer to it if you need it)
2. Use tools
Because the video playback stream is obtained in real time, you need to use jsmpeg, directly use the jsmpeg.js file (included in the resource)
//视频展示页面
<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()
},
If you do not use destroy video switching, there will be two videos playing back and forth.
3. Session value transfer
The value of enTollStationHex is set into the session after clicking the main page, popping up a new page, the
main page button event, opening a new pop-up window and setting the value like the new pop-up window sessionStorage
//主页面
openNewWind(){
let {
href}= this.$router.resolve({
path: "laneMonitoring", // 这里写的是要跳转的路由地址
});
this.newWindow = window.open(href,'newWindow','_blank');
this.$addStorageEvent('enTollStationHex',this.newSpecialTreatment.tollVehicle.laneHex,this.newWindow)
}
Before the main.js configuration,
the sessionStorage set value is found. If the new pop-up window is not closed, the value will not be set when the button is clicked again. Therefore, newWindow.sessionStorage is used to set the value in main.js, so that the new pop-up page session As long as you click the button on the main page, the value will be set in real time.
/**
* @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);
}