aboutsummaryrefslogtreecommitdiff
path: root/hsm-web/Client/src/CamStream.vue
diff options
context:
space:
mode:
Diffstat (limited to 'hsm-web/Client/src/CamStream.vue')
-rw-r--r--hsm-web/Client/src/CamStream.vue20
1 files changed, 11 insertions, 9 deletions
diff --git a/hsm-web/Client/src/CamStream.vue b/hsm-web/Client/src/CamStream.vue
index 9c6e202..60cd44d 100644
--- a/hsm-web/Client/src/CamStream.vue
+++ b/hsm-web/Client/src/CamStream.vue
@@ -3,7 +3,9 @@
<div id='playerCont'>
<video id='player' muted></video>
</div>
- <button @click='toggleStream()' :disabled='disabled'>{{ command }}</button>
+ <button @click='toggleStream()' :disabled='disabled'>
+ {{ command }}
+ </button>
</template>
<script>
@@ -33,7 +35,7 @@ export default {
// 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'
@@ -45,7 +47,7 @@ export default {
this.disabled = true
this.streaming = false
}
-
+
setTimeout(this.monitor, 1000)
},
@@ -69,7 +71,7 @@ export default {
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) {
@@ -77,19 +79,19 @@ export default {
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)
}
}
@@ -98,7 +100,7 @@ export default {
<style>
#playerCont {
- border: 1px solid black;
+ background-color: #073642;
}
#player {
aspect-ratio: 32 / 27;