iridium/neko
2
2
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2024-07-24 14:40:50 +12:00
Code Issues Packages Projects Releases Wiki Activity

webrtc with video.

Browse Source
This commit is contained in:
Miroslav Šedivý 2020-11-05 18:44:36 +01:00
parent e99047963c
commit f857808497
1 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Neko.vue
View File

@ -1,14 +1,17 @@
<template>
<div>
<h1>Hello world, Neko.</h1>
<button @click="connect()">Connect</button>
<button @click="disconnect()">Disonnect</button>
<button @click="send()">Send</button>
<button @click="send()">Send</button><br />
websocket_state: {{ websocket_state }}<br />
webrtc_state: {{ webrtc_state }}<br />
<video ref="video" />
</div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from 'vue-property-decorator'
import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
import { NekoWebSocket } from './internal/websocket'
import { NekoWebRTC } from './internal/webrtc'
@ -16,9 +19,14 @@
name: 'neko',
})
export default class extends Vue {
@Ref('video') readonly _video!: HTMLVideoElement
protected _websocket?: NekoWebSocket
protected _webrtc?: NekoWebRTC
websocket_state = 'disconnected'
webrtc_state = 'disconnected'
public connect() {
try {
this._websocket?.connect('ws://192.168.1.20:3000/', 'admin')
@ -37,7 +45,7 @@
this._websocket = new NekoWebSocket()
this._webrtc = new NekoWebRTC()
this._websocket?.on('message', async (event, payload) => {
this._websocket?.on('message', async (event: string, payload: any) => {
if (event == 'signal/provide') {
try {
let sdp = await this._webrtc?.connect(payload.sdp, payload.lite, payload.ice)
@ -47,9 +55,42 @@
console.log(event, payload)
}
})
this._websocket?.on('connecting', () => {
this.websocket_state = 'connecting'
})
this._websocket?.on('connected', () => {
this.websocket_state = 'connected'
})
this._websocket?.on('disconnected', () => {
this.websocket_state = 'disconnected'
this._webrtc?.disconnect()
})
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', () => {
this.webrtc_state = 'connecting'
})
this._webrtc?.on('connected', () => {
this.webrtc_state = 'connected'
})
this._webrtc?.on('disconnected', () => {
this.webrtc_state = 'disconnected'
})
}
}
</script>