WebRTC|通过Jitsi-meet构建属于自己视频会议的Android/IOS SDK

想学更多的WebRTC知识,请关注WebRTC中文社区 准备工作 安装好Jitsi的服务端,可以参考我之前的文章5分钟搭建属于你的视频会议系统
,Jitsi手动安装
服务端需要申请证书,配置https证书。
说明 官方提供Android和IOS)的sample示例程序,可以通过这个示例程序上面的代码以及官方文档,很快的把sdk接入到你的项目。
可是官方提供的sdk页面和功能不一定都满足我们的需求,这个时候我们的就需要自己构建SDK了。
clone项目

git clone git@github.com:jitsi/jitsi-meet.git

如果觉得慢,国内镜像
git clone https://gitee.com/xiangyanga/jitsi-meet.git

安装node和npm
  • Node.js >= 12 npm >= 6.
sudo apt-get install npm nodejs cd jitsi-meet npm install

此时可能会等到一段时间,很多包在github上
修改config.js把jitsi-meet.example.com改为你的装有Jitsi 服务端的域名
hosts: { // XMPP domain. domain: 'jitsi-meet.example.com',// When using authentication, domain for guest users. // anonymousdomain: 'guest.example.com',// Domain for authenticated users. Defaults to . // authdomain: 'jitsi-meet.example.com',// Jirecon recording component domain. // jirecon: 'jirecon.jitsi-meet.example.com',// Call control component (Jigasi). // call_control: 'callcontrol.jitsi-meet.example.com',// Focus component domain. Defaults to focus.. // focus: 'focus.jitsi-meet.example.com',// XMPP MUC domain. FIXME: use XEP-0030 to discover it. muc: 'conference.jitsi-meet.example.com' },// BOSH URL. FIXME: use XEP-0156 to discover it. bosh: '//jitsi-meet.example.com/http-bind',// Websocket URL // websocket: 'wss://jitsi-meet.example.com/xmpp-websocket',// The name of client node advertised in XEP-0115 'c' stanza clientNode: 'http://jitsi.org/jitsimeet',

  • 修改webpack.config.js https://alpha.jitsi.net改为你的域名,或者配置环境变量
const devServerProxyTarget = process.env.WEBPACK_DEV_SERVER_PROXY_TARGET || 'https://alpha.jitsi.net';

启动程序
make make dev

修改lib-jitsi-meet为本地仓库
lib-jitsi-meet是jitsi-meet的webrtc的核心库,Jitsi的webrtc的能力是来自这个库,此库可以直接单独使用,用来构建自己的GUI
  • 为什么要修改它?
    因为你可能需要更改一些webrtc的配置,那么要让这个能力生效,你就需要在Jitsi-meet改为自己的仓库
打开package.json,可以看到引用
"lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#9abec6faeea9698db40ed3adc98ce03ec546cedb",

  • 简单改法。github上fork一个这个仓库,然后把引用改为自己的
"lib-jitsi-meet": "github:daxiondi/lib-jitsi-meet#9abec6faeea9698db40ed3adc98ce03ec546cedb",

重新执行
npm install make make dev

  • 本地clone lib-jitsi-meet
"lib-jitsi-meet": "file:///Users/name/local-lib-jitsi-meet-copy", npm install lib-jitsi-meet --force && make

  • 或者使用npm link
cd lib-jitsi-meet#### create global symlink for lib-jitsi-meet package npm linkcd ../jitsi-meet#### create symlink from the local node_modules folder to the global lib-jitsi-meet symlink npm link lib-jitsi-meet

注意:
  • 这里不要使用yarn,官方说yarn会出问题
安装Android studio和安卓模拟器
  • 网上一大堆,自行百度
安装react native
Jitsi使用的是react native,如果需要修改页面,在Jitsi-meet这个仓库修改对应的代码就行。
  • 我使用的是mac,所以使用的是mac的命令,如果是其他系统参照文档
brew install watchman npx react-native run-android

如果一切顺利你会在安卓模拟器上看到jitsi的APK已经安装在了虚拟机上,我们打开他就行
遇到的问题
[JitsiMeetSDK] Unable to resolve module lib-jitsi-meet/lib-jitsi-meet.min from react/features/base/lib-jitsi-meet/_.native.js: lib-jitsi-meet/lib-jitsi-meet.min could not be found within the project.If you are sure the module exists, try these steps:Clear watchman watches: watchman watch-del-all Delete node_modules: rm -rf node_modules and run yarn install Reset Metro's cache: yarn start --reset-cache Remove the cache: rm -rf /tmp/metro-* 2020-01-08 11:41:08.642084+0800 jitsi-meet[29478:302701] Received XPC error Connection interrupted for message type 3 kCFNetworkAgentXPCMessageTypePACQuery 2020-01-08 11:41:08.642470+0800 jitsi-meet[29478:302701] Received XPC error Connection invalid for message type 3 kCFNetworkAgentXPCMessageTypePACQuery

解决办法
npm i -g install-local cd jitsi-meet install-local ../lib-jitsi-meet

再次运行
npx react-native run-android

构建安卓SDK
/tmp/repo是你的本地maven仓库地址,路径随意
./android/scripts/release-sdk.sh /tmp/repo

执行完毕后你会在/tmp/repo路径下看到Jitsi-sdk需要的依赖包
新建安卓项目
新建安卓项目自行百度
build.gradle中添加
allprojects { repositories { maven { url "file:/tmp/repo" } google() jcenter() } }

implementation ('org.jitsi.react:jitsi-meet-sdk:+') { transitive = true }

  • example
package com.example.jitsitestimport android.content.Intent import android.os.Bundle import org.jitsi.meet.sdk.JitsiMeetActivity import org.jitsi.meet.sdk.JitsiMeetActivityDelegate import org.jitsi.meet.sdk.JitsiMeetConferenceOptions import org.jitsi.meet.sdk.JitsiMeetViewclass MainActivity : JitsiMeetActivity() {private var view: JitsiMeetView? = null override fun onActivityResult( requestCode: Int, resultCode: Int, data: Intent? ) { JitsiMeetActivityDelegate.onActivityResult( this, requestCode, resultCode, data ) }override fun onBackPressed() { JitsiMeetActivityDelegate.onBackPressed() }override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) view = JitsiMeetView(this) val options = JitsiMeetConferenceOptions.Builder() .setRoom("https://meet.jit.si/test123") .build() view!!.join(options) setContentView(view) }override fun onDestroy() { super.onDestroy() view!!.dispose() view = null JitsiMeetActivityDelegate.onHostDestroy(this) }override fun onNewIntent(intent: Intent) { JitsiMeetActivityDelegate.onNewIntent(intent) }override fun onRequestPermissionsResult( requestCode: Int, permissions: Array, grantResults: IntArray ) { JitsiMeetActivityDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults) }override fun onResume() { super.onResume() JitsiMeetActivityDelegate.onHostResume(this) }override fun onStop() { super.onStop() } }

官方文档 学习Webrtc,遇到问题的欢迎群里提问。
原创不易,转载请带出处。并不要删掉QQ群,谢谢
【WebRTC|通过Jitsi-meet构建属于自己视频会议的Android/IOS SDK】WebRTC|通过Jitsi-meet构建属于自己视频会议的Android/IOS SDK
文章图片

WebRTC中文社区

    推荐阅读