2020-11-07 08:49:05 +13:00
|
|
|
<template>
|
|
|
|
<div ref="component" class="component">
|
2020-11-08 03:08:39 +13:00
|
|
|
<div
|
|
|
|
ref="container"
|
|
|
|
class="player-container"
|
|
|
|
v-show="state.websocket == 'connected' && state.webrtc == 'connected'"
|
|
|
|
>
|
2020-11-07 08:49:05 +13:00
|
|
|
<video ref="video" />
|
|
|
|
<neko-overlay
|
|
|
|
:webrtc="webrtc"
|
|
|
|
:screenWidth="state.screen_size.width"
|
|
|
|
:screenHeight="state.screen_size.height"
|
|
|
|
:scrollSensitivity="5"
|
|
|
|
:scrollInvert="true"
|
2020-11-07 10:19:41 +13:00
|
|
|
:isControling="state.is_controlling"
|
2020-11-07 08:49:05 +13:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.component {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.player-container {
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
video {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
background: #000;
|
|
|
|
|
|
|
|
&::-webkit-media-controls {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { Vue, Component, Ref, Watch, Prop } from 'vue-property-decorator'
|
|
|
|
import ResizeObserver from 'resize-observer-polyfill'
|
2020-11-08 01:26:07 +13:00
|
|
|
import EventEmitter from 'eventemitter3'
|
2020-11-07 08:49:05 +13:00
|
|
|
|
|
|
|
import { NekoWebSocket } from '~/internal/websocket'
|
|
|
|
import { NekoWebRTC } from '~/internal/webrtc'
|
2020-11-07 11:27:07 +13:00
|
|
|
import { NekoMessages } from '~/internal/messages'
|
2020-11-07 08:49:05 +13:00
|
|
|
|
2020-11-07 10:19:41 +13:00
|
|
|
import NekoState from '~/types/state'
|
2020-11-07 08:49:05 +13:00
|
|
|
import Overlay from './overlay.vue'
|
|
|
|
|
2020-11-08 01:26:07 +13:00
|
|
|
export interface NekoEvents {
|
|
|
|
connecting: () => void
|
|
|
|
connected: () => void
|
|
|
|
disconnected: (error?: Error) => void
|
|
|
|
}
|
|
|
|
|
2020-11-07 08:49:05 +13:00
|
|
|
@Component({
|
|
|
|
name: 'neko-canvas',
|
|
|
|
components: {
|
|
|
|
'neko-overlay': Overlay,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
export default class extends Vue {
|
|
|
|
@Ref('component') readonly _component!: HTMLElement
|
|
|
|
@Ref('container') readonly _container!: HTMLElement
|
|
|
|
@Ref('video') public readonly video!: HTMLVideoElement
|
|
|
|
|
2020-11-08 03:08:39 +13:00
|
|
|
public events = new EventEmitter()
|
2020-11-07 10:19:41 +13:00
|
|
|
private observer = new ResizeObserver(this.onResize.bind(this))
|
2020-11-07 08:49:05 +13:00
|
|
|
private websocket = new NekoWebSocket()
|
|
|
|
private webrtc = new NekoWebRTC()
|
2020-11-08 03:08:39 +13:00
|
|
|
private messages = new NekoMessages(this.events)
|
2020-11-07 08:49:05 +13:00
|
|
|
|
|
|
|
private state = {
|
2020-11-07 10:19:41 +13:00
|
|
|
id: null,
|
|
|
|
display_name: null,
|
2020-11-07 08:49:05 +13:00
|
|
|
screen_size: {
|
2020-11-07 10:19:41 +13:00
|
|
|
width: 1280,
|
|
|
|
height: 720,
|
|
|
|
rate: 30,
|
2020-11-07 08:49:05 +13:00
|
|
|
},
|
2020-11-07 10:19:41 +13:00
|
|
|
is_controlling: false,
|
2020-11-08 01:26:07 +13:00
|
|
|
websocket: 'disconnected',
|
|
|
|
webrtc: 'disconnected',
|
2020-11-07 10:19:41 +13:00
|
|
|
} as NekoState
|
2020-11-07 08:49:05 +13:00
|
|
|
|
|
|
|
public control = {
|
|
|
|
request: () => {
|
|
|
|
this.websocket.send('control/request')
|
|
|
|
},
|
|
|
|
release: () => {
|
|
|
|
this.websocket.send('control/release')
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
public connect(url: string, password: string) {
|
|
|
|
if (this.websocket.connected) {
|
|
|
|
throw new Error('client already connected')
|
|
|
|
}
|
|
|
|
|
|
|
|
this.websocket.connect(url, password)
|
|
|
|
}
|
|
|
|
|
|
|
|
public disconnect() {
|
|
|
|
if (!this.websocket.connected) {
|
|
|
|
throw new Error('client not connected')
|
|
|
|
}
|
|
|
|
|
|
|
|
this.websocket.disconnect()
|
|
|
|
}
|
|
|
|
|
|
|
|
private mounted() {
|
|
|
|
// Update canvas on resize
|
|
|
|
this.observer.observe(this._component)
|
|
|
|
|
|
|
|
// WebSocket
|
|
|
|
this.websocket.on('message', async (event: string, payload: any) => {
|
|
|
|
switch (event) {
|
|
|
|
case 'signal/provide':
|
2020-11-07 10:19:41 +13:00
|
|
|
Vue.set(this.state, 'id', payload.id)
|
|
|
|
|
2020-11-07 08:49:05 +13:00
|
|
|
try {
|
|
|
|
let sdp = await this.webrtc.connect(payload.sdp, payload.lite, payload.ice)
|
2020-11-07 10:19:41 +13:00
|
|
|
this.websocket.send('signal/answer', { sdp, displayname: this.state.display_name })
|
2020-11-07 08:49:05 +13:00
|
|
|
} catch (e) {}
|
|
|
|
break
|
|
|
|
case 'screen/resolution':
|
|
|
|
Vue.set(this.state, 'screen_size', payload)
|
|
|
|
this.onResize()
|
|
|
|
break
|
2020-11-07 10:19:41 +13:00
|
|
|
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
|
2020-11-07 08:49:05 +13:00
|
|
|
default:
|
2020-11-07 11:27:07 +13:00
|
|
|
// @ts-ignore
|
|
|
|
if (typeof this.messages[event] === 'function') {
|
|
|
|
// @ts-ignore
|
|
|
|
this.messages[event](payload)
|
|
|
|
} else {
|
|
|
|
console.log(`unhandled websocket event '${event}':`, payload)
|
|
|
|
}
|
2020-11-07 08:49:05 +13:00
|
|
|
}
|
|
|
|
})
|
|
|
|
this.websocket.on('connecting', () => {
|
2020-11-08 01:26:07 +13:00
|
|
|
Vue.set(this.state, 'websocket', 'connecting')
|
2020-11-07 08:49:05 +13:00
|
|
|
})
|
|
|
|
this.websocket.on('connected', () => {
|
2020-11-08 01:26:07 +13:00
|
|
|
Vue.set(this.state, 'websocket', 'connected')
|
2020-11-07 08:49:05 +13:00
|
|
|
})
|
|
|
|
this.websocket.on('disconnected', () => {
|
2020-11-08 01:26:07 +13:00
|
|
|
Vue.set(this.state, 'websocket', 'disconnected')
|
2020-11-07 08:49:05 +13:00
|
|
|
this.webrtc.disconnect()
|
|
|
|
})
|
|
|
|
|
|
|
|
// WebRTC
|
|
|
|
this.webrtc.on('track', (event: RTCTrackEvent) => {
|
|
|
|
const { track, streams } = event
|
|
|
|
if (track.kind === 'audio') {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
// Create stream
|
|
|
|
if ('srcObject' in this.video) {
|
|
|
|
this.video.srcObject = streams[0]
|
|
|
|
} else {
|
|
|
|
// @ts-ignore
|
|
|
|
this.video.src = window.URL.createObjectURL(streams[0]) // for older browsers
|
|
|
|
}
|
|
|
|
|
|
|
|
this.video.play()
|
|
|
|
})
|
|
|
|
this.webrtc.on('connecting', () => {
|
2020-11-08 01:26:07 +13:00
|
|
|
Vue.set(this.state, 'webrtc', 'connecting')
|
2020-11-07 08:49:05 +13:00
|
|
|
})
|
|
|
|
this.webrtc.on('connected', () => {
|
2020-11-08 01:26:07 +13:00
|
|
|
Vue.set(this.state, 'webrtc', 'connected')
|
2020-11-08 03:08:39 +13:00
|
|
|
this.events.emit('connect')
|
2020-11-07 08:49:05 +13:00
|
|
|
})
|
|
|
|
this.webrtc.on('disconnected', () => {
|
2020-11-08 01:26:07 +13:00
|
|
|
Vue.set(this.state, 'webrtc', 'disconnected')
|
2020-11-07 08:49:05 +13:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
private beforeDestroy() {
|
|
|
|
this.webrtc.disconnect()
|
|
|
|
this.websocket.disconnect()
|
|
|
|
}
|
|
|
|
|
|
|
|
private onResize() {
|
|
|
|
console.log('Resize event triggered.')
|
|
|
|
|
|
|
|
const { width, height } = this.state.screen_size
|
|
|
|
const screen_ratio = width / height
|
|
|
|
|
|
|
|
const { offsetWidth, offsetHeight } = this._component
|
|
|
|
const canvas_ratio = offsetWidth / offsetHeight
|
|
|
|
|
|
|
|
// Vertical centering
|
2020-11-07 10:19:41 +13:00
|
|
|
if (screen_ratio > canvas_ratio) {
|
2020-11-07 08:49:05 +13:00
|
|
|
const vertical = offsetWidth / screen_ratio
|
|
|
|
this._container.style.width = `${offsetWidth}px`
|
|
|
|
this._container.style.height = `${vertical}px`
|
|
|
|
this._container.style.marginTop = `${(offsetHeight - vertical) / 2}px`
|
|
|
|
this._container.style.marginLeft = `0px`
|
|
|
|
}
|
|
|
|
// Horizontal centering
|
2020-11-07 10:19:41 +13:00
|
|
|
else if (screen_ratio < canvas_ratio) {
|
2020-11-07 08:49:05 +13:00
|
|
|
const horizontal = screen_ratio * offsetHeight
|
|
|
|
this._container.style.width = `${horizontal}px`
|
|
|
|
this._container.style.height = `${offsetHeight}px`
|
|
|
|
this._container.style.marginTop = `0px`
|
|
|
|
this._container.style.marginLeft = `${(offsetWidth - horizontal) / 2}px`
|
|
|
|
}
|
|
|
|
// No centering
|
|
|
|
else {
|
|
|
|
this._container.style.width = `${offsetWidth}px`
|
|
|
|
this._container.style.height = `${offsetHeight}px`
|
|
|
|
this._container.style.marginTop = `0px`
|
|
|
|
this._container.style.marginLeft = `0px`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|