火山引擎 Lynx RTC SDK

简介

此 SDK 用于在 Lynx 框架 中集成 RTC 能力。 火山引擎 RTC SDK 是火山引擎提供的音视频通话 SDK。 此版本依赖 Native SDK 版本为: | 端 | 依赖版本 | | ------- | ------------ | | Android | 3.60.103.1500 | | iOS | 3.60.103.2100 |

最低要求

要求 Node >= 18。

| 端 | 最低版本 | | ------- | ------------ | | Android | 6.0 (API 23) | | iOS | 13.4 |

• iOS 暂不支持在模拟器中运行, 请使用真机进行调试。
• Android 支持 16KB。

安装

npm install @volcengine/lynx-rtc

yarn add @volcengine/lynx-rtc

接入说明(接入必看)

Lynx RTC SDK 的 Native 部分代码采用同包方式发布和接入, 您需要在各自的端中配置相应的路径。

Android

// @file build.gradle.kts
//

// ...
apply(from = rootProject.file("../node_modules/@volcengine/lynx-rtc/android/lynx-rtc-sdk.gradle.kts"))
// ...

此外，还需要为 Lynx 框架本身注入 RTC 相关环境。

通常，会在入口的 Activity 中注册 lynx 环境，此时需要在 Lynx 相关初始化流程中注册 RTC 模块:

package xxxxxx;

import android.Manifest
import android.content.Intent
import android.media.projection.MediaProjectionManager
import android.os.Build
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.enableEdgeToEdge
import com.lynx.tasm.LynxView
import com.lynx.tasm.LynxViewBuilder
import com.lynx.xelement.XElementBehaviors
import com.ss.bytertc.engine.lynx.core.RTCRegister

class MainActivity : ComponentActivity() {
    private var projectionManager: MediaProjectionManager? = null

    private var register: RTCRegister? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        val lynxView = buildLynxView()
        setContentView(lynxView)
        // 将 Lynx View 注册到 RTC 环境
        RTCRegister.registerEnv(this, lynxView)
        lynxView.renderTemplateUrl("main.lynx.bundle", mapOf<String, Object>())
        requestPermission()
    }

    // ...

    private fun buildLynxView(): LynxView {
        val viewBuilder = LynxViewBuilder()
        viewBuilder.addBehaviors(XElementBehaviors().create())
        viewBuilder.setTemplateProvider(RTCTemplateProvider(this))
        // 注册 RTC 模块
        RTCRegister.registerCore(viewBuilder)
        return viewBuilder.build(this)
    }

    companion object {
      // ...
    }
}

iOS

# @file Podfile
#

# ...
require_relative '../node_modules/@volcengine/lynx-rtc/ios/podhelper'

target 'YourProject' do
  use_frameworks!

  # ...

  # Lynx RTC
  lynx_rtc_install_all_ios_pods
end

# ...

此外，还需要为 Lynx 框架本身注入 RTC 相关环境。

通常，会在入口的 UIViewController 中注册 lynx 环境，此时需要在 Lynx 相关初始化流程中注册 RTC 模块:

import UIKit
import LynxRTC

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let lynxView = LynxView { builder in
            builder.config = LynxConfig(provider: LynxProvider())
            // 注册 Lynx 模块
            RTCRegister.registerModule(builder.config!)
            // 注册 Lynx View 模块
            RTCRegister.registerView(builder.config!)

            builder.screenSize = self.view.frame.size
            builder.fontScale = 1.0
        }

        lynxView.preferredLayoutWidth = self.view.frame.size.width
        lynxView.preferredLayoutHeight = self.view.frame.size.height
        lynxView.layoutWidthMode = .exact
        lynxView.layoutHeightMode = .exact
        self.view.addSubview(lynxView)

        guard let bundleURL = Bundle.main.url(forResource: "main.lynx", withExtension: "bundle") else {
            assertionFailure("main.lynx.bundle not found in app bundle")
            return
        }

        lynxView.loadTemplate(fromURL: bundleURL.absoluteString, initData: nil)
    }
}

基础示例

视频渲染

Lynx RTC SDK 提供了 RTCView 组件, 用于在 Lynx 侧渲染视频内容。 您需要为每个 RTCView 组件指定唯一的 id, 并在 onReady 事件中对视图进行绑定操作，例如:

// @file VideoView.ts
// @description 视频渲染组件
//
import {
  RTCView,
  RTCEngine,
  VideoRenderMode,
  VideoRotation,
} from "@volcengine/lynx-rtc";

export default function VideoView() {
  // 设置唯一 viewId
  const viewId = "local-view";

  const handleRenderLocalVideo = () => {
    // engine 通过 RTCEngine.createRTCEngine 创建
    // 通过 setLocalVideoCanvas、setRemoteVideoCanvas 绑定视图
    const res = this.engine?.setLocalVideoCanvas({
      view: viewId,
      renderSurface: null,
      renderMode: VideoRenderMode.HIDDEN,
      backgroundColor: 0x00000000,
      renderRotation: VideoRotation.ROTATION0,
    });
  };
  return <RTCView id={viewId} onReady={handleRenderLocalVideo} />;
}

方法调用

建议在使用 RTC SDK 时，创建 Manager 维护 RTC 相关实例, 再提供方法供外部调用, 例如:

// @file RTCManager.ts
// @description RTCManager 管理器
//
import {
  RTCEngine,
  RTCRoom,
  type I_EngineConfig,
  type I_IRTCEngineEventHandler,
  type I_IRTCRoomEventHandler,
} from "@volcengine/lynx-rtc";

class RTCManager {
  engine?: RTCEngine;
  room?: RTCRoom;

  initEngine(config: I_EngineConfig, handler: I_IRTCEngineEventHandler) {
    if (this.engine) return this.engine;

    const engine = RTCEngine.createRTCEngine({ config, handler })!;
    this.engine = engine;
    return this.engine;
  }

  createRoom(roomId: string, roomHandler: I_IRTCRoomEventHandler) {
    if (!this.engine) throw new Error("引擎未创建");
    try {
      this.room = this.engine.createRTCRoom(roomId)!;
      this.room.setRTCRoomEventHandler(roomHandler);
      this.joined = false;
      this.report("createRTCRoom", { roomId }, 0);
    } catch {
      message.error("房间创建失败, 可能是 roomId 不符合要求。");
      return null;
    }
    if (!this.room?.instanceId) {
      message.error("房间创建失败, 可能是 roomId 不符合要求。");
    }
    return this.room;
  }

  // ...
}

同时, RTC 提供一系列回调, 您可以通过 hook 的方式维护这些回调, 因为您可能会在回调中去更新相关持久化状态，例如:

// @file hooks.ts
// @description RTC 回调 hooks
//
import type { I_IRTCEngineEventHandler } from "@volcengine/lynx-rtc";

export function useEngineEventHandler(): I_IRTCEngineEventHandler {

  onUserStartVideoCapture: (params) => {
    // ...
  },

  onUserStopVideoCapture: (params) => {
    // ...
  },
}

屏幕采集

在使用上，需注意完成以下 3 步：

Android 配置

首先参考 Android 屏幕共享 进行基础的配置。

您需要在您自己项目的 Android 工程下新建 Activity 文件, 完成实现如：

// @file ScreenCaptureRequestActivity.kt
// @description 屏幕采集活动
//
package Your Package Path
import android.app.Activity
import com.volcengine.RTCCrossPlatformCore.activity.BaseScreenCaptureRequestActivity

class ScreenCaptureRequestActivity : BaseScreenCaptureRequestActivity() {

    override fun getLargeIcon(): Int {
        return android.R.mipmap.sym_def_app_icon
    }

    override fun getSmallIcon(): Int {
        return android.R.mipmap.sym_def_app_icon
    }

    override fun getLaunchActivity(): Class<out Activity?> {
        return MainActivity::class.java
    }

    override fun getContextText(): String? {
        return "正在录制/投射您的屏幕"
    }
}

并在对应的 AndroidManifest.xml 中注册该 Activity。

<activity
    android:name="${applicationId}.ScreenCaptureRequestActivity"
    android:exported="false"
    android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen">
    <intent-filter>
        <action android:name="${applicationId}.action.REQUEST_SCREEN_CAPTURE" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

iOS 配置

参考 iOS 屏幕共享 进行基础的配置即可。

Lynx 配置

对于 iOS，您需要在 Lynx 中调用 setExtensionConfig 方法, 传入您实际使用的 groupId，并且需要在 startScreenCapture 方法前调用。

同时，调用 startScreenCapture 传入您实际使用的 bundleId。

最终代码形如:

engine.setExtensionConfig("Your Group ID");
engine.startScreenCapture?.({
  type,
  bundleId: "Your Bundle ID",
});

其它

如果您需要更多使用上的说明, 欢迎咨询我们。