viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 531728c2efe42afd2f49492563d47ae477d5572d

Authored by Neeraj Sharma
1 parent a1e1334035
Exists in master and in 3 other branches amber-development, development, ui-design

add recodording option in meet

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