添加会议

odc.xiaohui

2023-06-13 a12559e8c816633977358fd21c60c621e5b96645

 src/views/meeting/list.vue

@@ -1,67 +1,121 @@
<template>
  <div ref="jitsiContainer" style="height: 100vh; width: 100%;"></div>
<!--  <div ref="jitsiContainer" style="height: 100vh; width: 100%;"></div>-->
  <div>
    <div id="meet"></div>
<!--    <el-button @click="Connect">加入</el-button>-->
  </div>

</template>

<script>
import JitsiMeetJS from '@lyno/lib-jitsi-meet';
import { JitsiMeet } from "@/utils/jitsi_meet";
import $ from 'jquery';
window.$ = $;
export default {
  props: {
    domain: {
      type: String,
      default: '124.222.18.104:8443'
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  // props: {
  //   domain: {
  //     type: String,
  //     default: '124.222.18.104:8443'
  //   },
  //   options: {
  //     type: Object,
  //     default: () => ({}),
  //   },
  // },
  data () {
    return {
      jitsiApi: null,
      userName:'张三',
      roomName:'房间名',
      meet: {
        clients: [],
      },
    };
  },
  mounted () {
    JitsiMeetJS.init();
    // JitsiMeetJS.init();
    // const options = {
    //   serviceUrl:'https://124.222.18.104:8443/http-bind',
    //   hosts: {
    //     domain: 'https://124.222.18.104:8443/',
    //     muc: 'conference.meet.jit.si',
    //   },
    //   bosh: 'https://124.222.18.104:8443/http-bind',
    //   useStunTurn: true
    // }
    const domain = '124.222.18.104:8443';
    const options = {
      serviceUrl:'https://124.222.18.104:8443/http-bind',
      hosts: {
        domain: 'https://124.222.18.104:8443/',
        muc: 'conference.meet.jit.si',
      roomName: this.roomName,
      width: 1200,
      height: 800,
      parentNode: document.querySelector('#meet'),
      configOverwrite: {
        disableSsl: true
      },
      bosh: 'https://124.222.18.104:8443/http-bind',
      useStunTurn: true
    }
    const connection = new JitsiMeetJS.JitsiConnection('123', null, options);
      userInfo: {displayName: this.userName}
    };
    // const connection = new JitsiMeetJS.JitsiConnection('123', null, options);

    const api = new JitsiMeetExternalAPI(domain, options);

    function onConnectionSuccess() {
      console.log("onConnectionSuccess", arguments);
    }
    function onConnectionFailed() {
      console.log("onConnectionFailed", arguments);
    }
    function disconnect() {
      console.log("disconnect", arguments);
    }

    connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
    connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, onConnectionFailed);
    connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, disconnect);

    connection.connect(undefined);


    this.loadScript(`https://${this.domain}/external_api.js`, () => {
      if (!window.JitsiMeetExternalAPI) throw new Error('Jitsi Meet External API not loaded');
      this.embedJitsiWidget();
    // this.meet = new JitsiMeet(
    //   //这里是服务端的XMPP地址
    //   "https://124.222.18.104:8443/http-bind",
    //   this.name
    // );
    api.addEventListeners({
      participantJoined: handleParticipantJoined,
      participantLeft: handleParticipantLeft
    });

    function handleParticipantJoined(event) {
      console.log(`Participant joined: ${event.id}`);
      console.log(event)
    }

    function handleParticipantLeft(event) {
      console.log(`Participant left: ${event.id}`);
      console.log(event)
    }

    // function onConnectionSuccess() {
    //   console.log("onConnectionSuccess", arguments);
    // }
    // function onConnectionFailed() {
    //   console.log("onConnectionFailed", arguments);
    // }
    // function disconnect() {
    //   console.log("disconnect", arguments);
    // }
    //
    // connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
    // connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, onConnectionFailed);
    // connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, disconnect);
    //
    // connection.connect(undefined);


    // this.loadScript(`https://${this.domain}/external_api.js`, () => {
    //   if (!window.JitsiMeetExternalAPI) throw new Error('Jitsi Meet External API not loaded');
    //   this.embedJitsiWidget();
    // });
  },
  beforeDestroy () {
    // this.Disconnect()
    this.removeJitsiWidget();

  },
  methods: {
    Connect() {
      // 加入名称为xxx的房间（这一步会创建连接与房间对象）
      this.meet.joinRoom("xxxx");
      // this.beInRoom = true;
    },
    // Disconnect() {
    //   // 离开房间（这一步会断开连接）
    //   this.meet.leveRoom();
    //   // this.beInRoom = false;
    // },
    loadScript (src, cb) {
      const scriptEl = document.createElement('script');
      scriptEl.src = src;