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