add state.

This commit is contained in:
Miroslav Šedivý 2020-11-06 22:19:41 +01:00
parent f01ce2d3fe
commit e79734f51e
3 changed files with 37 additions and 10 deletions

View File

@ -12,7 +12,7 @@
<!--websocket_state: {{ websocket_state }}<br />
webrtc_state: {{ webrtc_state }}<br />-->
<div ref="container" style="width:1280px;height:720px;border: 2px solid red;">
<div ref="container" style="width: 1280px; height: 720px; border: 2px solid red">
<neko-canvas ref="neko" />
</div>
</div>

View File

@ -9,7 +9,7 @@
:screenHeight="state.screen_size.height"
:scrollSensitivity="5"
:scrollInvert="true"
:isControling="true"
:isControling="state.is_controlling"
/>
</div>
</div>
@ -47,6 +47,7 @@
import { NekoWebSocket } from '~/internal/websocket'
import { NekoWebRTC } from '~/internal/webrtc'
import NekoState from '~/types/state'
import Overlay from './overlay.vue'
@Component({
@ -60,17 +61,20 @@
@Ref('container') readonly _container!: HTMLElement
@Ref('video') public readonly video!: HTMLVideoElement
private observer = new ResizeObserver(this.onResize.bind(this))
private websocket = new NekoWebSocket()
private webrtc = new NekoWebRTC()
private observer = new ResizeObserver(this.onResize.bind(this))
private state = {
id: null,
display_name: null,
screen_size: {
width: Number,
height: Number,
rate: Number,
width: 1280,
height: 720,
rate: 30,
},
}
is_controlling: false,
} as NekoState
private websocket_state = 'disconnected'
private webrtc_state = 'disconnected'
@ -108,15 +112,27 @@
this.websocket.on('message', async (event: string, payload: any) => {
switch (event) {
case 'signal/provide':
Vue.set(this.state, 'id', payload.id)
try {
let sdp = await this.webrtc.connect(payload.sdp, payload.lite, payload.ice)
this.websocket.send('signal/answer', { sdp, displayname: 'test' })
this.websocket.send('signal/answer', { sdp, displayname: this.state.display_name })
} catch (e) {}
break
case 'screen/resolution':
Vue.set(this.state, 'screen_size', payload)
this.onResize()
break
case 'control/release':
if (payload.id === this.state.id) {
Vue.set(this.state, 'is_controlling', false)
}
break
case 'control/locked':
if (payload.id === this.state.id) {
Vue.set(this.state, 'is_controlling', true)
}
break
default:
console.log(event, payload)
}

11
src/types/state.ts Normal file
View File

@ -0,0 +1,11 @@
interface ScreenSize {
width: number
height: number
rate: number
}
export default interface State {
id: string | null
display_name: string | null
screen_size: ScreenSize
}