功能:使用 webview 的方案,在 App 中实现视频/直播的悬浮小窗播放效果,支持应用内小窗、系统小窗,在订单页小窗播放,回到直播间小窗消失
场景:适用于要在 App 中快速实现直播带货场景,或在 App 中需要点播视频小窗播放的场景
支持环境:安卓、iOS 、鸿蒙
前置条件:使用保利威的 webview SDK Demo ,对方案有任何疑问,可+V:wjc24680525 ,备注“小窗”
当前将提供的源码包中的 PolyvAndroidWebViewDemo 、PLVWebViewSDK 、PLVJsBridge 、PLVFloatWindow 四个项目放入到同一目录下,然后使用编译器打开 PolyvAndroidWebViewDemo 项目即可。
参考 1.2 功能对接文档
如果需要更换 web-native 通信协议的情况时,可以参考提供的 1.3 更换 web-native 通信规则注意事项
在启动 PLVWebViewDemoActivity 之前,我们需要设置加载的 Url 和添加上需要用到的 Ua ,这里可以通过PLVWebViewConfig
来进行设置,示例代码如下:
PLVWebViewConfig config = new PLVWebViewConfig();
config.setUrl("需要加载的 url") .setUa("需要添加的 UA");
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);
当前 SDK 支持设置小窗边框颜色,通过PLVFloatWindowManager
进行设置,示例代码如下:
PLVFloatWindowManager.getInstance().setSolidColor(Color.RED);
当前 SDK 支持设置小窗边框颜色,通过PLVFloatWindowManager
进行设置,示例代码如下:
PLVFloatWindowManager.getInstance().setSolidWidth(20);
当进程退到后台时会自动唤出小窗(默认关闭),通过PLVFloatWindowManager
进行设置,示例代码如下:
PLVWebViewConfig config = new PLVWebViewConfig();
config.setSupportAutoFloating(true); // 开启自动开启小窗功能
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);
当前小窗支持系统小窗和应用窗(默认使用系统小窗),如果开启系统小窗需要请求小窗悬浮权限,而应用小窗不需要请求权限,注意应用小窗依赖于 Activity ,当 Activity 被销毁时,应用小窗也会被关闭。
PLVWebViewConfig config = new PLVWebViewConfig();
config.isSystemFloatingWindow(true);// 为 true 时使用系统窗,false 为使用应用小窗
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);
当前 sdk 支持通过原生或 web 端来弹出请求悬浮权限弹窗(默认使用原生弹窗方式)。
注意如果是选择使用 web 端来弹窗请求悬浮权限弹窗,需要 web 端支持对应的事件。
PLVWebViewConfig config = new PLVWebViewConfig();
config.setUseWebRequestPermission(true);// 为 true 时 web 弹窗,false 为使用原生弹窗
PLVWebViewDemoActivity.startWebViewDemoActivity(PLVURLInputActivity.this, config);
SDK 内部已经定义了一部分与 web 端通信的 js 事件,这些通信事件可以在 demo 层中重写某些方法进行监听和拦截处理,这里以监听 onShare 事件进行为例:
public class PLVWebViewDemoActivity extends PLVWebViewBaseActivity {
@Override
public void onShare() {
// 监听到 onShare 事件的处理
...
super.onShare();
}
}
可以选择需要监听的 js 事件进行重写实现对事件的监听。
注意:这些 js 通信事件都是与 webview 关联,开启系统小窗后,即使 Activity 被销毁依然能收到来自 web 端发送的消息,触发这些方法,所以重写这些方法时,尽量避免做与 Activity 生命周期关联的操作
当前支持通过重写方法来监听事件;
有以下这些方法:
/**
* 点击商品,将切换到小窗时会触发该回调
*
* @param width 小窗的宽
* @param height 小窗的高
* @param newPage 是否打开新的一页
* @param link 打开新的一页加载的 url
* @param data 其他更多数据,开发者可根据需要自定义实现逻辑,数据为 json 格式
*/
void changeToWindowForProduct(int width, int height, boolean newPage, String link, String data);
/**
* 用户主动调用切换到小窗的方法,在切换前会触发该回调
*
* @param width 小窗的宽
* @param height 小窗的高
*/
void changeToWindowForUser(int width, int height);
/**
* 点击小窗区域,从小窗中恢复到页面触发该回调
**/
void changeToNormal();
/**
* 点击小窗关闭按钮,关闭小窗触发该回调
**/
void closeWindow();
/**
* 点击返回事件
*/
void onGobackPressed();
/**
* 横置屏幕事件
*/
void onLandScreen();
/**
* 竖直屏幕事件
*/
void onPortraitScreen();
/**
* 分享事件
*/
void onShare();
/**
* 收藏事件
*/
void onCollect();
/**
* 隐藏状态栏,进入沉浸模式
*/
void hideNavigationBar();
/**
* 显示状态栏,退出沉浸模式
*/
void showNavigationBar();
/**
* 打开悬浮窗权限页面
*/
void requestFloatWindowPermissionByWeb();
/**
* 发送当前小窗的打开状态给前端
*/
void getFloatWindowStatus();
/**
* 获取当前的网路状态
*/
void getCurrentNetworkStatus();
/**
* 设置是否开启自动悬浮窗权限
* @param enable true 为打开,false 为甘比
*/
void setEnableBackground(boolean enable);
/**
* 获取是否开启了自动悬浮窗的权限
*/
void getEnableBackground();
/**
* 处理其他 event
*/
void handleOtherEvent(String event);
SDK 支持注册自定义 js 事件,可以通过下面的方式来注册自定义 js 事件,示例代码如下:
@Override
protected void initHandleForDemo() {
//监听来自 web 端发送事件
floatableLayout.getWebView().registerHandler("监听事件", new BridgeHandler() {
@Override
public void handler(String s, CallBackFunction callBackFunction) {}
});
//向 web 端发送对应事件和消息
floatableLayout.getWebView().callHandler("发送事件", "发送消息", new CallBackFunction() {
@Override
public void onCallBack(String s
}
});
}
注意:注册新的 js 事件时不仅需要原生端做相应的操作,还需要 web 端有注册对应的事件,否则是原生端是不会接收到对应的事件消息
当前 SDK 内部是通过 Jsbridge 该库来实现 web 端与原生端的通信,Jsbridge 中定义了 web 端与原生的通信规则,如果集成项目是没有制定指定的 web-native 通信规则,那么可以直接使用 SDK 的通信规则即可,无需其余改动。
如果集成项目中有定制指定的 web-native 通信规则,可以参考下面的方式进行修改。
无论是使用哪一种通信规则,关键在于原生端发送/接收 web 端消息,web 端发送/接收原生端消息,所以当需要更换 SDK 内部的 web-native 通信规则仅关注上述的两点即可。
因为 sdk 内部是依赖于 jsbridge 该模块实现 web-native 通信,当需要更换通信规则时,可以选择不依赖该模块。
public class PLVBaseWebView extends BridgeWebView {
....
}
可将 PLVBaseWebView 继承的 BridgeWebView 更换为集成项目中指定通信规则的 webview 。
WebViewClient 是实现原生端接收 web 端消息的关键,也是定制修改 webview 的核心部份,所以在更换通信规则时也需要更换 WebViewClient
//替换自己需要用到的 WebViewClient
webView.setWebViewClient(webviewClient);
可以通过 setWebViewClient(new WebViewClient() 方法为 webview 设置指定 WebViewclient 。
public void callMessage(String type, String message) {
//当使用的新的 web-native 规则时,可以将下面的代码修改为 webview 使用新规则发送消息时的代码
webview.callHandler(type, message, new CallBackFunction() {
@Override
public void onCallBack(String s) {
...
}
});
}
当前 SDK 内部时通过 webview.callHandler()方法来实现消息的发送,当更换新的通信规则时,可以将这个 webview.callHandler()方法替换为新规则中对应原生端发送消息的方法。
webview.registerHandler("xxx", new BridgeHandler() {
@Override
public void handler(String s, CallBackFunction callBackFunction) {
...
}
});
当前 SDK 内部是通过 webview.registerHandler()方法来监听 web 端发送的消息,当更换新的通信规则时,可以将这个 webview.registerHandler()方法替换为新规则中对应原生端接收 web 消息的方法。
web-native 通信规则是由 web 端和原生端两端定制的,所以当更换 web-native 通信规则不仅需要原生端更换,web 端也需要进行更换。
当前需要通信的 web 页面 与 更换通信规则后的原生端 所使用的通信规则是否是对应,如果是对应的情况下无需做其他更替。
如果需要通信的 web 页面与 更换通信规则后的原生端 所使用的不对应,那么就需要去更替 web 端的通信规则。
如 web 端页面需要使用保利威的 web 页面(当前保利威 web 页面与 sdk 内部所使用的通信规则一致,当原生端切换通信规则,那么 web 端页面也需要更换对应通信规则)
window.bridge.callHandler(
'callAppEvent', message,
function(responseData) {
//发送消息
....
}
);
当前 SDK 内部与 Web 端对应的通信规则是通过 bridge.callHandler()方法来进行发送消息,当替换新的通信规则后,可以使用新的发送方式来取代这个 bridge.callHandler()方法
// 监听来自 xxx 事件的消息
bridge.registerHandler("xxx", function(data, responseCallback) {
document.getElementById("show").innerHTML = (data);
});
当前 SDK 内部与 Web 端对应的通信规则是通过 bridge.registerHandler()方法来接收消息,当替换新的通信规则后,可以使用新的发送方式来取代这个 bridge.registerHandler()方法
名称· | 要求 |
---|---|
iOS 系统 | 9.0+ |
CocoaPods | 1.11.3+ |
Xcode | 11.0+ |
打开项目的 PROJECT - Deployment Target - iOS Deployment Target 改为 9.0 或更高。
打开项目的 TARGETS - General - Deployment Info ,把 iOS 系统改为 9.0 或更高。
打开项目的 info.plist
文件,添加如下内容:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
</dict>
播放器支持全屏播放,需要在 TARGETS - General - Deployment Info 中,勾选支持的横屏旋转方向。
打开项目的 TARGETS - Signings & Capabilities ,点击 + Capability ,选择 Background Modes ,勾选 ‘Audio, AirPlay, and Picture in Picture’。
在 Podfile 文件中,添加以下内容:
pod 'PLVWebViewSDK', '~> 1.0.0'
在终端执行 pod install
如果需要使用系统小窗功能,则需要在 Podfile 文件中另外添加以下内容
# 包含系统画中画 -- 如果不使用系统小窗 则不需要下面配置
pod 'PLVAliHttpDNS', '~>1.10.0'
pod 'PLVFoundationSDK', '1.10.6', :subspecs => ['BaseUtils', 'NetworkUtils', 'ErrorCode', 'LogReporter', 'ConsoleLogger', 'Reachability', 'SafeModel', 'ProgressHUD']
pod 'PLVBusinessSDK', '1.10.4', :subspecs => ['BaseBSH']
pod 'PLVLiveScenesSDK', '1.10.6', :subspecs => ['Base', 'LogReporter', 'ConsoleLogger', 'ErrorManager', 'Network', 'Player', 'BasePlayer', 'LivePlayer', 'LivePlaybackPlayer', 'PictureInPicture']
并在终端执行 pod install
,并且将对应的 PLVLiveScenesSDK 、PLVBusinessSDK
进行替换。
将 PLVWebViewSDK.framework 库添加到自己的项目中。如果是使用源码的方式集成,则需要将 PLVWebViewSDK 文件整个添加到自己的项目即可。
1.如果项目使用系统小窗功能则需要将以下库添加到项目中
PLVAliHttpDNS 、PLVBusinessSDK 、PLVFoundationSDK 、PLVIJKPlayer 、PLVLiveScenesSDK
2.在 General => Frameworks ,Libraries ,and Embedded Content 中移除已添加的 PLVFoundationSDK.framework 、PLVLiveScenesSDK.framework 、PLVBusinessSDK.framework 库,并添加系统库 libresolv.tbd 。
3.设置 PLVIJKPlayer 为 Embed & Sign
4.Build Settings ,Other Linker Flags 中添加 -ObjC ,如果项目已配置有,则不需要重复添加
5.运行报错
如果模拟器运行报错需要在 Build Settings 中设置 Excluded Architecture => Any iOS Simulator SDK 为 arm64
如果运行报错
Building for iOS Simulator, but the linked and embedded framework '***' was built for iOS + tvOS Simulator
可在 Build Settings 中 设置 VALIDATE_WORKSPACE 为 YES 即可。
创建想要展示 WebView 的控制器页面 DemoViewController
继承于PLVWebViewBaseViewController
,并通过初始化方法 -initWithConfig:
创建控制器页面。示例代码如下:
// PLVWebViewDemoViewController.h
#import <PLVWebViewSDK/PLVWebViewSDK.h>
@interface PLVWebViewDemoViewController : PLVWebViewBaseViewController
@end
初始化时可通过重写 initHandleForDemo
进行自定义配置,同时可以对 Bridge 事件进行自定义处理。示例代码如下:
// PLVWebViewDemoViewController.m
@implementation PLVWebViewDemoViewController
#pragma mark - [ Override ]
- (void)viewDidLoad {
[super viewDidLoad];
}
/// 初始化时,可以进行的自定义配置
//- (void)initHandleForDemo {
//
//}
#pragma mark - [ Delegate ]
#pragma mark PLVFloatableWebViewBridgeDelegate
/// 如需要监听 js 回调事件,可以通过 Delegate 事件进行相应的处理,例如 webviewBridgeShare 消息
//- (void)webviewBridgeShare:(PLVFloatableWebViewBridge *)bridge {
//
//}
@end
创建、配置、打开直播页面控制器
PLVWebViewConfig *config = [[PLVWebViewConfig alloc] init];
config.urlString = urlString;
config.allowFloatingWindow = YES;
config.isSystemFloatingWindow = NO;
config.userAgent = self.uaTextView.text;
config.enableAutoFloatWindow = YES;
PLVWebViewDemoViewController *webVC = [[PLVWebViewDemoViewController alloc] initWithConfig:config];
[self.navigationController pushViewController:webVC animated:YES];
创建 PLVWebViewBaseViewController 时需要根据 PLVWebViewConfig 配置来进行初始化。
PLVWebViewConfig *config = [[PLVWebViewConfig alloc] init];
config.urlString = @"";
config.allowFloatingWindow = YES;
config.isSystemFloatingWindow = NO;
config.userAgent = @"";
config.enableAutoFloatWindow = YES;
PLVWebViewDemoViewController *floatingWebVC = [[PLVWebViewDemoViewController alloc] initWithConfig:config];
我们还可以对浮窗的大小、默认位置、以及样式进行配置修改:
// 配置浮窗大小
[[PLVFloatWindowManager sharedManager] setFloatingWindowSize:size];
// 配置浮窗初始位置
[[PLVFloatWindowManager sharedManager] setFloatingWindowLocation:point];
// 应用内小窗样式修改
UIView *appWindowView = [PLVFloatWindowManager sharedManager].floatingWindow;
appWindowView.layer.cornerRadius = 8.0f;
appWindowView.layer.masksToBounds = YES;
其中,调用 -moveContentViewToWindow:size:
方法主动唤起的浮窗,默认宽度为屏幕的 0.3 倍,宽高比 16:9 。通过保利威的网页唤起浮窗,浮窗大小由网页告知。初始位置是指浮窗右下角距离屏幕右下角的相对位置,默认为(-10, -100), 表示悬浮窗右边沿距离屏幕右边沿 10pt ,下边沿距离屏幕下边沿 100pt 。
如果要使用画中画功能,首先需要在 Podfile 文件中 添加支持画中画的 SDK ,然后执行 pod install
;
# 包含系统画中画 -- 如果不使用系统小窗 则不需要下面配置
pod 'PLVAliHttpDNS', '~>1.10.0'
pod 'PLVFoundationSDK', '1.10.6', :subspecs => ['BaseUtils', 'NetworkUtils', 'ErrorCode', 'LogReporter', 'ConsoleLogger', 'Reachability', 'SafeModel', 'ProgressHUD']
pod 'PLVBusinessSDK', '1.10.4', :subspecs => ['BaseBSH']
pod 'PLVLiveScenesSDK', '1.10.6', :subspecs => ['Base', 'LogReporter', 'ConsoleLogger', 'ErrorManager', 'Network', 'Player', 'BasePlayer', 'LivePlayer', 'LivePlaybackPlayer', 'PictureInPicture']
替换对应的离线包
用提供的离线包PLVLiveScenesSDK 、PLVBusinessSDK
将 Pods 文件夹下对应的 SDK 进行替换。
当开启了 enabelWhiteList
后,只有添加了域名白名单的链接才会支持原生与前端的通信,才支持小窗的功能。
[PLVUAConfigManager sharedManager].enabelWhiteList = YES;
[[PLVUAConfigManager sharedManager] addHostWhitelist:@[@"live.polyv.cn"]];
同时支持 自定义配置 UA
[[PLVUAConfigManager sharedManager] addCustomUserAgent:@""];
在 SDK 内部已经对一些事件进行了处理,如果想要自定义处理某些事件可以在 demo 中进行监听拦截处理。示例如下:
#pragma mark - [ Delegate ]
#pragma mark PLVFloatableWebViewBridgeDelegate
/// 如需要监听 js 回调事件,可以通过 Delegate 事件进行相应的处理,例如 webviewBridgeShare 消息
- (void)webviewBridgeShare:(PLVFloatableWebViewBridge *)bridge {
}
可以通过 Demo 层注册和调用自定义事件,示例代码如下:
- (void)initHandleForDemo {
[self.contentAreaView.mainWebView.bridge registerHandler:@"" handler:^(id _Nonnull data, PLVWVJBResponseCallback _Nonnull responseCallback) {
}];
[self.contentAreaView.mainWebView.bridge callHandler:@"" data:nil responseCallback:^(id _Nonnull responseData) {
}];
}
本项目中使用的是开源库 WebViewJavascriptBridge 来实现 web 和 native 之间的通信。如果接入的项目中没有用到 web-native 通信,则不需要做任何调整。如果接入的项目中也用到 web-native 通信,则可以参考下面的方式进行修改。
SDK 中使用的 WebViewJavascriptBridge 来实现通信的,在 PLVFloatableWebViewBridge 中对其进行了封装处理,如果需要更换 native 端通信规则只需要修改 PLVFloatableWebViewBridge 这个类即可
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler {
//当使用的新的 web-native 规则时,可以将下面的代码修改为 webview 使用新规则注册消息时的代码
[self.bridge registerHandler:handlerName handler:handler];
}
- (void)callHandler:(NSString*)handlerName data:(id _Nullable)data responseCallback:(WVJBResponseCallback _Nullable)responseCallback {
//当使用的新的 web-native 规则时,可以将下面的代码修改为 webview 使用新规则发送消息时的代码
[self.bridge callHandler:handlerName data:data responseCallback:responseCallback];
}
当 native 端通信规则改变时,web 端则要根据是否与原来的通信方式原理相同来判断是否需要修改。
bridge.registerHandler("testJavascriptHandler",
function (data, responseCallback) {
console.log(data);
responseCallback(data);
}
);
bridge.callHandler("callAppEvent", { },
function responseCallback(responseData) {
console.log(responseData);
}
);
当前 web-native 的通信是通过 bridge 这种方式来发送和接收消息的,如果需要调整可用集成项目 web 端接收、发送消息的方式来进行替换。
iOS 因为系统限制想实现系统小窗只能通过画中画的功能,同时这个功能会有版本限制,在 iOS14+开始支持 iPhone 的画中画功能。同时直播如果使用系统播放器 AVPlayer 会有 14s+的高延迟,IJKPlayer 可以实现低延迟,但是 iOS15 以上画中画才支持 SampleBufferLayer ,因此如果直播低延迟的话需要 iOS15+。
PLVWebSDK 项目从属于易方信息科技股份有限公司,对保利威云直播、云点播系列产品的直播、回放观看做了良好的适配,极大优化了用户的观看体验,并支持浮窗播放等扩展功能,也可作为其他网页的展示容器。
本项目包含功能如下:
ohpm install plvwebsdk
OpenHarmony ohpm 环境配置等更多内容,请参考如何安装 OpenHarmony ohpm 包
ohos.permission.INTERNET
ohos.permission.GET_NETWORK_INFO
1.设置 UA
当前可以通过下面的方式来设置需要的 UA
PLVWebViewConfig().setUa("Android" + PLVUAConfig.defaultUA)
注意:如果需要到 Saas 页面的小窗功能的情况,必须在 UA 中带上 Android 和 PLVUAConfig.defaultUA 字段
2.设置 url
可以通过下面的方式来设置需要加载的 url
PLVWebViewConfig().setUrl("需要加载的 url")
3.设置是否允许小窗悬浮
可以通过下面的方式来设置是否允许开启小窗功能,默认是开启的,如不需要可以设置为 false
PLVWebViewConfig().setAllowFloatingWindow(true)
当前 SDK 内部已经注册好与前端页面通信的事件,当接入 sdk 后就能直接使用这些事件。
SDK 也支持注册自定义事件,可以通过下面的方式来进行注册
this.controller.registerHandler("自定义事件", (data: string) => {// 监听自定义事件的处理
})
this.controller.callHandle("发送原生事件", "xxx", () => {//发送原生事件
})
如果需要监听/拦截 SDK 内部已经实现了的事件,可以通过下面的方式继续监听/拦截,这里以 onShare 事件为例子,如果需要监听/拦截其他事件可以仿照这里来完成
this.controller.registerCustomerContainEvent({
onShare: () => {// 监听到 onShare 事件时的操作 return true // return true 表示拦截掉分享事件 false 就继续由 sdk 往下执行
}
})
// 小窗播放事件
webviewBridage?.sendData('clickProduct', webviewData);
// 没有小窗播放的情况: 监听自定义事件
webviewBridage?.sendData('clickProductCustom', webviewData);
// 数据格式
const webviewData = {
width: plvWebviewDataSize.width,
height: plvWebviewDataSize.height,
newPage: true,
link: “跳转的自定义 url”,
data: {
type : out | inner | stock
link : “跳转的自定义 url” ( 同上 link )
market : ‘5053’,
code : 789465,
name : 名称
},
}
clickProduct 事件 和 clickProductCustom 自定义 webviewData ---> data 下面根据 type 和 其他参数完成 app 内链接跳转功能
对方案有任何疑问,可+V:wjc24680525 ,备注“小窗”
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.