implement conferece video call with dynamic api

Neeraj Sharma
1 parent 9b444e5c30
Showing 2 changed files with 201 additions and 0 deletions Show diff stats
src/api/menu.js
src/pages/Meet/meet.vue
@@ -356,6 +356,11 @@ const teacherMenu = [{
  
         ]
     },
+    {
+        title: 'Meet',
+        name: 'Meet',
+        icon: '/static/icon/parents.png',
+    }
 ];
  
 // reorder menu
@@ -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
...	...	@@ -356,6 +356,11 @@ const teacherMenu = [{
356	356
357	357	]
358	358	},
	359	+ {
	360	+ title: 'Meet',
	361	+ name: 'Meet',
	362	+ icon: '/static/icon/parents.png',
	363	+ }
359	364	];
360	365
361	366	// reorder menu
...	...
...	...	@@ -0,0 +1,196 @@
	1	+<template>
	2	+ <v-container fluid class="body-color">
	3	+ <v-card flat class="elevation-0 transparent">
	4	+ <v-flex xs12>
	5	+ <v-layout>
	6	+ <v-flex lg2>
	7	+ <v-select
	8	+ :items="addclass"
	9	+ label="Select Class"
	10	+ v-model="selectStudents.classId"
	11	+ item-text="classNum"
	12	+ item-value="_id"
	13	+ name="Select Class"
	14	+ :rules="classRules"
	15	+ class="ml-4"
	16	+ ></v-select>
	17	+ </v-flex>
	18	+ <!-- <v-flex xs3>
	19	+ <v-select
	20	+ :items="addSection"
	21	+ label="Select Section"
	22	+ v-model="selectStudents.selectSection"
	23	+ item-text="name"
	24	+ item-value="_id"
	25	+ name="Select Section"
	26	+ :rules="sectionRules"
	27	+ class="px-2"
	28	+ required
	29	+ ></v-select>
	30	+ </v-flex>-->
	31	+ <v-flex xs3>
	32	+ <v-btn @click="createRoom()" round dark :loading="loading" class="add-button mt-3">Find</v-btn>
	33	+ </v-flex>
	34	+ </v-layout>
	35	+ </v-flex>
	36	+ </v-card>
	37	+ <div id="jitsi-container"></div>
	38	+ </v-container>
	39	+</template>
	40	+<script>
	41	+import http from "@/Services/http.js";
	42	+import moment from "moment";
	43	+
	44	+export default {
	45	+ data() {
	46	+ return {
	47	+ token: "",
	48	+ selectStudents: {},
	49	+ classRules: [v => !!v \|\| " Class Name is required"],
	50	+ sectionRules: [v => !!v \|\| " Section Name is required"],
	51	+ addclass: [],
	52	+ addSection: [],
	53	+ loading: false,
	54	+ room: "",
	55	+ username: "",
	56	+ roomPassword: ""
	57	+ };
	58	+ },
	59	+ methods: {
	60	+ startConference() {
	61	+ var _this = this;
	62	+ try {
	63	+ const domain = "meet.jit.si";
	64	+ const options = {
	65	+ audioInput: "<deviceLabel>",
	66	+ audioOutput: "<deviceLabel>",
	67	+ videoInput: "<deviceLabel>",
	68	+ roomName: this.room,
	69	+ height: 500,
	70	+ parentNode: document.getElementById("jitsi-container"),
	71	+ interfaceConfigOverwrite: {
	72	+ filmStripOnly: false,
	73	+ SHOW_JITSI_WATERMARK: false,
	74	+ TOOLBAR_BUTTONS: [
	75	+ "microphone",
	76	+ "camera",
	77	+ "closedcaptions",
	78	+ "desktop",
	79	+ "fullscreen",
	80	+ "fodeviceselection",
	81	+ "hangup",
	82	+ "profile",
	83	+ "info",
	84	+ "chat",
	85	+ // "recording",
	86	+ "livestreaming",
	87	+ "etherpad",
	88	+ "sharedvideo",
	89	+ "settings",
	90	+ "raisehand",
	91	+ "videoquality",
	92	+ "filmstrip",
	93	+ "invite",
	94	+ "feedback",
	95	+ "stats",
	96	+ "shortcuts",
	97	+ "tileview"
	98	+ ]
	99	+ },
	100	+ configOverwrite: {
	101	+ disableSimulcast: false
	102	+ },
	103	+ teacherName: "",
	104	+ romm: ""
	105	+ };
	106	+
	107	+ this.api = new JitsiMeetExternalAPI(domain, options);
	108	+ this.api.addEventListener("videoConferenceJoined", () => {
	109	+ console.log("Local User Joined");
	110	+
	111	+ _this.api.executeCommand("displayName", _this.username);
	112	+ _this.api.executeCommand("password", this.roomPassword);
	113	+ });
	114	+ } catch (error) {
	115	+ console.error("Failed to load Jitsi API", error);
	116	+ }
	117	+ },
	118	+ openRoom() {
	119	+ // verify the JitsiMeetExternalAPI constructor is added to the global..
	120	+ // if (this.teacherName != "" \|\| this.room != "") {
	121	+ // if (window.JitsiMeetExternalAPI) {
	122	+ // // var person = prompt("Please enter your name:", "Rabie");
	123	+ // if (person != null \|\| person != "") this.username = this.teacherName;
	124	+ // var room = prompt("Please enter your room:", "Test Room");
	125	+ // if (room != null \|\| room != "") this.room = this.room;
	126	+ // this.startConference();
	127	+ // } else alert("Jitsi Meet API script not loaded");
	128	+ // }
	129	+ },
	130	+ getClassData() {
	131	+ http()
	132	+ .get("/getClassesList", {
	133	+ headers: { Authorization: "Bearer " + this.token }
	134	+ })
	135	+ .then(response => {
	136	+ this.addclass = response.data.data;
	137	+ })
	138	+ .catch(error => {
	139	+ this.showLoader = false;
	140	+ if (error.response.status === 401) {
	141	+ this.$router.replace({ path: "/" });
	142	+ this.$store.dispatch("setToken", null);
	143	+ this.$store.dispatch("Id", null);
	144	+ this.$store.dispatch("Role", null);
	145	+ }
	146	+ });
	147	+ },
	148	+ createRoom() {
	149	+ this.showLoader = true;
	150	+ var classId = {
	151	+ classId: this.selectStudents.classId
	152	+ };
	153	+ http()
	154	+ .post("/createRoom", classId)
	155	+ .then(response => {
	156	+ // this.addSection = response.data.data;
	157	+ console.log("CREATE___ROOOM", response.data);
	158	+ this.room = response.data.data.roomName;
	159	+ this.username = response.data.data.teacherName;
	160	+ this.roomPassword = response.data.data.roomPassword;
	161	+ var this_ = this;
	162	+ if (this.username != "" \|\| this.room != "") {
	163	+ if (window.JitsiMeetExternalAPI) {
	164	+ // var person = prompt("Please enter your name:", "Rabie");
	165	+ if (this_.username != null \|\| this_.username != "") {
	166	+ this.username = this.username;
	167	+ }
	168	+ // var room = prompt("Please enter your room:", "Test Room");
	169	+ if (this_.room != null \|\| this_.room != "") {
	170	+ this.room = this.room;
	171	+ }
	172	+ this.startConference();
	173	+ } else alert("Jitsi Meet API script not loaded");
	174	+ }
	175	+ this.showLoader = false;
	176	+ })
	177	+ .catch(err => {
	178	+ this.showLoader = false;
	179	+ });
	180	+ }
	181	+ },
	182	+
	183	+ mounted() {
	184	+ this.token = this.$store.state.token;
	185	+ this.getClassData();
	186	+ // this.openRoom();
	187	+ }
	188	+};
	189	+</script>
	190	+
	191	+
	192	+<style>
	193	+#jitsi-container {
	194	+ height: 100vh;
	195	+}
	196	+</style>
0	197	\ No newline at end of file
...	...