Android 短视频混合开发(DS-Bridge框架实现视频通信)

先看看实现的效果

实现原生视频的播放,暂停,快进,快退,全屏,退出全屏功能

IOS H5混合开发 android h5混合开发框架_android


IOS H5混合开发 android h5混合开发框架_视频通信_02

混合跨平台开发

包括web开发、Hybrid开发、React Native、Flutter等

这里使用Hybrid实现web与原生的混合开发,通过DS-Bridge框架+HTML、JS代码+android Native实现视频通信

Hybrid框架

Hybrid结构层次

(1)H5页面层。

(2)桥接层:BridgeJs是一个.js文件,是NA和H5通信的桥梁,WebView在加载url之前需要将BridgeJs前置注入。

(3)基础通信层:该层主要由BridgeWebView、BridgeManager、WebPlugin组成,BridgeWebView提供了基本的页面加载,并捕获BridgeJs发送过来的事件交给BridgeManager进行处理;BridgeManager具备BridgeWebView的控制能力,负责处理NA向H5以及H5向NA的消息处理;WebPlugin是离线化插件,为了加速H5页面的展示,可将某个业务的h5、css、js、图片等资源打包,并离线化至本地,在打开相应页面的时候只需获取其对应页面的数据,省去h5、css、js、图片等资源的下载时间。

(4)协议分发层:该层是一个总体的demo协议分发器,将收到的协议分发到各个协议实现层进行处理。

(5)协议实现层:该层针对demo协议不同的scheme,分别对应不同的实现。NativePageCall用于APP内各个页面的跳转;WebSDKCall是用于为H5提供各种NA能力,WebPluginCall用于打开本地离线化插件。

(6)Native层:该层为客户端App层,为上述几种协议提供能力调用和支持。

DSBridge环境搭建

(1)DSBridge框架接入

①project 的 build.gradle里

IOS H5混合开发 android h5混合开发框架_视频通信_03

②module 的 build.gradle里

IOS H5混合开发 android h5混合开发框架_视频通信_04

(2)前端调用客户端

IOS H5混合开发 android h5混合开发框架_android_05

(3)客户端调用前端

IOS H5混合开发 android h5混合开发框架_hybird_06

(4)同步调用和异步调用

a)同步调用:public object handler(Object msg)

b)异步调用:public void handler(Objectarg,CompletionHandler handler)

关键技术点

视频播放H5页面编写

客户端原生播放器的使用

基于DSBridge搭建数据通道

暴露视频播放能力提供给JavaScript

项目框架

IOS H5混合开发 android h5混合开发框架_视频通信_07

1、H5与Android绑定

2、H5视频接口

3、重写播放器控件

4、供H5页面引用,从github下载下来放到assets下

5、H5页面

项目链接

github:https://github.com/guyuanjunxi/PKVideo