Cordova IOS 13.6.1 视频不模糊

Posted

技术标签:

【中文标题】Cordova IOS 13.6.1 视频不模糊【英文标题】:Cordova IOS 13.6.1 Video does not Blur 【发布时间】:2020-09-04 15:21:32 【问题描述】:

我在我们的 Cordova ios/android 应用程序中使用 Cordova 插件 (https://github.com/cordova-rtc/cordova-plugin-iosrtc) 以及用于 WebRTC 的 https://apirtc.com/ 产品。当应用程序进入后台(最小化)时,我正在从一个客户端向另一个客户端发送消息(应用程序已最小化),因此未最小化的客户端会模糊其应用程序已最小化的客户端的视频。 我有这个 html,我在其中放置本地和远程视频

<div class="videosArea">
<div id="remote-container"></div>
<div id="local-container"></div>
</div>

我也有我正在应用的这个 css

.blur-on-minimize 
opacity: 0.5;
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);

在 JS 中,我有这段代码来处理应用程序的最小化

session.on('contactMessage', function(e) 
if (e.content === 'VideoPaused') 
   $( "#remote-container" ).addClass( "blur-on-minimize" )
   // $( "#remote-container" ).hide()
  else if (e.content === 'VideoResumed') 
   $( "#remote-container" ).removeClass( "blur-on-minimize" )
   // $( "#remote-container" ).show()

   Logger.info(`Received message $e.content from $e.sender.getId()`)
);

这种类的添加和删除在 IOS 元素上不起作用,但在浏览器和 Android 上可以正常工作。

知道为什么会这样吗?

更新:我也尝试添加类

.blur-on-minimize 
    display:none;

根据以下文档。似乎这在IOS上仍然不起作用 https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/videoCSS.md

【问题讨论】:

【参考方案1】:

我通过调用 IOS 的刷新功能解决了这个问题 https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/iosrtc.md#iosrtcrefreshvideos

session.on('contactMessage', function(e) 
                    if (e.content === 'VideoPaused') 
                        $( "#remote-container video" ).addClass( "blur-on-minimize" )
                        if (Meteor.isCordova && Meteor.isIos) 
                            cordova.plugins.iosrtc.refreshVideos()
                        
                     else if (e.content === 'VideoResumed') 
                        $( "#remote-container video" ).removeClass( "blur-on-minimize" )
                        if (Meteor.isCordova && Meteor.isIos) 
                            cordova.plugins.iosrtc.refreshVideos()
                        
                    
                    Logger.info(`Received message $e.content from $e.sender.getId()`)
                );

记住,模糊是不可能的,你只能做这里列出的属性 https://github.com/cordova-rtc/cordova-plugin-iosrtc/blob/master/docs/videoCSS.md

【讨论】:

以上是关于Cordova IOS 13.6.1 视频不模糊的主要内容,如果未能解决你的问题,请参考以下文章

IOS Cordova/Phonegap 离线视频源标签不起作用

Phonegap / Cordova Youtube 在 iOS 上嵌入视频不起作用

ios上cordova应用程序中的视频没有声音

如何在 Cordova iOS 应用程序中播放 html 5 视频?

性能测试:iOS 13.7 对比 iOS 13.6.1

Cordova iOS 视频标签本地文件源