想学更多的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会出问题
- 网上一大堆,自行百度
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中文社区