vue monitorea los cambios de almacenamiento de sesión
1. Requisitos del proyecto
Cuando encontré un proyecto recientemente, hice clic en un botón en la interfaz principal del sistema backend de la PC y luego apareció una nueva página de video, como se muestra en la imagen:
(El diseño original es que la ventana emergente aparezca directamente en el monitor 2, pero desafortunadamente no puedo hacerlo./(ㄒoㄒ)/~~, alguien que sepa cómo hacerlo puede darme algún consejo. ), por lo que solo puedo abrir un nuevo navegador. Luego, la página se arrastra para mostrar 2. Otro requisito es que cada vez que se hace clic en el botón, se le pasará un valor y luego la página de video debe solicitar la interfaz según el valor pasado para actualizar el vídeo de la página, emmm. . . . . . También busqué varios métodos y finalmente elegí escuchar los cambios de sesión para solucionarlo (puede que no sea la mejor solución, pero la función se realiza, jajaja ... Puedes consultarlo si lo necesitas)
2. Utilice herramientas
Debido a que la transmisión de reproducción de video se obtiene en tiempo real, debe usar jsmpeg, use directamente el archivo jsmpeg.js (incluido en el recurso)
//视频展示页面
<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()
},
Si no utiliza la conmutación de destrucción de video, se reproducirán dos videos de un lado a otro.
3. Transferencia del valor de la sesión
El valor de enTollStationHex se establece en la sesión después de hacer clic en la página principal, abrir una nueva página, el
evento del botón de la página principal, abrir una nueva ventana emergente y configurar el valor como la nueva ventana emergente 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)
}
Antes de la configuración de main.js,
se encuentra el valor establecido en sessionStorage. Si la nueva ventana emergente no se cierra, el valor no se establecerá cuando se haga clic nuevamente en el botón. Por lo tanto, newWindow.sessionStorage se usa para establecer el valor en main.js, para que la nueva sesión de la página emergente. Siempre que haga clic en el botón en la página principal, el valor se establecerá en tiempo real.
/**
* @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);
}