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

#javascript #vue.js #vuejs2 #jitsi

Вопрос:

Я загрузил скрипт jitsi meet в тело моего 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 , однако в фоновом режиме я вижу, что встреча работает нормально, поэтому я исправляю ошибку или отклоняю ее.

Ответ №1:

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

.eslintrc.js

 module.exports = {
  globals: {
    JitsiMeetExternalAPI: true
  }
}

1. Это не работает, поскольку он не может проанализировать ни один из файлов .vue.

2. @svoruganti Что вы имеете в виду под этим? ESLint выполняет синтаксический .vue анализ файлов. Я проверил, что этот ответ работает в моей изолированной среде (новый проект, созданный из Vue CLI).

Ответ №2:

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

 const api = new window.JitsiMeetExternalAPI(domain, options);