show livestream video on html page with video.js

默认demo 是 index.7.8.4.html

参考： localStorage方式： https://cloud.tencent.com/developer/article/1360027 https://blog.csdn.net/weixin_44733660/article/details/124122112

worker方式： https://developer.mozilla.org/zh-CN/docs/Web/API/Worker/Worker https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

多tab相互之间传递参数的方式 1、如果是同域名下，优先 localStorage 监听的方式 window.onstorage = function (e) { console.log("onstorage",e.key, e.oldValue, e.newValue) } window.addEventListener('storage', (e) => { console.log("addEventListener",e.key, e.oldValue, e.newValue) }) 可以监听同域名下的 localStorage 得变动

2、如果不同域名，可以使用 iframe 作为中转，此种情况又分为两种 A：这里有三个页面，iframe 的 bridge、one、two，三个页面都在不同域名下，要求one 和 two 都能相互通信； bridge 主要代码: window.addEventListener('message', function (e) { // 接受到父文档的消息后，广播给其他的同源页面 localStorage.setItem('token', e.data); }); window.addEventListener("storage", function (ev) { if (ev.key == 'token') { window.parent.postMessage(ev.newValue, '*'); } });

则 one 和 two 都需要引入 bridge，并且 one 和 two 主要需要以下代码 1)向 嵌入的 iframe 传值 document.querySelector('iframe').contentWindow.postMessage(ipt.value, '*'); 2)从 iframe 获取 值 window.addEventListener('message', function (e) { if (e.data) { consol.log(e.data) } });

B:这里有三个页面，iframe 的 bridge、one、two，其中bridge、one 在一个域名下，two在另一个域名下 则two需要像A一样引入 iframe 并且实现上述 传值取值操作 one 仅需设置自己的 localStorage 就可以了，其他页面 two 打开的 iframe 中的已经有 storage 监听，他会把数据传给 two

因为随意被引入iframe可能出现其他问题，所以可以提前在Nginx添加header限制可以引入的域名，方便iframe引入的管控

//add_header X-Frame-Options SAMEORIGIN; 仅能自身域名下引入

允许其他域名下引入 //add_header X-Frame-Options “Allow-From https://mytv.eastobacco.dev”; // add_header X-Frame-Options “Allow-From https://tv.eastobacco.dev”;

3、work.js 多进程通信 经过测试仅仅支持同域名下，跨域被浏览器限制的死死的。

js代码： onmessage = function(e) { console.log('Worker: Message received from main script'); if (e.data) { postMessage(e.data); } }

index 代码：

Worker 初始化代码： const myWorker = new Worker("https://127.0.0.1/temp/worker.js");

发送代码： myWorker.postMessage(ipt.value);

接收代码： myWorker.onmessage = function(e) { console.log('Message received from worker'); }

worker.js: onmessage = function(e) { console.log('Worker: Message received from main script'); if (e.data) { postMessage(e.data); } }

SharedWorker 初始化代码： let myWorker = new SharedWorker('https://127.0.0.1/temp/sharedWorker.js', 'sharedone')

接收代码： // 监听共享线程传递的消息 myWorker.port.onmessage = (e) => { console.log('Message received from worker'); }; 发送代码： myWorker.port.postMessage(data);

sharedWorker: // 储存所有port this.ports = [] onconnect = e => { if (e.data && e.data.act) { const port = e.ports[0]; !this.ports.includes(port) && this.ports.push(port) // 监听浏览器页签发送的消息 port.onmessage = (e) => { switch (e.data.act) { case 'getData': // 广播：给所有port发消息 broadcast(e.data.data) break; case 'close': clearInvalidPort(port) break;

            default:
                break;
        }
    }
}

}

function broadcast(message) { console.log('ports', this.ports) this.ports.forEach(port => { // 给浏览器页签发消息 port.postMessage(message) }) }

function clearInvalidPort(port) { const index = this.ports.findIndex(item => item === port); if (~index) { this.ports.splice(index, 1); } }