基于MSE的云手机投流组件库,websocket接收h264裸流,控制流基于video-controller-next
本地node version >= 18.0
- 视频控制同一个websocket,修改
example/single.html
下60行以后的js代码
npm install
npm run build
npm run start-single
启动浏览器打开 localhost:9091
- 视频控制不同websocket,有需要直接修改
example/multiple.html
下60行以后的js代码
npm install
npm run build
npm run start-multiple
启动浏览器打开 localhost:9092
new MSEPlayer({
videoElement: document.querySelector('#video'),
textHelperElement: document.querySelector('.video-input-helper'),
wsVideoAddress: 'wss://xxxxxx/v1/websocket/video',
buildInitVideoMsg: () => {
return {"cmd":"startvideo","device_id":xxx,"test_id_str":"xxx","controlkey":"xxx","video_config":""};
}
});
new MSEPlayer({
videoElement: document.querySelector('#video'),
textHelperElement: document.querySelector('.video-input-helper'),
wsVideoAddress: 'wss://xxxxx/v1/websocket/video',
buildInitVideoMsg: () => {
return {"cmd":"startvideo","device_id":xxx,"test_id_str":"xxx","controlkey":"xxx","video_config":""};
},
// 新增
multiplexing: false,
wsCtrlAddress: 'wss://xxxxx/v1/websocket/control',
buildInitCtrlMsg: () => {
return {"xxxx": "xxxxx"};
}
});
用来展示画面的video元素
用来辅助粘贴的text input元素
连接目标的video websocket地址
用来构造websocket视频流的初始信息的模版函数(类似joinRoom)
是否video和控制流用同一个webscoket接收和发送,默认为true
连接目标的control websocket地址, 若为空则默认使用 wsVideoAddress
video和控制流使用两个webscoket(即multiplexing为false),新建控制流时的初始信息的模版函数
websocket的心跳信息构造函数,返回一个对象。 对象的结构为单个
{
"xxx": "xxx"
}
复合分别指定
{
"video": { "xxx": "xxx" },
"control": { "xxx": "xxx" }
}
默认为 { type: 'heartbeat' }
指定需要发送心跳的websocket流,默认为空
指定发送心跳的间隔时间, 默认30000ms
模拟点击对端手机的某个功能按键键
模拟发送转屏信号
模拟发送回到主页信号
卸载player实例,关闭websocket连接以及卸载eventlistener
重新连接