如何在reactjs中隐藏jitsi水印

Posted 2023-02-19

【中文标题】如何在reactjs中隐藏jitsi水印

【英文标题】：How to hide jitsi watermark in reactjs

【发布时间】：2020-11-29 08:32:43

【问题描述】：

我正在使用 react-jitsi 库来渲染 jitsi 视频

var interfaceConfig = 
   SHOW_BRAND_WATERMARK: true,
   SHOW_WATERMARK_FOR_GUESTS: false,
;

<Jitsi
      // doamin="meet.jit.si"
      roomName='12345rfewhgresjttyi'
      displayName='prakash'
      password=password
      interfaceConfig=interfaceConfig
    />

我尝试使用 interfaceConfig 在后台隐藏 jisti 水印。但界面配置不会影响任何 UI。

我也试过css：

.leftwatermark 
  display: none;

这也不行。

我参考了this隐藏水印的链接

有没有办法使用reactjs隐藏jitsi水印？

【问题讨论】：

我会尝试找到水印父容器的确切类名并添加：.theclassname visibility:hidden; display: none; opacity: 0;

.largeVideoContainer .watermark .leftwatermark 这是父类，但 css 不会影响任何东西

如果它嵌入到视频中，我认为没有办法删除它

删除服务器中的文件。是/usr/share/jitsi-meet/images/watermark.png

【参考方案1】：

没有任何方法可以去除 jitsi 水印。 但你可以删除它背后的链接。

【参考方案2】：

SHOW_BRAND_WATERMARK 和 SHOW_WATERMARK_FOR_GUESTS不能被客户端覆盖，并且必须在服务器配置中

您必须编辑文件 interface_config.js

sudo nano /usr/share/jitsi-meet/interface_config.js

然后切换到

SHOW_BRAND_WATERMARK：假， SHOW_WATERMARK_FOR_GUESTS：假，

然后，保存您的文件，然后重新启动您的浏览器页面。

请注意，当您在服务器上升级 Jitsi 时，此文件可能会重置为默认值。路线图中已要求修复。

【参考方案3】：

你可以改变css中的背景图片链接，如下所示

.leftwatermark 
left: 32px;
top: 32px;
background-position: center left;

background-image: url(your-image-url);  // better view

【讨论】：

您无法从外部父级更改 iframe 的 css。这行不通。

【参考方案4】：

如果您需要使用iFrame API隐藏Jitsi meet的水印，您需要做的就是覆盖interface_config.js中包含的这些属性

SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false

const options = 
    ...
    configOverwrite:  startWithAudioMuted: true ,
    interfaceConfigOverwrite:  DISABLE_DOMINANT_SPEAKER_INDICATOR: true ,
    ...
;
const api = new JitsiMeetExternalAPI(domain, options);