Встроить видеоконференцию Jitsi в приложение Vuejs

Я пытаюсь встроить Jitsi в свое приложение vuejs.

Я следил за документацией в https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe.

Но у меня нет успеха. я всегда получаю ошибку

Сценарий Jitsi Meet API не загружен

Что я делаю не так?

<template>
  <v-card class="ma-2">
    <v-container>
      <v-layout>
        {{ message }}
        <div id="meet"></div>
        <!-- missing -->
      </v-layout>
    </v-container>
  </v-card>
</template>

<script src="https://meet.jit.si/external_api.js"></script>

<script>
export default {
  name: "AtendimentoMedico",
  data: () => ({
    search: "",
    message: "Hello",
    api: null,
    room: "test romm",
    username: "rabie",
  }),

  mounted() {
    this.openRoom();
  },

  methods: {
    startConference() {
      var _this = this;
      try {
        const domain = "meet.jit.si";
        const options = {
          roomName: this.room,
          height: 500,
          parentNode: document.querySelector("#meet"),
          interfaceConfigOverwrite: {
            filmStripOnly: false,
            SHOW_JITSI_WATERMARK: false,
          },
          configOverwrite: {
            disableSimulcast: false,
          },
        };

        this.api = new JitsiMeetExternalAPI(domain, options);
        this.api.addEventListener("videoConferenceJoined", () => {
          console.log("Local User Joined");

          _this.api.executeCommand("displayName", _this.username);
        });
      } catch (error) {
        console.error("Failed to load Jitsi API", error);
      }
    },
    openRoom() {
      // verify the JitsiMeetExternalAPI constructor is added to the global..
      if (window.JitsiMeetExternalAPI) {
        var person = prompt("Please enter your name:", "Rabie");
        if (person != null || person != "") this.username = person;
        var room = prompt("Please enter your room:", "Test Room");
        if (room != null || room != "") this.room = room;
        this.startConference();
      } else alert("Jitsi Meet API script not loaded");
    },
  },
};
</script>

person Luiz Alves    schedule 28.05.2020    source источник
comment
Вы также можете установить его через npm npm install lib-jitsi-meet   -  person Afraz Ahmad    schedule 17.09.2020


Ответы (1)


Загрузите скрипт в ваш index.html

person Cristiano Soleti    schedule 28.05.2020