Custom front not working locally but working with meet.jit.si

Hello,
We are trying to use the low level API to create a communication service based on the jitsi microservices.
Our goal is to use the communication components in a front-end application that will be part of the page as a communication service.

The front end works when using meet.jit.si… but not our localhost containers

We have created a docker-compose that has the following components :

  • jitsi/prosody listening on ports 5222, 5347 & 5280
  • jitsi/jvb listening on ports 8080, 9090 & 10000
  • (Not sure if we need) jitsi/web listening on port 80 & 443

Everything is up and running.

This is our configuration of the front-end service

WORKING !!!

const options = {
    hosts: {
        domain: 'meet.jit.si',
        muc: 'conference.meet.jit.si'
    },
    serviceUrl:'wss://meet.jit.si/xmpp-websocket?room=test',
};

NOT WORKING

const options = {
    hosts: {
        domain: '????',
        muc: '???'
    },
    serviceUrl:'wss://????/xmpp-websocket?room=test',
};

connection = new JitsiMeetJS.JitsiConnection(null, null, options);
connection = new JitsiMeetJS.JitsiConnection(null, null, options);
connection.addEventListener(
    JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED,
    onConnectionSuccess);

connection.connect();


function onConnectionSuccess() {
    room = connection.initJitsiConference('toto', confOptions);
    ...

What are you filling in here? This should be meet.jitsi for docker. Why don’t you source the configuration from your deployment? https://???/config.js

Hello @damencho

This is the compose file we are using to run prosody, the video bridge and the focus component:

version: '3.8'

networks:
  custom.jitsi:

services:
  jitsi-prosody:
    container_name: prosody.jitsi.custom.jitsi
    hostname: prosody.jitsi.custom.jitsi
    image: jitsi/prosody:stable-8615
    expose:
      - "5222"
      - "5347"
      - "5280"
    environment:
      # - AUTH_TYPE=jwt
      - DISABLE_POLLS=1
      # - ENABLE_AUTH=1
      - ENABLE_AV_MODERATION=1
      - ENABLE_END_CONFERENCE=1
      - ENABLE_LOBBY=1
      - ENABLE_RECORDING=1
      - ENABLE_XMPP_WEBSOCKET=1
      - JIBRI_RECORDER_USER=jibri_recorder
      - JIBRI_RECORDER_PASSWORD=bb28796d4ea635f52b3ca47d7a37a323
      - JIBRI_XMPP_USER=jibri_xmpp
      - JIBRI_XMPP_PASSWORD=53aeca68a1869c144270c0f058c8fbd9
      - JICOFO_AUTH_USER=jicofo_user
      - JICOFO_AUTH_PASSWORD=c3d576e03e331fb8b19c5ca8aaf3d64e
      - JICOFO_COMPONENT_SECRET=8b19c5ca8aaf3d64e53aeca68a1869c1
      - JIGASI_XMPP_USER=jigasi_xmpp
      - JIGASI_XMPP_PASSWORD=57261e88bdb42d73caa68400beb5ce2f
      - JVB_AUTH_USER=jvb_user
      - JVB_AUTH_PASSWORD=6e38462e12f51fdfd2b65fec84c86ba0
      # - JWT_APP_ID=guided_session_api
      # - JWT_APP_SECRET=c8YPgKWzqk9LaPEbWODezwXpQ6wrCU5A
      # - JWT_ALLOW_EMPTY=0
      # - JWT_AUTH_TYPE=token
      # - JWT_TOKEN_AUTH_MODULE=token_verification
      - LOG_LEVEL=info
      - MAX_PARTICIPANTS=50
      - PUBLIC_URL=https://localhost:9443
      - TZ=Europe/Paris
      - XMPP_DOMAIN=jitsi.custom.jitsi
      - XMPP_AUTH_DOMAIN=auth.jitsi.custom.jitsi
      - XMPP_MUC_DOMAIN=muc.jitsi.custom.jitsi
      - XMPP_INTERNAL_MUC_DOMAIN=internal-muc.jitsi.custom.jitsi
      - XMPP_RECORDER_DOMAIN=recorder.jitsi.custom.jitsi
      - XMPP_PORT=5222
    ports:
      - "5222:5222"
      - "5347:5347"
      - "5280:5280"
    networks:
      - custom.jitsi

  jitsi-jvb:
    container_name: jvb.jitsi.custom.jitsi
    hostname: jvb.jitsi.custom.jitsi
    image: jitsi/jvb:stable-8615
    depends_on:
      - jitsi-prosody
    expose:
      - "8080"
      - "9090"
      - "10000"
    environment:
      - ENABLE_COLIBRI_WEBSOCKET=1
      - JVB_AUTH_USER=jvb_user
      - JVB_AUTH_PASSWORD=6e38462e12f51fdfd2b65fec84c86ba0
      - JVB_BREWERY_MUC=jvbbrewery
      - JVB_PORT=10000
      - JVB_MUC_NICKNAME=jvbmuc
      - JVB_STUN_SERVERS=stun.l.google.com:19302,stun1.l.google.com:19302,stun2.l.google.com:19302
      # - JVB_STUN_SERVERS=meet-jit-si-turnrelay.jitsi.net:443
      - LOG_LEVEL=info
      - PUBLIC_URL=https://localhost:9443
      - TZ=Europe/Paris
      - XMPP_AUTH_DOMAIN=auth.jitsi.custom.jitsi
      - XMPP_INTERNAL_MUC_DOMAIN=internal-muc.jitsi.custom.jitsi
      - XMPP_SERVER=prosody.jitsi.custom.jitsi
      - XMPP_PORT=5222
    ports:
      - "8081:8080"
      - "9090:9090"
      - "10000:10000/udp"
    networks:
      - custom.jitsi

  jitsi-jicofo:
    container_name: jicofo.jitsi.custom.jitsi
    hostname: jicofo.jitsi.custom.jitsi
    image: jitsi/jicofo:stable-8615
    depends_on:
      - jitsi-prosody
    environment:
      - ENABLE_CODEC_VP8=1
      - ENABLE_CODEC_VP9=1
      - ENABLE_CODEC_H264=1
      - ENABLE_RECORDING=1
      - ENABLE_SCTP=0
      - JICOFO_AUTH_USER=jicofo_user
      - JICOFO_AUTH_PASSWORD=c3d576e03e331fb8b19c5ca8aaf3d64e
      - JICOFO_COMPONENT_SECRET=8b19c5ca8aaf3d64e53aeca68a1869c1
      - JICOFO_ENABLE_BRIDGE_HEALTH_CHECKS=true
      - JICOFO_ENABLE_HEALTH_CHECKS=true
      - JIBRI_BREWERY_MUC=jibribrewery
      - JVB_BREWERY_MUC=jvbbrewery
      - LOG_LEVEL=info
      - MAX_BRIDGE_PARTICIPANTS=50
      - TZ=Europe/Paris
      - XMPP_DOMAIN=jitsi.custom.jitsi
      - XMPP_AUTH_DOMAIN=auth.jitsi.custom.jitsi
      - XMPP_INTERNAL_MUC_DOMAIN=internal-muc.jitsi.custom.jitsi
      - XMPP_MUC_DOMAIN=muc.jitsi.custom.jitsi
      - XMPP_RECORDER_DOMAIN=recorder.jitsi.custom.jitsi
      - XMPP_SERVER=prosody.jitsi.custom.jitsi
      - XMPP_PORT=5222
    networks:
      - custom.jitsi

We are struggling to fill properly the configuration for creating the JitsiMeetJS.JitsiConnection. FYI when using Jitsi’s web deployed as follow it works like a charm and we can see in container logs that the webapp is able to connect and start a session on deman.

  jitsi-web:
    image: jitsi/web:stable-8615
    depends_on:
      - jitsi-prosody
      - jitsi-jvb
      - jitsi-jicofo
    environment:
      - AMPLITUDE_ID
      - ANALYTICS_SCRIPT_URLS
      - ANALYTICS_WHITELISTED_EVENTS
      - AUDIO_QUALITY_OPUS_BITRATE
      - AUTO_CAPTION_ON_RECORD
      - BRANDING_DATA_URL
      - CALLSTATS_CUSTOM_SCRIPT_URL
      - CALLSTATS_ID
      - CALLSTATS_SECRET
      - CHROME_EXTENSION_BANNER_JSON
      - CONFCODE_URL
      - CONFIG_EXTERNAL_CONNECT
      - DEFAULT_LANGUAGE
      - DEPLOYMENTINFO_ENVIRONMENT
      - DEPLOYMENTINFO_ENVIRONMENT_TYPE
      - DEPLOYMENTINFO_REGION
      - DEPLOYMENTINFO_SHARD
      - DEPLOYMENTINFO_USERREGION
      - DESKTOP_SHARING_FRAMERATE_MIN
      - DESKTOP_SHARING_FRAMERATE_MAX
      - DIALIN_NUMBERS_URL
      - DIALOUT_AUTH_URL
      - DIALOUT_CODES_URL
      - DISABLE_AUDIO_LEVELS
      - DISABLE_DEEP_LINKING
      - DISABLE_GRANT_MODERATOR
      - DISABLE_HTTPS
      - DISABLE_KICKOUT
      - DISABLE_LOCAL_RECORDING
      - DISABLE_POLLS
      - DISABLE_PRIVATE_CHAT
      - DISABLE_PROFILE
      - DISABLE_REACTIONS
      - DISABLE_REMOTE_VIDEO_MENU
      - DISABLE_START_FOR_ALL
      - DROPBOX_APPKEY
      - DROPBOX_REDIRECT_URI
      - DYNAMIC_BRANDING_URL
      - ENABLE_AUDIO_PROCESSING
      - ENABLE_AUTH
      - ENABLE_BREAKOUT_ROOMS
      - ENABLE_CALENDAR
      - ENABLE_COLIBRI_WEBSOCKET
      - ENABLE_E2EPING
      - ENABLE_FILE_RECORDING_SHARING
      - ENABLE_GUESTS
      - ENABLE_HSTS
      - ENABLE_HTTP_REDIRECT
      - ENABLE_IPV6
      - ENABLE_LETSENCRYPT
      - ENABLE_LIPSYNC
      - ENABLE_NO_AUDIO_DETECTION
      - ENABLE_NOISY_MIC_DETECTION
      - ENABLE_OCTO
      - ENABLE_OPUS_RED
      - ENABLE_PREJOIN_PAGE
      - ENABLE_P2P
      - ENABLE_WELCOME_PAGE
      - ENABLE_CLOSE_PAGE
      - ENABLE_LIVESTREAMING
      - ENABLE_LOCAL_RECORDING_NOTIFY_ALL_PARTICIPANT
      - ENABLE_LOCAL_RECORDING_SELF_START
      - ENABLE_RECORDING
      - ENABLE_REMB
      - ENABLE_REQUIRE_DISPLAY_NAME
      - ENABLE_SERVICE_RECORDING
      - ENABLE_SIMULCAST
      - ENABLE_STATS_ID
      - ENABLE_STEREO
      - ENABLE_SUBDOMAINS
      - ENABLE_TALK_WHILE_MUTED
      - ENABLE_TCC
      - ENABLE_TRANSCRIPTIONS
      - ENABLE_XMPP_WEBSOCKET=1
      - ENABLE_JAAS_COMPONENTS
      - ETHERPAD_PUBLIC_URL
      - ETHERPAD_URL_BASE
      - E2EPING_NUM_REQUESTS
      - E2EPING_MAX_CONFERENCE_SIZE
      - E2EPING_MAX_MESSAGE_PER_SECOND
      - GOOGLE_ANALYTICS_ID
      - GOOGLE_API_APP_CLIENT_ID
      - HIDE_PREMEETING_BUTTONS
      - HIDE_PREJOIN_DISPLAY_NAME
      - HIDE_PREJOIN_EXTRA_BUTTONS
      - INVITE_SERVICE_URL
      - LETSENCRYPT_DOMAIN
      - LETSENCRYPT_EMAIL
      - LETSENCRYPT_USE_STAGING
      - MATOMO_ENDPOINT
      - MATOMO_SITE_ID
      - MICROSOFT_API_APP_CLIENT_ID
      - NGINX_RESOLVER
      - NGINX_WORKER_PROCESSES
      - NGINX_WORKER_CONNECTIONS
      - PEOPLE_SEARCH_URL
      - PREFERRED_LANGUAGE
      - PUBLIC_URL=https://localhost:9443
      - P2P_PREFERRED_CODEC
      - RESOLUTION
      - RESOLUTION_MIN
      - RESOLUTION_WIDTH
      - RESOLUTION_WIDTH_MIN
      - START_AUDIO_MUTED
      - START_AUDIO_ONLY
      - START_BITRATE
      - START_SILENT
      - START_WITH_AUDIO_MUTED
      - START_VIDEO_MUTED
      - START_WITH_VIDEO_MUTED
      - TESTING_CAP_SCREENSHARE_BITRATE
      - TESTING_OCTO_PROBABILITY
      - TOKEN_AUTH_URL
      - TOOLBAR_BUTTONS
      - TRANSLATION_LANGUAGES
      - TRANSLATION_LANGUAGES_HEAD
      - TZ=Europe/Paris
      - USE_APP_LANGUAGE
      - VIDEOQUALITY_BITRATE_H264_LOW
      - VIDEOQUALITY_BITRATE_H264_STANDARD
      - VIDEOQUALITY_BITRATE_H264_HIGH
      - VIDEOQUALITY_BITRATE_VP8_LOW
      - VIDEOQUALITY_BITRATE_VP8_STANDARD
      - VIDEOQUALITY_BITRATE_VP8_HIGH
      - VIDEOQUALITY_BITRATE_VP9_LOW
      - VIDEOQUALITY_BITRATE_VP9_STANDARD
      - VIDEOQUALITY_BITRATE_VP9_HIGH
      - VIDEOQUALITY_ENFORCE_PREFERRED_CODEC
      - VIDEOQUALITY_PREFERRED_CODEC
      - XMPP_AUTH_DOMAIN=auth.jitsi.custom.jitsi
      - XMPP_MUC_DOMAIN=muc.jitsi.custom.jitsi
      - XMPP_BOSH_URL_BASE=http://prosody.custom.jitsi:5280
      - XMPP_DOMAIN=jitsi.custom.jitsi
      - XMPP_RECORDER_DOMAIN=recorder.jitsi.custom.jitsi
      - XMPP_PORT=5222
      - WHITEBOARD_ENABLED
      - WHITEBOARD_COLLAB_SERVER_PUBLIC_URL
    ports:
      - "9081:80"
      - "9444:443"
    networks:
      - custom.jitsi

Any help would be greatly appreciated :slight_smile:

Best,

Just source the config.js from your deploymen before sourcing lib-jitsi-meet and use that config option to pass to JitsiConnection, this is the easiest way and how jitsi-meet is doing that.

when you say just source the config.js from your deployment ? what do you mean ? source it from where ? sorry for the dummy question, I am very new to Jitsi

As I wrote earlier. If you are testing your jitsi-meet using the url https://mydomain.com then you can source it using https://mydomain.com/config.js.