aboutsummaryrefslogtreecommitdiff
path: root/hsm-web/Client/src/CameraStream.vue
diff options
context:
space:
mode:
Diffstat (limited to 'hsm-web/Client/src/CameraStream.vue')
-rw-r--r--hsm-web/Client/src/CameraStream.vue103
1 files changed, 0 insertions, 103 deletions
diff --git a/hsm-web/Client/src/CameraStream.vue b/hsm-web/Client/src/CameraStream.vue
deleted file mode 100644
index 1defed2..0000000
--- a/hsm-web/Client/src/CameraStream.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
- <h2>Camera Stream</h2>
- <button @click='toggleStream()' :disabled='disabled'>{{ command }}</button>
- <video ref='player' muted></video>
-</template>
-
-<script>
-import axios from 'axios'
-import config from './config'
-import GstWebRTCAPI from '@tomoxv/gstwebrtc-api/src/gstwebrtc-api.js'
-import { useTemplateRef } from 'vue'
-
-export default {
- data() {
- return {
- api: null,
- listener: null,
- player: null,
- session: null,
-
- command: 'Loading',
- disabled: true,
- streaming: false
- }
- },
- mounted() {
- this.player = useTemplateRef('player')
- this.monitor()
- this.bindStream()
- },
- methods: {
- // Continuously checks if WebRTC stream is running on server
- async monitor() {
- const res = await axios.get(config.api + '/isStreaming')
-
- switch (res.status) {
- case 200:
- this.command = res.data ? 'Stop' : 'Play'
- this.disabled = false
- this.streaming = res.data
- break
- default:
- this.command = 'Error'
- this.disabled = true
- this.streaming = false
- }
-
- setTimeout(this.monitor, 1000)
- },
-
- // Toggles WebRTC stream
- async toggleStream() {
- const ep = this.streaming ? '/stopStream' : '/startStream'
- const res = await axios.get(config.api + ep)
-
- if (res.status != 200) {
- console.error(res)
- }
- },
-
- // Binds WebRTC stream to video element
- bindStream() {
- this.api = new GstWebRTCAPI({
- meta: { name: 'WebClient-' + Date.now() },
- signalingServerUrl: 'ws://' + window.location.hostname + ':8443'
- })
-
- this.listener = {
- producerAdded: (producer) => {
- console.log("Producer added", producer)
-
- this.session = this.api.createConsumerSession(producer.id)
- this.session.addEventListener('streamsChanged', () => {
- if (this.session.streams.length > 0) {
- this.player.srcObject = this.session.streams[0]
- this.player.play()
- }
- })
-
- this.session.connect()
- },
-
- producerRemoved: (producer) => {
- console.log("Producer removed", producer)
-
- this.player.pause()
- this.player.srcObject = null
- this.session = null
- }
- }
-
- this.api.registerProducersListener(this.listener)
- }
- }
-}
-</script>
-
-<style>
-video {
- height: 360px;
- width: 480px;
-}
-</style>