Я пытаюсь встроить 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>