问题描述:

工作中碰到这样一种场景, WebApp 已经实现了IM即时通讯及基于WebRTC实现的音视频会议,音视频聊天。 也是半路接手的项目,项目整体是使用WKWebView套壳加载h5 页面实现(后期过审还有很多路要走) 。 h5与原生交互的方案使用的javascriptCore(具体如何使用,不在本文之内)。 大部分的交互工作都是可以得到解决,唯独需要调起WebRTC引擎进行音视频会议,音视频聊天时,WKWebView就无法再提供支持了。

但在手机的Safari浏览器中加载的WebApp在使用音视频这块是完全支持的。 所以首先想到的就是涉及到WebRTC这块的功能,我们能否放到Safari中去处理 ?

方案探索:

方案一:

点击h5中的 发起视频会议通过javascriptCore引擎与oc进行交互, oc拦截到并调起safari浏览器来打开h5封装的音视频会议功能。

//创建一个url
NSURL *url = [NSURL URLWithString:@"视频会议的地址"]; //打开url
[[UIApplication sharedApplication] openURL:url];

通过上面的代码调用, 在点击后,会跳出应用,跳转到safari浏览器来打开视频会议的地址。 通过尝试基本满足要求。 但在使用完成后,返回原生App的体验着实不太友好。 我们知道苹果在iOS9推出了一个SFSafariViewController的控制器,它继承自UIViewController。 接下来的方案尝试用这个控制器来处理。

方案二:

同样, oc拦截h5过来的点击事件,约定一个类型或名称,用于区分是来自哪个事件,并处理逻辑

//创建一个url
NSURL *url = [NSURL URLWithString:@"视频会议的地址"]; //使用SFSafariViewController 打开url
SFSafariViewController *safariVc = [[SFSafariViewController alloc] initWithURL:[NSURL URLWithString:str]];
[vc presentViewController:safariVc animated:YES completion:nil];

通过测试,SFSafariViewController 可以完美支持WebRTC引擎的调用,而且打开的这个页面也是在App内进行的,并没有跳出App,使用体验上有所增强。

视频会议的场景是创建一个room,分享出去。其他用户可以通过room名称及密码来加入到房间。 这个功能非登录用户同样可以使用,本质和业务系统的登录授权没有太多关系,只需要知道room名称及密码就可以加入到视频会议中来。

但在IM即时通讯的功能中,还有一个发起音视频聊天的功能,类似微信的音视频即时通讯。在这个业务场景中,需要用户登录授权,需要发起后,等待对方接听等流程处理。远不是视频会议的使用场景,所以这块就不能简单的通过单纯的SFSafariViewController来处理,还需要解决如下两个问题 :

  1. 用户已登录状态与其他信息如何传递到新开的SFSafariViewController中?
  2. 用户在发起音视频界面,点击挂断,如何能监听到事件,与原生进行交互?

方案三:

更多方案内容详见: https://zhanglei.blog.csdn.net/article/details/121352716

SFSafariViewController 加载的网页与原生oc之间的交互的更多相关文章

  1. 关于android 加载https网页的问题

    我在加载https网页时出现空白, 因此,我就百度一下,可以发现: webView.setWebViewClient(new WebViewClient(){ @Override public voi ...

  2. Scrapy爬取Ajax(异步加载)网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  3. JQuery加载html网页

    在ASP.NET MVC环境中,使用jQuery脚本去实现加载html网页. 一般情况之下,在ASP.NET MVC项目中,你不能在~/Views目录之下添加或是创建任何html为后缀的网页.但这也不 ...

  4. Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

  5. Django加载静态网页模板

    Django加载静态网页模板 步骤: 第一步:在子系统blog根目录下新建模版目录templates,里面新建一个login.html <!DOCTYPE html> <html l ...

  6. iOS-仿支付宝加载web网页添加进度条

    代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...

  7. ajax实现简单的点击左侧菜单,右侧加载不同网页

    实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...

  8. Qt(QtWebEngine)加载本地网页跨域问题的总结

    目录 1. 概述 2. 详论 2.1. 传参 2.2. JS module 3. 建议 4. 参考 1. 概述 浏览器直接加载本地网页的时候,如果网页涉及到加载本地资源(如图片),会出现跨域的问题.Q ...

  9. .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

随机推荐

  1. .NET Core 企业微信回调配置

    1.配置API接收 2.下载加密解密库 地址:https://developer.work.weixin.qq.com/devtool/introduce?id=36388,也可以复制下面的代码 2. ...

  2. Spring Security:用户和Spring应用之间的安全屏障

    摘要:Spring Security是一个安全框架,作为Spring家族的一员. 本文分享自华为云社区<[云驻共创]深入浅出Spring Security>,作者:香菜聊游戏. 一.前言 ...

  3. django--ORM表的多对一关系

    多对一关系是什么 Django使用django.db.models.ForeignKey定义多对一关系. ForeignKey需要一个位置参数:与该模型关联的类  class Info(models. ...

  4. Linux字符集和编码

    计算机内部,所有信息最终都是一个二进制值形式存放 字符集 字符集:charset是character set的简写,即二进制和字符的对应关系,不关注最终的存储形式 编码 字符集编码:encoding是 ...

  5. java基础知识点梳理

    前言 在别人追问我以下几个问题,自己在问题回答上不够全面和准确,对此自己把专门针对这几个问题进行总结! java相关问题 1.Java中构造方法跟普通方法的区别? 构造方法与普通方法的调用时机不同. ...

  6. NC21181 重返小学

    NC21181 重返小学 题目 题目描述 ​ 时光依旧,岁月匆匆.转眼间,曾经的少年郭嘉烜已经长大成人,考上了一所优秀的大学--兰州大学.在经历了一年来自牛顿.莱布尼茨.拉普拉斯的精神洗礼后,他终于决 ...

  7. 图文带你看懂JavaScritpt引擎V8与JS执行过程

    浏览器原理 浏览器内核与js引擎 浏览器内核又称"排版引擎","渲染引擎","浏览器引擎",叫法很多,简单来说干的活就是将代码(HTML,X ...

  8. Tapdata PDK 生态共建计划启动!Doris、OceanBase、PolarDB、SequoiaDB 等十余家厂商首批加入

      2022年4月7日,Tapdata 正式启动 PDK 插件生态共建计划,致力于全面连接数据孤岛,加速构建更加开放的数据生态,以期让各行各业的使用者都能释放数据的价值,随时获取新鲜的数据.截至目前, ...

  9. TMS320F280049 ADC 模块学习

    1. 功能概述 2. 总体框图 block diagram 3.  可配置内容灵活分配到各个模块 或 某次转换中 4.  时钟配置 ADC 模块直接分频于系统最高时钟 5.  SOC 机制 6.  如 ...

  10. 动手实践丨手把手教你用STM32做一个智能鱼缸

    摘要:本文基于STM32单片机设计了一款基于物联网的智能鱼缸. 本文分享自华为云社区<基于STM32+华为云IOT设计的物联网鱼缸[玩转华为云]>,作者: DS小龙哥 . 1. 前言 为了 ...