# VideoSender API

# Props

# type

  • 类型:
    type:"camera" | "custom" | "screen"
    
    1
  • 必填:false
  • 默认值:"camera"
  • 说明: 创建的视频的类型
  • 用法:
    <agora>
      <agora-video-sender type="camera"/>
    </agora>
    
    1
    2
    3

# config

  • 类型:

    • type 为 camera 时:
      config:CameraVideoTrackInitConfig
      
      1
    • type 为 screen 时:
      interface ScreenConfig extends ScreenVideoTrackInitConfig{
          withAudio?:"enable" | "disable" | "auto"
      }
      config: ScreenConfig
      
      1
      2
      3
      4
    • type 为 custom 时:
      config:CustomVideoTrackInitConfig
      
      1
  • 必填:false

  • 默认值:()=>({})

  • 说明: 创建的视频时的配置参数

  • 用法:

    <agora>
      <agora-video-sender type="camera" :config="{facingMode:'user'}"/>
    </agora>
    
    1
    2
    3

type=screen时,不设置withAudio时,默认设置withAudio属性为"auto"。

# optimization

  • 类型:
    type: "balanced" | "motion" | "detail"
    
    1
  • 必填:false
  • 默认值:"balanced"
  • 说明: 视频传输的优化模式
  • 用法:
    <agora>
      <agora-video-sender optimization="motion"/>
    </agora>
    
    1
    2
    3

查看组件对 optimization 的具体解释

# encoder

  • 类型:
    type: VideoEncoderConfiguration | VideoEncoderConfigurationPreset
    
    1
  • 必填:false
  • 默认值:"480p_1"
  • 说明: 视频传输的编码格式
  • 用法:
    <agora>
      <agora-video-sender encoder="120p"/>
    </agora>
    
    1
    2
    3

WARNING

仅对type=camera有效

# beauty

  • 类型:
    type: boolean
    
    1
  • 必填:false
  • 默认值:false
  • 说明: 是否开启美颜模式
  • 用法:
    <agora>
      <agora-video-sender :beauty.sync="beauty"/>
    </agora>
    
    1
    2
    3

美颜模式对设备性能要求较高。

美颜对设备性能产生过大影响时组件将自动关闭美颜,sync修饰符确保组件顺利将状态同步给开关变量。

# beautyConfig

  • 类型:
    type: BeautyEffectOptions
    
    1
  • 必填:false
  • 默认值:
    {
      lighteningContrastLevel: 1,
      lighteningLevel: 0.7,
      smoothnessLevel: 0.5,
      rednessLevel: 0.1
    }
    
    1
    2
    3
    4
    5
    6
  • 说明: 美颜效果配置参数
  • 用法:
    <agora>
      <agora-video-sender :beauty.sync="beauty" :beautyConfig="{
      lighteningContrastLevel: 2,
      lighteningLevel: 0.2,
      smoothnessLevel: 0.6,
      rednessLevel: 0.2
    }"/>
    </agora>
    
    1
    2
    3
    4
    5
    6
    7
    8

# cameraOff

  • 类型

    cameraOff:boolean
    
    1
  • 必填:false

  • 默认值:false

  • 说明:控制是否收集视频画面及视频流是否发送到远端。

    • true: 停止收集视频画面,停止本地播放视频画面,并停止向远端发送视频流

    • false: 开启收集视频画面,开始本地播放视频画面,并向远端发送视频流。

    cameraOff 的值被监听,所以值可以在整个通话过程中动态改变。

    cameraOff可以是认为自动处理调用组件的 play , stop , setEnable , setDisable 方法

# customizationPlayer

  • 类型: boolean
  • 必填:false
  • 默认值:false
  • 说明: 是否使用自定义播放器
  • 用法:
    <agora>
      <agora-video-sender :customizationPlayer="false"></agora-video-sender>
    </agora>
    
    1
    2
    3

# playerConfig

  • 类型: VideoPlayerConfig
  • 必填:false
  • 默认值:{}
  • 说明: 播放器设置, 设置后使用play时刻被设置的值。对指令和插槽式播放均有效。参考Agora SDK 文档 (opens new window)
  • 用法:
    <agora>
      <agora-video-sender :playerConfig="{mirror:false}"></agora-video-sender>
    </agora>
    
    1
    2
    3

# Methods

# start

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述:重新开始创建视频和发布给远端

# play

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述: 本地播放视频

# stop

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述:停止本地播放视频

# getTrack

  • 函数签名: () => [ILocalVideoTrack | null, IlocalAudioTrack] | IlocalVideoTrack | null
  • async函数:false
  • 参数:无
  • 返回值:[ILocalVideoTrack | null, IlocalAudioTrack] | IlocalVideoTrack | null
  • 描述:获取组件创建的视频和音频轨道。

获取到的音频轨道是屏幕共享时选择分享的屏幕的音频。

在选择分享音频时,返回值类型是 [ILocalVideoTrack | null, IlocalAudioTrack]; 再不分享音频时,返回值类型是 ILocalVideoTrack; 没有创建视频时,返回值类型是 null

# setEnable

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述:向远端发送视频(包含屏幕分享时的音频)

# setDisable

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述:停止向远端发送视频(包含屏幕分享时的音频)

# setAudioEnable

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述:向远端发送音频

# setAudioDisable

  • 函数签名: () => Promise<void>
  • async函数:true
  • 参数:无
  • 返回值:void
  • 描述:停止向远端发送音频

# closeAudio

  • 函数签名: () => void
  • async函数:false
  • 参数:无
  • 返回值:void
  • 描述:关闭音频

# Slots

# default

  • 说明: 默认插槽,第一个子元素节点将作为采集到的视频的播放窗口
  • 用法:
    <agora>
      <agora-video-sender>
        <div style="width:200px;height:200px;"><div/>
      </agora-video-sender>
    </agora>
    
    1
    2
    3
    4
    5

# Events

# video-ready

  • 描述: 本地用户视频ready事件,本地视频流创建成功,可以在本地播放时触发该事件。

  • data: (无需过于关注 data 的数据结构)

    import {UID, ILocalVideoTrack, IAgoraRTCClient} from "agora-rtc-sdk-ng";
    type localMediaList = {
      uid: UID;
      media: {
          uid:UID
          track: ILocalVideoTrack
          mediaType: 'video'
      };
      __client: IAgoraRTCClient;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
  • 示例:

    <agora>
      <agora-video-sender customizationPlayer @video-ready="data=>localVideo=data" />
    </agora>
    
    <div v-player="localVideo"></div>
    
    1
    2
    3
    4
    5

TIP

仅在customizationPlayer为true时该事件会被触发。

配合v-player指令,可以指定本地视频的播放。

# video-close

  • 描述:本地视频流close(指不再向远端发送视频流)时触发该事件
  • data: 无

# video-create-successful

  • 描述: 本地视频流创建成功时触发该事件
  • data: 无
  • 示例:
    <agora-video-sender
      @video-create-successful="()=>console.log('create local video successful')"
    />
    
    1
    2
    3

# video-create-failed

  • 描述: 本地视频流创建失败时触发该事件
  • data: 视频流创建失败的原因
    reason: string
    
    1
  • 示例:
    <agora-video-sender
      @video-create-failed="reason=>console.error('create local video failed, because: ', reason)"
    />
    
    1
    2
    3
最近更新: 7/2/2021, 4:31:04 PM