一分鍾教你構建屬於你的視頻會議SDK

准備工作

安裝好Jitsi的服務端，可以參考我之前的文章5分鍾搭建屬於你的視頻會議系統 ，Jitsi手動安裝

服務端需要申請證書，配置https證書。

說明

官方提供Android和IOS)的sample示例程序，可以通過這個示例程序上面的代碼以及官方文檔，很快的把sdk接入到你的項目。

可是官方提供的sdk頁面和功能不一定都滿足我們的需求，這個時候我們的就需要自己構建SDK了。

clone項目

git clone [e-mail]: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 <domain>.
        // 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.<domain>.
        // 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 link

cd ../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.jitsitest

import 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.JitsiMeetView

class 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<String>,
            grantResults: IntArray
    ) {
        JitsiMeetActivityDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults)
    }

override fun onResume() {
        super.onResume()
        JitsiMeetActivityDelegate.onHostResume(this)
    }

override fun onStop() {
        super.onStop()
    }
}