Как добавить Jitsi Meet в Vuejs

Я загрузил скрипт встречи jitsi в тело моего public.html, и у меня есть следующий компонент:

<template>
  <div class="container">
    <div id="meet"></div>
  </div>
</template>

<script>
export default {
  name: "ServiceMeet",
  mounted() {
    const domain = "meet.jit.si";
    const options = {
      roomName: "PickAnAppropriateMeetingNameHere",
      width: 700,
      height: 700,
      parentNode: document.querySelector("#meet"),
    };
    const api = new JitsiMeetExternalAPI(domain, options);
    console.log(api.getVideoQuality());
  },
};
</script>

Когда я пытаюсь запустить, я получаю сообщение об ошибке 18:21 error 'JitsiMeetExternalAPI' is not defined no-undef, однако в фоновом режиме я вижу, что встреча работает нормально, поэтому я исправляю ошибку или отклоняю ее.


person svoruganti    schedule 19.11.2020    source источник
comment
ОБНОВЛЕНИЕ: не предлагайте игнорировать линтер, поскольку я уже сделал это, но все равно получаю неопределенную ошибку.   -  person svoruganti    schedule 16.12.2020


Ответы (2)


Вы можете отключить ошибку анализа, но я бы рекомендовал указать ее как глобальную переменную вместо этого.

.eslintrc.js

module.exports = {
  globals: {
    JitsiMeetExternalAPI: true
  }
}
person Yom T.    schedule 19.11.2020
comment
Это не работает, так как не может проанализировать ни один из файлов .vue. - person svoruganti; 16.12.2020
comment
@svoruganti Что ты имеешь в виду? ESLint делает разбор .vue файлов. Я проверил, что этот ответ работает в моей песочнице (новый проект, созданный из Vue CLI). - person tony19; 16.12.2020

Это должно работать, если вы укажете глобальный префикс window:

const api = new window.JitsiMeetExternalAPI(domain, options);
person cdrini    schedule 15.12.2020