seepur/resources/scripts/applications/home/views/call.vue

85 lines
2.2 KiB
Vue
Raw Normal View History

2020-04-12 14:25:42 +00:00
<template>
<div class="wrapper">
<div v-if="loading">
<Loading />
</div>
2020-04-12 23:33:24 +00:00
<div v-else class="is-flex">
2020-04-13 00:02:56 +00:00
<video
:src-object.camel="localStream"
autoplay="autoplay"
muted="true"
style="max-width:40%"
/>
<video :src-object.camel="remoteStream" autoplay="autoplay" style="max-width:40%" />
2020-04-12 14:25:42 +00:00
</div>
</div>
</template>
<script lang="ts">
import Loading from "../../shared/components/Loading/Loading.vue";
import WebsocketService from "../scripts/websocket.service";
2020-04-12 23:33:24 +00:00
import CallManager, { ECallEvents } from "../classes/call.manager";
2020-04-12 14:25:42 +00:00
import Services from "../../services/index";
import { mapActions, mapGetters } from "vuex";
export default {
components: {
Loading
},
name: "Call",
async created() {
this.loading = true;
try {
2020-04-12 23:33:24 +00:00
const callId = Number(this.$route.params.id);
2020-04-12 14:25:42 +00:00
const ws = await WebsocketService.getInstance();
2020-04-12 23:33:24 +00:00
this.callManager = new CallManager(ws, callId);
this.callManager.on(ECallEvents.CLOSE, this.callEnded);
const success = await this.callManager.connectToCall({
2020-04-12 23:45:05 +00:00
video: true,
2020-04-12 23:33:24 +00:00
audio: true
});
2020-04-12 14:25:42 +00:00
if (!success) {
this.notify({ message: "Can find this call...", level: "danger" });
this.$router.push({ path: `/` });
return false;
}
2020-04-12 23:53:24 +00:00
this.localStream = await this.callManager.getUserMedia();
2020-04-12 23:33:24 +00:00
this.remoteStream = this.callManager.getRemoteStream();
2020-04-12 14:25:42 +00:00
this.notify({ message: "Connected!", level: "success" });
} catch (e) {
console.error(e);
this.notify({ message: e.message, level: "danger" });
}
this.loading = false;
},
async beforeDestroy() {
console.log("destroyed");
2020-04-12 23:33:24 +00:00
this.callManager.close();
2020-04-12 14:25:42 +00:00
return true;
},
methods: {
2020-04-12 23:33:24 +00:00
async setupCall(): Promise<boolean> {
return true;
},
callEnded(callId) {
this.notify({ message: `Call #${callId} Ended` });
this.$router.push({ path: `/` });
},
2020-04-12 14:25:42 +00:00
...mapActions(["notify"])
},
computed: {
...mapGetters([])
},
data() {
return {
loading: true,
2020-04-12 23:33:24 +00:00
localStream: new MediaStream(),
remoteStream: new MediaStream(),
callManager: null
2020-04-12 14:25:42 +00:00
};
},
beforeCreate: () => {}
};
</script>