custom.vue

<template>
  <div class="card">
    <div class="card-body">
      <div class="card-title">
        <h2>
          Custom Jitsi
          <span class="text-muted ml-auto" v-if="hasJoinMsg">
            {{ joinMsg }}
          </span>
        </h2>
      </div>

      <div class="row">
        <div class="col-12 col-lg-4">
          <label for="roomName">roomName</label>
          <div class="input-group">
            <input
              name="roomName"
              type="text"
              class="form-control"
              v-model="roomName"
            />
            <button
              type="button"
              class="btn btn-success btn-outline"
              @click.stop="generateRoom"
            >
              <i class="bi bi-arrow-repeat"></i>
            </button>
          </div>

          <label for="userId">userId</label>
          <input
            name="userId"
            type="text"
            class="form-control"
            v-model="user.id"
          />
          <label for="userName">userName</label>
          <input
            name="userName"
            type="text"
            class="form-control"
            v-model="user.name"
          />
          <label for="userEmail">userEmail</label>
          <input
            name="userEmail"
            type="text"
            class="form-control"
            v-model="user.email"
          />

          <div class="text-center my-2">
            <div class="btn-group">
              <div
                v-if="callStarted"
                class="btn btn-danger"
                id="btnHangup"
                @click="btnHangup"
              >
                <i class="bi bi-telephone-x"></i>
              </div>
              <div
                v-else
                class="btn btn-success"
                id="btnStartup"
                @click="btnStartup"
              >
                <i class="bi bi-telephone"></i>
              </div>

              <div
                class="btn"
                :class="btnEnabled ? 'btn-danger' : 'btn-primary'"
                @click="btnCustomMic"
              >
                <i class="bi bi-mic"></i>
              </div>

              <div
                class="btn"
                :class="cameraEnabled ? 'btn-danger' : 'btn-primary'"
                id="btnCustomCamera"
                @click="btnCustomCamera"
              >
                <i class="bi bi-camera-video"></i>
              </div>

              <div
                class="btn btn-primary"
                id="btnCustomTileView"
                @click="btnCustomTileView"
              >
                <i class="bi bi-grid"></i>
              </div>
              <div
                class="btn"
                :class="screenShared ? 'btn-danger' : 'btn-primary'"
                id="btnScreenShareCustom"
                @click="btnScreenShareCustom"
              >
                <i class="bi bi-display"></i>
              </div>
              <div
                class="btn btn-success"
                id="btnStartRecording"
                @click="btnStartRecording"
              >
                <i class="bi bi-record-circle"></i>
              </div>
              <div
                class="btn btn-danger"
                id="btnStopRecording"
                @click="btnStopRecording"
              >
                <i class="bi bi-record-circle"></i>
              </div>
              <div class="btn btn-warning" @click="generateToken">Token</div>
            </div>
          </div>

          <hr />

          <pre><code>{{ encodedToken }}</code></pre>
          <pre><code>{{ decodedToken }}</code></pre>
        </div>
        <div class="col">
          <div id="jitsi-meet-conf-container" style="height: 70vh"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import faker from "faker";

export default {
  name: "CustomJitsi",
  data: () => ({
    apiObj: null,
    user: {
      id: "",
      name: "",
      email: "",
    },
    roomName: "yo-bro",
    jitsiDomain: "meet.alazy.dev",

    joinMsg: "",
    callStarted: false,
    micEnabled: false,
    cameraEnabled: false,
    screenShared: false,
    recording: false,
  }),
  computed: {
    hasJoinMsg() {
      return this.joinMsg != null && this.joinMsg.length > 0 ? true : false;
    },
    encodedToken() {
      let token = this.$store.getters.getToken;
      return token ? token : "no token found";
    },
    decodedToken() {
      let token = this.$store.getters.getDecodedToken;
      return token ? token : "no token found";
    },
  },
  methods: {
    generateUser() {
      let user = {
        avatarUrl: `https://avatars.dicebear.com/api/male/${faker.random.uuid()}.svg`,
        id: faker.random.uuid(),
        name: faker.internet.userName(),
        email: faker.internet.email(),
      };
      this.user = user;
    },
    generateToken() {
      // let user = {...this.user};
      let options = {
        context: {
          user: this.user,
        },

        // admin: true,
        room: this.roomName,
        iss: "a-lazy-bro",
        aud: "a-lazy-sis",
        // sub: "meet.alazy.dev",
      };
      this.$store.dispatch("generateToken", options);
    },
    generateRoom() {
      this.roomName = faker.random.uuid();
    },
    btnStartup() {
      this.joinMsg = "Loading...";
      if(!this.$store.getters.getToken){
        this.generateToken();
      }
      this.StartMeeting(this.roomName, this.user.name);
      this.callStarted = true;
    },
    btnHangup() {
      this.apiObj.executeCommand("hangup");
      this.callStarted = false;
    },
    btnCustomMic() {
      this.apiObj.executeCommand("toggleAudio");
    },
    btnCustomCamera() {
      this.apiObj.executeCommand("toggleVideo");
    },
    btnCustomTileView() {
      this.apiObj.executeCommand("toggleTileView");
    },
    btnScreenShareCustom() {
      this.apiObj.executeCommand("toggleShareScreen");
    },
    btnStartRecording() {
      this.apiObj.executeCommand("startRecording", { mode: "file" });
    },
    btnStopRecording() {
      this.apiObj.executeCommand("stopRecording", "file");
    },
    StartMeeting() {
      let roomName = this.roomName;
      // let displayName = this.user.name;
      let vueThis = this;
      let jwt = this.$store.getters.getToken;

      const options = {
        jwt: jwt,
        roomName: roomName,
        width: "100%",
        height: "100%",
        parentNode: document.querySelector("#jitsi-meet-conf-container"),
        DEFAULT_REMOTE_DISPLAY_NAME: "New User",
        configOverwrite: {
          doNotStoreRoom: true,
          startVideoMuted: 0,
          startWithVideoMuted: true,
          startWithAudioMuted: true,
          enableWelcomePage: false,
          prejoinPageEnabled: false,
          disableRemoteMute: true,
          remoteVideoMenu: {
            disableKick: true,
          },
        },
        interfaceConfigOverwrite: {
          filmStripOnly: false,
          SHOW_JITSI_WATERMARK: false,
          SHOW_WATERMARK_FOR_GUESTS: false,
          DEFAULT_REMOTE_DISPLAY_NAME: "New User",
          TOOLBAR_BUTTONS: ["settings", "recording", "fullscreen"],
          SETTINGS_SECTIONS: ["devices"],
          SHOW_PROMOTIONAL_CLOSE_PAGE: false,
        },
        onload: function () {
          vueThis.joinMsg = null;
        },
      };
      this.apiObj = new window.JitsiMeetExternalAPI(this.jitsiDomain, options);

      this.apiObj.addEventListeners({
        readyToClose: function () {
          document.getElementById("jitsi-meet-conf-container").innerHTML = "";
          vueThis.joinMsg = "Meeting has ended";
        },
        audioMuteStatusChanged: function (data) {
          if (data.muted) this.micEnabled = false;
          else this.micEnabled = true;
        },
        videoMuteStatusChanged: function (data) {
          if (data.muted) this.cameraEnabled = false;
          else this.cameraEnabled = true;
        },
        tileViewChanged: function (data) {
          console.log(`tile view changed: ${data}`);
        },
        screenSharingStatusChanged: function (data) {
          if (data.on) {
            this.screenShared = true;
          } else {
            this.screenShared = false;
          }
        },
        
        participantJoined: function (data) {
          console.log("participantJoined", data);
        },
        participantLeft: function (data) {
          console.log("participantLeft", data);
        },
      });

      this.apiObj.executeCommand("subject", roomName);
    },
  },
  mounted() {
    this.generateUser();
    this.generateRoom();
  },
};
</script>