如何在 Cordova Opentok 插件中隐藏/显示视频以在 Ionic 中进行视频通话？

Posted 2023-03-15

【中文标题】如何在 Cordova Opentok 插件中隐藏/显示视频以在 Ionic 中进行视频通话？

【英文标题】：How to hide/show video in Cordova Opentok plugin for video call in Ionic?

【发布时间】：2019-01-07 23:33:51

【问题描述】：

我在 Ionic 应用程序中使用这个 Opentok 插件来实现视频通话功能。我必须根据单个屏幕中的特定条件隐藏/显示视频，但我无法从给定的插件链接中找到任何帮助。

https://github.com/opentok/cordova-plugin-opentok

尝试使用 CSS 类隐藏视频

.OT_root video 
   display: none !important;

但它不起作用。

【参考方案1】：

TokBox Developer Evangelist here（我还帮助维护Cordova OpenTok plugin）。

Cordova OpenTok 插件使用本机 OpenTok SDK，并将 Publisher 和 Subscriber 的本机 ios 和 android 视图放置在 WebView div 元素的顶部。这意味着原生视图叠加在 DOM 中创建的 div 元素上。

应用 CSS 更改后，您必须调用 OT.updateViews 将此信息传递给本地层，指示视图已更改。 updateViews 方法通过 JS 桥将 DOM 位置、宽度、高度等发送到本机层，然后使用该信息适当地更新本机视图。

你可以这样做：

document.getElementById('publisher').style = 'display: none !important;';
OT.updateViews();

请注意，在上面的代码中，我们假设 publisher div 元素的 Id 设置为 publisher。您可以将代码更改为您设置的代码。

请注意，隐藏视图只会将其从屏幕上隐藏起来，但不会停止视频的发布。要停止发布，请使用 session.unpublish(publisher) 或 publisher.destroy。

【讨论】：

感谢您的快速回复。有问题的 CSS 写的对吗？你的意思是在那之后我打电话给 updateViews？

是的，没错。我已更新我的答案以反映更改

尝试过相同但不起作用。你能看看我是什么东。 keepnote.cc/opentok

我刚刚运行了你的代码，当你设置 div.style.display = 'none !important;' 时它看起来不起作用- 请改用上面的代码示例。我还继续使用您的代码更新了示例的keepnote。

出现错误无法分配给“样式”，因为它是只读属性。

【参考方案2】：

如果有人仍在寻找实现 OP 要求的方法，这就是我设法实现的方法。

我尝试按照 Manik 的说明进行操作，但似乎 display: none !important; 不太可靠，因此我决定将不应显示的视频移出屏幕。

具有元素 id 'subscriber' 的订阅者的示例（隐藏）：

document.getElementById('subscriber').style = 'top: 5000px!important; position: fixed!important;';
OT.updateViews();

我猜你也可以使用left 代替top。

请记住，这不会中断视频流，它只是隐藏发布者/订阅者（参见 Manik 的解释）。