1. 技术文章
  2. 一分钟教你构建属于你的视频会议SDK

一分钟教你构建属于你的视频会议SDK

由 早过忘川 提交于 2020-08-04 13:30:29

想学更多的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 <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()
    }
}

官方文档

学习Webrtc，遇到问题的欢迎群里提问。

原创不易，转载请带出处。并不要删掉QQ群，谢谢

在这里插入图片描述

标签
jitsi
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!