CODEWITHSUNDEEP
vue.jsjitsi
user2083524
user2083524

Reputation: 121

How to use jitsi with vue?

i open a testroom videoconference with chrome https://meet.jit.si/testroom and tried the following script in another browsertab, but no video, i dont know what to put into the body section for displaying the room?

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src='https://meet.jit.si/external_api.js'></script>
</head>

<body>

<div id="app1">
{{ message }}
</div>

<script>

var vm1 = new Vue({
el: '#app1',
data: {
message: 'Hello Jitsi with Vue!'
}
})

const domain = 'meet.jit.si';
const options = {
roomName: 'testroom',
width: 700,
height: 700,
parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);

</script>
</body>
<html>

Upvotes: 1

Views: 3656

Answers (3)

reza.ansarirad
reza.ansarirad

Reputation: 383

  1. install npm i @mycure/vue-jitsi-meet https://www.npmjs.com/package/@mycure/vue-jitsi-meet

<template>
  <div>
    <vue-jitsi-meet
      ref="jitsiRef"
      class="content"
      style="height: 200vh"
      :options="jitsiOptions"
    ></vue-jitsi-meet>
  </div>
</template>

<script>
import { JitsiMeet } from "@mycure/vue-jitsi-meet";
export default {
  components: {
    VueJitsiMeet: JitsiMeet,
  },
  computed: {
    jitsiOptions() {
      return {
        roomName: "",
        domain: "https://yourAddress.com/",
        jwt: "",
        
        userInfo: {
          email: "[email protected]",
          displayName: "RezaansariRad",
        },
        configOverwrite: {
          enableNoisyMicDetection: false,
        },
        interfaceConfigOverwrite: {
          SHOW_JITSI_WATERMARK: false,
          SHOW_WATERMARK_FOR_GUESTS: false,
          SHOW_CHROME_EXTENSION_BANNER: false,
        },
        onload: this.onIFrameLoad,
      };
    },
  },
  methods: {
    jitsiHandler(roomId, jwt) {
      this.jitsiOptions.roomName = roomId;
      this.jitsiOptions.jwt = jwt;
      console.log(this.jitsiOptions.jwt);
      setTimeout(() => {
        this.onIFrameLoad();
      }, 3000);
    },
  },
  created() {
    if (this.$route.query.room && this.$route.query.token) {
      let roomId = this.$route.query.room;
      let jwt = this.$route.query.token;
      this.jitsiHandler(roomId, jwt);
    }
  },
};
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
</style>

Upvotes: 0

Ant&#243;nio Fernandes
Ant&#243;nio Fernandes

Reputation: 11

I believe you missed a needed element: 'meet'

    <div id="app1">
        {{ message }}
        <div id="meet"></div>   <!-- missing -->
    </div>

It's used by JitsiMeetExternalAPI:

parentNode: document.querySelector('#meet')

Upvotes: 1

user2083524
user2083524

Reputation: 121

this script works now, be sure to use chrome as browser the doco of the options you find here https://github.com/jitsi/jitsi-meet/blob/master/doc/api.md you can also build up your own videoconfernce server

api.html

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

<body>

<div id="meet"></div>

<script>

var domain = 'meet.jit.si';
var options = {
roomName: 'testroom',
width: 500,
height: 500,
interfaceConfigOverwrite: { filmStripOnly: false },
parentNode: document.querySelector('#meet')
};
var api = new JitsiMeetExternalAPI(domain, options);

</script>

</body>
</html>

Upvotes: 2

Related Questions