How I can add custom UI for lib-jitsi-meet-dist

252 Views Asked by At

I need to render call window I enter with code

import React from 'react';
// @ts-ignore: error message
import JitsiMeetJS from 'lib-jitsi-meet-dist';

const App: React.FC = () => {
  const roomName = 'conf';

  const options = {
    width: 800,
    height: 600,
    parentNode: document.getElementById('jitsi-container'),
    configOverwrite: {},
    interfaceConfigOverwrite: {},
    hosts: {
      domain: 'jitsi.fantast.dev',
      anonymousdomain: "jitsi.fantast.dev@",
      muc: 'jitsi.fantast.dev'
    },
    bosh: 'https://jitsi.fantast.dev/http-bind',
  };

  const confOptions = {
    openBridgeChannel: true,
  };

  // @ts-ignore: error message
  JitsiMeetJS.init(options);

  const conference = JitsiMeetJS.conference?.join(roomName);

  let connection = new JitsiMeetJS.JitsiConnection(null, null, options);

  connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, () => {});
  connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, () => {});
  connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, () => {});

  connection.connect();

  const room = connection.initJitsiConference(roomName, confOptions, null);
  room.on(JitsiMeetJS.events.conference.TRACK_ADDED, () => {});
  room.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, () => {});

  JitsiMeetJS.createLocalTracks().then(() => {});

  room.join();

  return (
    <div>
      app
      <div id="jitsi-container"></div>
    </div>
  )
}

export default App;

and I have white page with text "app"

enter image description here

but call started on my server

enter image description here

I tryed add width, height and parentNode: document.getElementById('jitsi-container') in options and add div with id "jitsi-container"

0

There are 0 best solutions below