js页面初始化方法只调用一次_【聊技术】记一次腾讯TBS浏览服务集成实践

这次的分享源于最近的实际开发工作。

项目需求是

• 在原生Android应用中嵌入WebView&＃xff0c;放置用于支撑音视频直播业务的Web页&＃xff1b;
• 另外还需提供Word、Excel、PowerPoint、PDF等常见文档格式的内容预览。

经过一番技术选型&＃xff0c;最终选定集成腾讯TBS浏览服务进项目&＃xff0c;支撑如上所述两个功能。

能力集成

1. 首先进入下图所示网页&＃xff0c;在该下载页下载SDK并保存。

2. 下载成功后&＃xff0c;将jar包放入要集成该能力的Module的libs目录下。随后&＃xff0c;在Android Studio中以Project视图方式显示项目树形结构&＃xff0c;找到这个jar包&＃xff0c;单击右键&＃xff0c;选择“Add as Library”。稍等片刻&＃xff0c;即可完成库引入。

3. 接着&＃xff0c;打开Android原生项目的AndroidManifest.xml配置文件&＃xff0c;声明如下权限&＃xff08;特别注意需要申请动态权限的权限&＃xff0c;应另外做申请&＃xff09;&＃xff1a;


4. 初始化SDK&＃xff0c;分别在Java代码和AndroidManifest.xml中执行以下代码初始化腾讯TBS&＃xff1a;

到此&＃xff0c;我们就可以和使用系统原生WebView API一样去使用腾讯TBS中的WebView了。在导包时&＃xff0c;注意要导入以下包&＃xff0c;而非系统原生&＃xff1a;

载入网页并执行JS方法

基本实现

这一步比较简单&＃xff0c;和使用系统原生WebView及相关API基本一致。我把要载入的网页放到了项目的assets目录下&＃xff0c;因此我的这部分代码片段如下&＃xff1a;

注&＃xff1a;videoPreviewWv为WebView对象。

除上述基本的加载网页外&＃xff0c;我还希望在网页加载完成后调用里面的js方法&＃xff0c;以便在网页加载完成后立刻开始直播。

因此&＃xff0c;我增加了如下方法&＃xff1a;

当网页加载完毕后&＃xff0c;onPageFinished()方法被回调。

evaluateJavascript()则负责调用js方法&＃xff0c;各位可以按照jsStr字符串的值作为格式参考&＃xff0c;适配自己的js文件。

如上代码所示&＃xff0c;当网页加载完毕后&＃xff0c;我调用了js中的open()方法&＃xff0c;传入了token、视频推流IP等参数。

对于无需任何参数的js方法&＃xff0c;我以停止直播的方法为例&＃xff1a;

怎么样&＃xff1f;还算简单吧&＃xff1f;不过&＃xff0c;到此&＃xff0c;网页还是显示不正常。

经过反复排查&＃xff0c;我发现问题在于以下三点&＃xff1a;

忽略SSL安全连接错误

在实际调试中&＃xff0c;我发现只做完以上工作&＃xff0c;网页并不能显示出来&＃xff0c;原因是SSL安全连接错误。

当遇到这种问题时&＃xff0c;我们希望忽略并继续加载网页。实现起来也很容易&＃xff1a;

默认给予摄像头、麦克风权限

到此&＃xff0c;网页可以显示了。但是&＃xff0c;依然存在不足。

每次执行js的open()方法时&＃xff0c;由于网页会请求摄像头和麦克风的权限&＃xff0c;依然会有权限请求的对话框&＃xff0c;而实际上用户已经在之前&＃xff0c;被原生代码请求过权限需求了。这样一来&＃xff0c;相当于重复请求权限。而且每次开启直播&＃xff0c;都会请求一次。

那么&＃xff0c;有没有办法让嵌入的WebView默认允许这些权限呢&＃xff1f;

当然有&＃xff0c;下面是自动给予权限的相关代码&＃xff1a;

网页默认白边的消除

经过上述一系列操作&＃xff0c;我们想要的功能已经实现了。不过还有最后一点美中不足——网页有白边。

这个问题其实不是原生代码的问题&＃xff0c;需要修改嵌入的Web页面&＃xff08;HTML&＃xff09;。加上如下代码&＃xff1a;

好了&＃xff0c;到此&＃xff0c;WebView的嵌入就完成了。

常用类型文档预览

接下来&＃xff0c;我们再来聊聊使用腾讯TBS进行常见类型文档的预览。

下载文档到本地

由于文档预览暂时不支持在线文件&＃xff0c;因此需要我们先把文件下载到本地。网络下载不是本文的重点&＃xff0c;这里就不再详述了。

不过&＃xff0c;如果我们需要成功使用腾讯TBS的文件预览能力&＃xff0c;需要在AndroidManifest.xml中做如下声明&＃xff1a;

其中&＃xff0c;provide_file_paths内容如下&＃xff1a;

关于provide_file_paths的定义规则&＃xff0c;另请搜索&＃xff1a;”FileProvider 路径配置策略”。

启动文件预览视图

文件下载成功后&＃xff0c;执行下列代码打开文件预览界面。

好了&＃xff0c;到此&＃xff0c;我们就完成了网页的内嵌以及常见文档的预览。

本次分享到此就结束了&＃xff0c;希望以上内容对你有所帮助。