将 Jitsi 视频会议嵌入到 Vuejs 应用程序中

Question

我正在尝试将 Jitsi 嵌入到我的 vuejs 应用程序中。

我已遵循 https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe 中的文档。

但是我没有成功。我总是收到错误

Jitsi Meet API script not loaded

我做错了什么？

<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>

Answer 1

在您的 index.html

中加载脚本

将 Jitsi 视频会议嵌入到 Vuejs 应用程序中

Embed Jitsi video conference into Vuejs app

jitsi

vue.js