更新记录

1.0.0（2025-04-07） 下载此版本

• 低延迟连麦：经过优化的媒体传输机制，延迟控制在200ms以内
• 虚拟背景/美颜滤镜：内置AI驱动的美颜和虚拟背景功能，提升视频通话体验
• 通话质量监控仪表盘：实时监控网络状况、音视频质量参数，便于快速识别和解决通话问题

平台兼容性

uni-app

uni-app x

XL-RTC 跨平台实时音视频组件

在线演示地址：https://xlandzxg-8gj5901i764f06f7-1308786497.tcloudbaseapp.com/index.html#/

功能介绍

XL-RTC是一个功能强大的跨平台实时音视频组件，专为各类实时通讯场景设计。基于WebRTC深度定制和原生编解码技术，为用户提供高质量、低延迟的音视频通话体验。

核心功能

• 低延迟连麦：经过优化的媒体传输机制，延迟控制在200ms以内
• 虚拟背景/美颜滤镜：内置AI驱动的美颜和虚拟背景功能，提升视频通话体验
• 通话质量监控仪表盘：实时监控网络状况、音视频质量参数，便于快速识别和解决通话问题

核心技术

• WebRTC深度定制
• 原生编解码技术支持
• 自适应带宽控制算法
• 抗丢包优化处理
• AI驱动的视频处理技术

使用方法

Vue3中使用（Composition API）

<template>
  <view class="container">
    <xl-rtc
      ref="rtcRef"
      :initialRoomId="roomId"
      :initialUserName="userName"
      :autoJoin="false"
      :videoQuality="videoQuality"
      @room-joined="onRoomJoined"
      @room-left="onRoomLeft"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import xlRtc from '@/components/xl-rtc/index.vue';

const rtcRef = ref(null);
const roomId = ref('demo-room-001');
const userName = ref('用户' + Math.floor(Math.random() * 1000));
const videoQuality = ref('medium');

const onRoomJoined = (data) => {
  console.log('加入房间成功:', data);
};

const onRoomLeft = (data) => {
  console.log('离开房间:', data);
};

// 使用组件方法
const joinRoom = () => {
  rtcRef.value.joinRoom();
};

const leaveRoom = () => {
  rtcRef.value.leaveRoom();
};
</script>

Vue2中使用（Options API）

<template>
  <view class="container">
    <xl-rtc
      ref="rtcRef"
      :initialRoomId="roomId"
      :initialUserName="userName"
      :autoJoin="false"
      :videoQuality="videoQuality"
      @room-joined="onRoomJoined"
      @room-left="onRoomLeft"
    />
  </view>
</template>

<script>
import xlRtc from '@/components/xl-rtc/index.vue';

export default {
  components: {
    xlRtc
  },
  data() {
    return {
      roomId: 'demo-room-001',
      userName: '用户' + Math.floor(Math.random() * 1000),
      videoQuality: 'medium'
    }
  },
  methods: {
    onRoomJoined(data) {
      console.log('加入房间成功:', data);
    },
    onRoomLeft(data) {
      console.log('离开房间:', data);
    },
    // 使用组件方法
    joinRoom() {
      this.$refs.rtcRef.joinRoom();
    },
    leaveRoom() {
      this.$refs.rtcRef.leaveRoom();
    }
  }
}
</script>

参数配置

事件

组件方法

高级功能

自定义虚拟背景

通过扩展API可以使用自定义图片作为虚拟背景：

Vue3

// 获取组件实例
const rtcRef = ref(null);

// 设置自定义背景图片
rtcRef.value.setVirtualBackground({
  type: 'image',
  url: '/static/backgrounds/office.jpg'
});

// 设置虚拟背景模糊度
rtcRef.value.setVirtualBackground({
  type: 'blur',
  strength: 10 // 1-20
});

Vue2

// 设置自定义背景图片
this.$refs.rtcRef.setVirtualBackground({
  type: 'image',
  url: '/static/backgrounds/office.jpg'
});

// 设置虚拟背景模糊度
this.$refs.rtcRef.setVirtualBackground({
  type: 'blur',
  strength: 10 // 1-20
});

自定义美颜参数

Vue3

// 获取组件实例
const rtcRef = ref(null);

// 设置美颜参数
rtcRef.value.setBeautyOptions({
  smoothness: 0.5,  // 磨皮程度 0-1
  brightness: 0.1,  // 美白程度 0-1
  ruddy: 0.2        // 红润程度 0-1
});

Vue2

// 设置美颜参数
this.$refs.rtcRef.setBeautyOptions({
  smoothness: 0.5,  // 磨皮程度 0-1
  brightness: 0.1,  // 美白程度 0-1
  ruddy: 0.2        // 红润程度 0-1
});

性能优化

带宽自适应

XL-RTC会根据网络状况自动调整视频分辨率、帧率和码率，确保通话在各种网络环境下都能正常进行。带宽自适应机制包括：

• 网络探测和质量评估
• 动态调整媒体参数
• 优先保证音频传输质量
• 弱网环境下的降级策略

低延迟优化

通过以下技术手段实现低延迟连麦：

• 优化的ICE连接策略
• 自定义NACK和PLI机制
• 高效的抖动缓冲区算法
• 自适应包发送间隔控制

注意事项

1. 首次使用时需要授予摄像头和麦克风权限
2. 在Android设备上使用时，可能需要同时开启位置权限
3. 虚拟背景功能对设备性能要求较高，低端设备可能出现卡顿
4. 推荐在WiFi或5G网络下使用，保证足够的带宽

兼容性