音视频通话

组件

更新时间: 2024/09/06 14:40:05

组件说明

在uni-app中，我们提供一些封装好的UI组件，主要模块包括:

  1. 视频组件 <rtcsdk-video-view>
  2. 媒体共享组件 <rtcsdk-screen-view>
  3. 屏幕共享组件 <rtcsdk-media-view>

使用方式:

<template>
	<view>
        <!-- 视频组件 -->
        <rtcsdk-video-view :usrVideoId="{ userId: userInfo.userId }" />
        <!-- 屏幕共享组件 -->
        <rtcsdk-screen-view />
        <!-- 媒体共享组件 -->
        <rtcsdk-media-view />
	</view>
</template>


<script>
import { RtcsdkVideoView, RtcsdkScreenView, RtcsdkMediaView } from '@/RTCSDK/component';
export default {
    components: {
        RtcsdkVideoView, //视频组件
        RtcsdkScreenView //屏幕共享组件
        RtcsdkMediaView, //媒体共享组件
    }
}
</script>

使用组件时务必在组件标签上添加宽高样式，否则不展示

视频组件

<rtcsdk-video-view>

通过视频组件可以实现业务上展示自己和他人的摄像头画面

<rtcsdk-video-view
    style="width: 750rpx;height:300rpx"
    :usrVideoId="{
        userId: 'xxxx'
        videoID: -1
    }"
    :scaleType="1"
/>

属性:

属性 必填 类型 说明
usrVideoId 是 object 设置视频属性，参考下方
scaleType 否 number 0：等比缩放留空居中显示(默认值)；
1：等比缩放裁剪铺满显示；
2：不等比缩放铺满显示（可能导致图像拉伸）；

设置视频属性usrVideoId:

参数 必填 类型 说明
userId 是 string 需要观看的用户id
camId 否 number 需要观看的摄像头ID，不传则观看默认的摄像头

屏幕共享组件

<rtcsdk-screen-view>

通过屏幕共享组件可以实现业务上展示屏幕共享的画面

<rtcsdk-screen-view style="width: 750rpx;height:300rpx" />

媒体共享组件

<rtcsdk-media-view>

通过媒体共享组件可以实现业务上展示自己或他人媒体影音共享的画面

<rtcsdk-media-view style="width: 750rpx;height:300rpx" />