Blame view

src/pages/Meet/meet.vue 5.86 KB
2226dee5a   Neeraj Sharma   implement confere...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  <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>
e91641fe5   Amber Dev   solved bugs
32
33
34
35
36
37
38
              <v-btn
                @click="createRoom(selectStudents.classId)"
                round
                dark
                :loading="loading"
                class="add-button mt-3"
              >Find</v-btn>
2226dee5a   Neeraj Sharma   implement confere...
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
            </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",
531728c2e   Neeraj Sharma   add recodording o...
91
                "recording",
2226dee5a   Neeraj Sharma   implement confere...
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
                "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);
            }
          });
      },
e91641fe5   Amber Dev   solved bugs
154
      createRoom(classId) {
2226dee5a   Neeraj Sharma   implement confere...
155
156
        this.showLoader = true;
        var classId = {
e91641fe5   Amber Dev   solved bugs
157
          classId: classId
2226dee5a   Neeraj Sharma   implement confere...
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
        };
        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>