docker部署配置修改，jitis文档

xiangpei

2024-03-28 0f431b52e0936456bd165d9553761bfd8a5a0517

docker部署配置修改，jitis文档

 doc/JitsiMeet.md

New file
@@ -0,0 +1,372 @@
## ubuntu安装docker

[docker官方文档](https://docs.docker.com/engine/install/ubuntu/)

[下载镜像太慢](https://blog.csdn.net/qq_35606010/article/details/104750391)



## 部署Jitis

[docker-compose部署](https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-docker/)



部署位置：`/usr/local/meet/jitis-docker-xxxx`目录



## 修改配置

运行好容器之后，通过ip+8443端口可以访问到界面：

<img src="https://xiangpeitop.oss-cn-chengdu.aliyuncs.com/blogimgs/image-20240325160746091.png" alt="image-20240325160746091" style="zoom:50%;" />

**点击开始会议就不行，会报错。断开连接**

是因为jitis会进行一个websocket连接。开发时本地运行前端，发现websocket连接是连接到本地localhost。本地并没有socket服务，所以无法连接。

解决办法就是关闭socket连接: 在.env文件中加入这段配置，然后重启服务：`docker compose up -d`(需要在docker-compose.yml文件夹下)

```
# 关闭websocket，不然无法加入会议
ENABLE_XMPP_WEBSOCKET=0
```







## 如何去水印等配置

jisti可以允许客户端修改一些配置。但是只有部分白名单里面的配置可以修改。**如去视频水印就不行**：

<img src="https://xiangpeitop.oss-cn-chengdu.aliyuncs.com/blogimgs/image-20240325181209573.png" alt="image-20240325181209573" style="zoom:67%;" />

查看运行容器(nginx)的配置发现，很多配置文件(xxx.js)是可以通过浏览器访问的。

于是进入web容器，找到了关于去水印等配置的地方：`/config/interface_config.js`



去水印不在白名单内，所以无论客户端怎么修改也无效，包括其它很多配置也是。



**所以就尝试修改容器内部的`interface_config.js`。容器内部没有vim命令，所以我直接采用的是讲该文件复制到宿主机修改后再复制进来。然后重启容器。**

复制容器内的文件到宿主机：`docker cp 容器ID:容器内文件目录 宿主机文件目录`

复制宿主机文件到容器内部：`docker cp 宿主机文件目录 容器ID:容器内文件目录`：例如：`docker cp /interface_config.js e086a6dba069:/config/interface_config.js`

复制文件时，同名文件会直接覆盖





这里是一个去掉了水印、广告的的`interface_config.js`文件内容：

```js
/* eslint-disable no-unused-vars, no-var, max-len */
/* eslint sort-keys: ["error", "asc", {"caseSensitive": false}] */

/**
 * !!!IMPORTANT!!!
 *
 * This file is considered deprecated. All options will eventually be moved to
 * config.js, and no new options should be added here.
 */

var interfaceConfig = {
    APP_NAME: '在线会议',
    AUDIO_LEVEL_PRIMARY_COLOR: 'rgba(255,255,255,0.4)',
    AUDIO_LEVEL_SECONDARY_COLOR: 'rgba(255,255,255,0.2)',

    /**
     * A UX mode where the last screen share participant is automatically
     * pinned. Valid values are the string "remote-only" so remote participants
     * get pinned but not local, otherwise any truthy value for all participants,
     * and any falsy value to disable the feature.
     *
     * Note: this mode is experimental and subject to breakage.
     */
    AUTO_PIN_LATEST_SCREEN_SHARE: 'remote-only',
    BRAND_WATERMARK_LINK: '',

    CLOSE_PAGE_GUEST_HINT: false, // A html text to be shown to guests on the close page, false disables it

    DEFAULT_BACKGROUND: '#040404',
    DEFAULT_WELCOME_PAGE_LOGO_URL: '',

    DISABLE_DOMINANT_SPEAKER_INDICATOR: false,

    /**
     * If true, notifications regarding joining/leaving are no longer displayed.
     */
    DISABLE_JOIN_LEAVE_NOTIFICATIONS: false,

    /**
     * If true, presence status: busy, calling, connected etc. is not displayed.
     */
    DISABLE_PRESENCE_STATUS: false,

    /**
     * Whether the ringing sound in the call/ring overlay is disabled. If
     * {@code undefined}, defaults to {@code false}.
     *
     * @type {boolean}
     */
    DISABLE_RINGING: false,

    /**
     * Whether the speech to text transcription subtitles panel is disabled.
     * If {@code undefined}, defaults to {@code false}.
     *
     * @type {boolean}
     */
    DISABLE_TRANSCRIPTION_SUBTITLES: false,

    /**
     * Whether or not the blurred video background for large video should be
     * displayed on browsers that can support it.
     */
    DISABLE_VIDEO_BACKGROUND: false,

    DISPLAY_WELCOME_FOOTER: false,
    DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: false,
    DISPLAY_WELCOME_PAGE_CONTENT: false,
    DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT: false,

    ENABLE_DIAL_OUT: true,

    // DEPRECATED. Animation no longer supported.
    // ENABLE_FEEDBACK_ANIMATION: false,

    FILM_STRIP_MAX_HEIGHT: 120,

    GENERATE_ROOMNAMES_ON_WELCOME_PAGE: false,

    /**
     * Hide the invite prompt in the header when alone in the meeting.
     */
    HIDE_INVITE_MORE_HEADER: true,

    JITSI_WATERMARK_LINK: '',

    LANG_DETECTION: true, // Allow i18n to detect the system language
    LOCAL_THUMBNAIL_RATIO: 16 / 9, // 16:9

    /**
     * Maximum coefficient of the ratio of the large video to the visible area
     * after the large video is scaled to fit the window.
     *
     * @type {number}
     */
    MAXIMUM_ZOOMING_COEFFICIENT: 1.3,

    /**
     * Whether the mobile app Jitsi Meet is to be promoted to participants
     * attempting to join a conference in a mobile Web browser. If
     * {@code undefined}, defaults to {@code true}.
     *
     * @type {boolean}
     */
    MOBILE_APP_PROMO: false,

    // Names of browsers which should show a warning stating the current browser
    // has a suboptimal experience. Browsers which are not listed as optimal or
    // unsupported are considered suboptimal. Valid values are:
    // chrome, chromium, electron, firefox , safari, webkit
    OPTIMAL_BROWSERS: [ 'chrome', 'chromium', 'firefox', 'electron', 'safari', 'webkit' ],

    POLICY_LOGO: null,
    PROVIDER_NAME: '优创力',

    /**
     * If true, will display recent list
     *
     * @type {boolean}
     */
    RECENT_LIST_ENABLED: true,
    REMOTE_THUMBNAIL_RATIO: 1, // 1:1

    SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar', 'sounds', 'more' ],

    /**
     * Specify which sharing features should be displayed. If the value is not set
     * all sharing features will be shown. You can set [] to disable all.
     */
    // SHARING_FEATURES: ['email', 'url', 'dial-in', 'embed'],

    SHOW_BRAND_WATERMARK: false,

    /**
     * Decides whether the chrome extension banner should be rendered on the landing page and during the meeting.
     * If this is set to false, the banner will not be rendered at all. If set to true, the check for extension(s)
     * being already installed is done before rendering.
     */
    SHOW_CHROME_EXTENSION_BANNER: false,

    SHOW_JITSI_WATERMARK: false,
    SHOW_POWERED_BY: false,
    SHOW_PROMOTIONAL_CLOSE_PAGE: false,

    /*
     * If indicated some of the error dialogs may point to the support URL for
     * help.
     */
    SUPPORT_URL: '',

    // Browsers, in addition to those which do not fully support WebRTC, that
    // are not supported and should show the unsupported browser page.
    UNSUPPORTED_BROWSERS: [],

    /**
     * Whether to show thumbnails in filmstrip as a column instead of as a row.
     */
    VERTICAL_FILMSTRIP: true,

    // Determines how the video would fit the screen. 'both' would fit the whole
    // screen, 'height' would fit the original video height to the height of the
    // screen, 'width' would fit the original video width to the width of the
    // screen respecting ratio, 'nocrop' would make the video as large as
    // possible and preserve aspect ratio without cropping.
    VIDEO_LAYOUT_FIT: 'both',

    /**
     * If true, hides the video quality label indicating the resolution status
     * of the current large video.
     *
     * @type {boolean}
     */
    VIDEO_QUALITY_LABEL_DISABLED: false,

    /**
     * How many columns the tile view can expand to. The respected range is
     * between 1 and 5.
     */
    // TILE_VIEW_MAX_COLUMNS: 5,

    // List of undocumented settings
    /**
     INDICATOR_FONT_SIZES
     PHONE_NUMBER_REGEX
    */

    // -----------------DEPRECATED CONFIGS BELOW THIS LINE-----------------------------

    /**
     * Specify URL for downloading ios mobile app.
     */
    // MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905',

    /**
     * Specify custom URL for downloading android mobile app.
     */
    // MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',

    /**
     * Specify mobile app scheme for opening the app from the mobile browser.
     */
    // APP_SCHEME: 'org.jitsi.meet',

    // NATIVE_APP_NAME: 'Jitsi Meet',

    /**
     * Specify Firebase dynamic link properties for the mobile apps.
     */
    // MOBILE_DYNAMIC_LINK: {
    //    APN: 'org.jitsi.meet',
    //    APP_CODE: 'w2atb',
    //    CUSTOM_DOMAIN: undefined,
    //    IBI: 'com.atlassian.JitsiMeet.ios',
    //    ISI: '1165103905'
    // },

    /**
     * Hide the logo on the deep linking pages.
     */
     HIDE_DEEP_LINKING_LOGO: true,

    /**
     * Specify the Android app package name.
     */
    // ANDROID_APP_PACKAGE: 'org.jitsi.meet',

    /**
     * Specify custom URL for downloading f droid app.
     */
    // MOBILE_DOWNLOAD_LINK_F_DROID: 'https://f-droid.org/en/packages/org.jitsi.meet/',

    // Connection indicators (
    // CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
    // CONNECTION_INDICATOR_AUTO_HIDE_TIMEOUT,
    // CONNECTION_INDICATOR_DISABLED) got moved to config.js.

    // Please use disableModeratorIndicator from config.js
    // DISABLE_FOCUS_INDICATOR: false,

    // Please use defaultLocalDisplayName from config.js
    // DEFAULT_LOCAL_DISPLAY_NAME: 'me',

    // Please use defaultLogoUrl from config.js
    DEFAULT_LOGO_URL: '',

    // Please use defaultRemoteDisplayName from config.js
    // DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster',

    // Moved to config.js as `toolbarConfig.initialTimeout`.
    // INITIAL_TOOLBAR_TIMEOUT: 20000,

    // Please use `liveStreaming.helpLink` from config.js
    // Documentation reference for the live streaming feature.
    // LIVE_STREAMING_HELP_LINK: 'https://jitsi.org/live',

    // Moved to config.js as `toolbarConfig.alwaysVisible`.
    // TOOLBAR_ALWAYS_VISIBLE: false,

    // This config was moved to config.js as `toolbarButtons`.
    // TOOLBAR_BUTTONS: [],

    // Moved to config.js as `toolbarConfig.timeout`.
    // TOOLBAR_TIMEOUT: 4000,

    // Allow all above example options to include a trailing comma and
    // prevent fear when commenting out the last value.
    // eslint-disable-next-line sort-keys
    makeJsonParserHappy: 'even if last key had a trailing comma'

    // No configuration value should follow this line.
};

/* eslint-enable no-unused-vars, no-var, max-len */

```





## 前端如何使用Jitis

```js
<div id="meet" style="width: 65%;height: 100%;"></div>


const domain = '101.35.247.188:8443';
const options = {
  roomName: this.roomName, // 会议房间名称
  width: '100%',
  height: '100%',
  lang: 'zh_CN',
  parentNode: document.querySelector('#meet'), // 挂载的节点
  userInfo: { displayName: this.userName } // 参与人的相关信息，一个js对象就行，内容无限制
};
// 创建 Jitsi Meet API 对象
const api = new JitsiMeetExternalAPI(domain, options);
```

其原理就是通过ifram将服务器的Jitis web应用展示到我们的网站上，我们可以在自己的程序中配置一些东西，如会议名，更深一点还可以调用Jitis提供的命令去做一些业务实现

 pom.xml

@@ -176,6 +176,7 @@


    <build>
        <finalName>edu</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>

 src/main/resources/application-dev.yml

@@ -5,13 +5,13 @@
spring:
  redis:
    # 地址
    host: 124.222.18.104
    host: localhost
    # 端口，默认为6379
    port: 6379
    # 数据库索引
    database: 0
    # 密码
    password: _elG#jZMd+WHgC
#    password: _elG#jZMd+WHgC
  datasource:
    url: jdbc:mysql://42.193.1.25:3306/xzs?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root

 src/main/resources/application-prod.yml

@@ -5,6 +5,10 @@
spring:
  redis:
    host: localhost
    # 端口，默认为6379
    port: 6379
    # 数据库索引
    database: 0
  datasource:
    url: jdbc:mysql://localhost:3306/xzs?useSSL=false&useUnicode=true&serverTimezone=Asia/Shanghai&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&allowPublicKeyRetrieval=true&allowMultiQueries=true
    username: root