添加在线会议

odc.xiaohui

2023-06-12 2ffcb911955044f5b451144bef6e857c69363f04

添加在线会议

 .eslintrc.js

@@ -9,7 +9,9 @@
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi':0,
    '(comma-dangle':'off'
  },
  parserOptions: {
    parser: 'babel-eslint'

 package-lock.json

File was deleted

 package.json

@@ -35,6 +35,7 @@
        ]
    },
    "dependencies": {
        "@lyno/lib-jitsi-meet": "^2.6726.2",
        "axios": "^0.19.2",
        "clipboard": "^2.0.11",
        "codemirror": "^5.65.13",

 src/router.js

@@ -248,6 +248,24 @@
    ]
  },
  {
    path: '/meeting',
    component: Layout,
    name: 'MeetingPage',
    meta: {
      title: '在线会议',
      icon: 'log'
    },
    alwaysShow: true,
    children: [
      {
        path: 'meeting/index',
        component: () => import('@/views/meeting/list'),
        name: 'MeetingUserPage',
        meta: { title: '在线会议', noCache: true }
      }
    ]
  },
  {
    path: '/profile',
    component: Layout,
    hidden: true,

 src/views/meeting/list.vue

New file
@@ -0,0 +1,91 @@
<template>
  <div ref="jitsiContainer" style="height: 100vh; width: 100%;"></div>
</template>

<script>
import JitsiMeetJS from '@lyno/lib-jitsi-meet';
import $ from 'jquery';
window.$ = $;
export default {
  props: {
    domain: {
      type: String,
      default: '124.222.18.104:8443'
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {
      jitsiApi: null,
    };
  },
  mounted () {
    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 connection = new JitsiMeetJS.JitsiConnection('123', null, 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();
    });
  },
  beforeDestroy () {
    this.removeJitsiWidget();
  },
  methods: {
    loadScript (src, cb) {
      const scriptEl = document.createElement('script');
      scriptEl.src = src;
      scriptEl.async = 1;
      document.querySelector('head').appendChild(scriptEl);
      scriptEl.addEventListener('load', cb);
    },
    embedJitsiWidget () {
      const options = {
        ...this.options,
        parentNode: this.$refs.jitsiContainer,
      };
      this.jitsiApi = new window.JitsiMeetExternalAPI(this.domain, options);
    },
    executeCommand (command, ...value) {
      this.jitsiApi.executeCommand(command, ...value);
    },
    addEventListener (event, fn) {
      this.jitsiApi.on(event, fn);
    },
    // Misc
    removeJitsiWidget () {
      if (this.jitsiApi) this.jitsiApi.dispose();
    },
  }
};
</script>

 vue.config.js

@@ -14,12 +14,12 @@
  devServer: {
    open: true,
    host: 'localhost',
    port: 8002,
    port: 8003,
    https: false,
    hotOnly: false,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        target: 'http://192.168.3.228:8000',
        changeOrigin: true
      }
    }