From 2226dee5a3abcbe7da1bbc9b27c4e9ee6b973679 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Fri, 5 Jun 2020 19:11:36 +0530
Subject: [PATCH] implement conferece video call with dynamic api

---
 src/api/menu.js         |   5 ++
 src/pages/Meet/meet.vue | 196 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 201 insertions(+)
 create mode 100644 src/pages/Meet/meet.vue

diff --git a/src/api/menu.js b/src/api/menu.js
index 5c5a6b5..12fcb1c 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -356,6 +356,11 @@ const teacherMenu = [{
 
         ]
     },
+    {
+        title: 'Meet',
+        name: 'Meet',
+        icon: '/static/icon/parents.png',
+    }
 ];
 
 // reorder menu
diff --git a/src/pages/Meet/meet.vue b/src/pages/Meet/meet.vue
new file mode 100644
index 0000000..7b61d31
--- /dev/null
+++ b/src/pages/Meet/meet.vue
@@ -0,0 +1,196 @@
+<template>
+  <v-container fluid class="body-color">
+    <v-card flat class="elevation-0 transparent">
+      <v-flex xs12>
+        <v-layout>
+          <v-flex lg2>
+            <v-select
+              :items="addclass"
+              label="Select Class"
+              v-model="selectStudents.classId"
+              item-text="classNum"
+              item-value="_id"
+              name="Select Class"
+              :rules="classRules"
+              class="ml-4"
+            ></v-select>
+          </v-flex>
+          <!-- <v-flex xs3>
+            <v-select
+              :items="addSection"
+              label="Select Section"
+              v-model="selectStudents.selectSection"
+              item-text="name"
+              item-value="_id"
+              name="Select Section"
+              :rules="sectionRules"
+              class="px-2"
+              required
+            ></v-select>
+          </v-flex>-->
+          <v-flex xs3>
+            <v-btn @click="createRoom()" round dark :loading="loading" class="add-button mt-3">Find</v-btn>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-card>
+    <div id="jitsi-container"></div>
+  </v-container>
+</template>
+<script>
+import http from "@/Services/http.js";
+import moment from "moment";
+
+export default {
+  data() {
+    return {
+      token: "",
+      selectStudents: {},
+      classRules: [v => !!v || " Class Name is required"],
+      sectionRules: [v => !!v || " Section Name is required"],
+      addclass: [],
+      addSection: [],
+      loading: false,
+      room: "",
+      username: "",
+      roomPassword: ""
+    };
+  },
+  methods: {
+    startConference() {
+      var _this = this;
+      try {
+        const domain = "meet.jit.si";
+        const options = {
+          audioInput: "<deviceLabel>",
+          audioOutput: "<deviceLabel>",
+          videoInput: "<deviceLabel>",
+          roomName: this.room,
+          height: 500,
+          parentNode: document.getElementById("jitsi-container"),
+          interfaceConfigOverwrite: {
+            filmStripOnly: false,
+            SHOW_JITSI_WATERMARK: false,
+            TOOLBAR_BUTTONS: [
+              "microphone",
+              "camera",
+              "closedcaptions",
+              "desktop",
+              "fullscreen",
+              "fodeviceselection",
+              "hangup",
+              "profile",
+              "info",
+              "chat",
+              // "recording",
+              "livestreaming",
+              "etherpad",
+              "sharedvideo",
+              "settings",
+              "raisehand",
+              "videoquality",
+              "filmstrip",
+              "invite",
+              "feedback",
+              "stats",
+              "shortcuts",
+              "tileview"
+            ]
+          },
+          configOverwrite: {
+            disableSimulcast: false
+          },
+          teacherName: "",
+          romm: ""
+        };
+
+        this.api = new JitsiMeetExternalAPI(domain, options);
+        this.api.addEventListener("videoConferenceJoined", () => {
+          console.log("Local User Joined");
+
+          _this.api.executeCommand("displayName", _this.username);
+          _this.api.executeCommand("password", this.roomPassword);
+        });
+      } catch (error) {
+        console.error("Failed to load Jitsi API", error);
+      }
+    },
+    openRoom() {
+      // verify the JitsiMeetExternalAPI constructor is added to the global..
+      // if (this.teacherName != "" || this.room != "") {
+      //   if (window.JitsiMeetExternalAPI) {
+      //     // var person = prompt("Please enter your name:", "Rabie");
+      //     if (person != null || person != "") this.username = this.teacherName;
+      //     var room = prompt("Please enter your room:", "Test Room");
+      //     if (room != null || room != "") this.room = this.room;
+      //     this.startConference();
+      //   } else alert("Jitsi Meet API script not loaded");
+      // }
+    },
+    getClassData() {
+      http()
+        .get("/getClassesList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.addclass = response.data.data;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+            this.$store.dispatch("Role", null);
+          }
+        });
+    },
+    createRoom() {
+      this.showLoader = true;
+      var classId = {
+        classId: this.selectStudents.classId
+      };
+      http()
+        .post("/createRoom", classId)
+        .then(response => {
+          // this.addSection = response.data.data;
+          console.log("CREATE___ROOOM", response.data);
+          this.room = response.data.data.roomName;
+          this.username = response.data.data.teacherName;
+          this.roomPassword = response.data.data.roomPassword;
+          var this_ = this;
+          if (this.username != "" || this.room != "") {
+            if (window.JitsiMeetExternalAPI) {
+              // var person = prompt("Please enter your name:", "Rabie");
+              if (this_.username != null || this_.username != "") {
+                this.username = this.username;
+              }
+              // var room = prompt("Please enter your room:", "Test Room");
+              if (this_.room != null || this_.room != "") {
+                this.room = this.room;
+              }
+              this.startConference();
+            } else alert("Jitsi Meet API script not loaded");
+          }
+          this.showLoader = false;
+        })
+        .catch(err => {
+          this.showLoader = false;
+        });
+    }
+  },
+
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getClassData();
+    // this.openRoom();
+  }
+};
+</script>
+
+
+<style>
+#jitsi-container {
+  height: 100vh;
+}
+</style>
\ No newline at end of file
-- 
2.0.0