human: 如何处理七牛云的实时音视频QNCanvasVideoTrack

gpt: [实时音视频](https://developer.qiniu.com/rtc) > API 文档 > Web >QNCanvasVideoTrack

#  QNCanvasVideoTrack

最近更新时间: 2022-07-14 16:08:27

画布 Track，数据源支持 url、ArrayBuffer 或者 File 对象

Hierarchy

  * EventEmitter 
    * [QNTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9076/WebQNTrack)
      * [QNLocalTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9085/WebQNLocalTrack)
        * [QNLocalVideoTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9061/WebQNLocalVideoTrack)
          * [QNCameraVideoTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9068/WebQNCameraVideoTrack)
          * [QNScreenVideoTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9092/WebQNScreenVideoTrack)
          * QNCanvasVideoTrack 
          * [QNCustomVideoTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9088/WebQNCustomVideoTrack)
        * [QNLocalAudioTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9089/WebQNLocalAudioTrack)
          * [QNMicrophoneAudioTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9064/WebQNMicrophoneAudioTrack)
          * [QNBufferSourceAudioTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9069/WebQNBufferSourceAudioTrack)
          * [QNCustomAudioTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9091/WebQNCustomAudioTrack)
      * [QNRemoteTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9082/WebQNRemoteTrack)
        * [QNRemoteVideoTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9060/WebQNRemoteVideoTrack)
        * [QNRemoteAudioTrack](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9087/WebQNRemoteAudioTrack)

Index

Properties

  * trackID
  * userID
  * tag
  * mediaElement
  * isMultiProfileEnabled

Event

  * ended

Core Methods

  * play
  * isAudio
  * isVideo
  * isMuted
  * getMediaStreamTrack
  * setMuted
  * destroy
  * getLowStreamConfig
  * getCurrentFrameData
  * getStats
  * setOptimizationMode
  * updateSources

Properties

trackID

  * trackID?: string
  * Track ID

对于本地 Track，当且仅当 Track 发布后才可获取到有效的 TrackID；对于远端 Track，可随时获取到有效的 TrackID。

userID

  * userID?: string
  * 用户 ID

tag

  * tag?: string
  * 自定义 tag 文本

mediaElement

  * mediaElement: HTMLVideoElement | HTMLAudioElement | undefined
  * 当前播放元素，当调用 play 方法后，可以通过该属性获取播放的媒体元素

isMultiProfileEnabled

  * isMultiProfileEnabled: boolean
  * 是否开启大小流

> 废弃，请使用
> [getLowStreamConfig](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9061)
> 替代。

Event

ended

  * (): void
  * Track 断开
    
        track.on('ended', function() {
        console.log('ended')
    })

Core Methods

play

  * public play(container: HTMLElement, config?: QNPlayerConfig): Promise<void>
  * 播放当前 track

Parameters

    * container: HTMLElement 

挂载的 html 容器，SDK 会在该容器下创建 audio 或 video 元素来播放 track

    * Optional config: [QNPlayerConfig](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/10141/WebQNPlayerConfig)

播放配置信息

Returns void

isAudio

  * isAudio(): boolean
  * 是否是音频

Returns boolean

isVideo

  * isVideo(): boolean
  * 是否是视频

Returns boolean

isMuted

  * isMuted(): boolean
  * 是否 mute（静音）

Returns boolean

getMediaStreamTrack

  * getMediaStreamTrack(): MediaStreamTrack | undefined
  * 获取浏览器原生的 MediaStreamTrack 对象

Returns MediaStreamTrack | undefined

setMuted

  * setMuted(isMuted: boolean): void
  * 设置是否静默该 track，静默后，SDK 将会发送静默帧数据

当静默状态改变后，远端订阅 track 将会收到 [mute-state-
changed](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9082) 事件。

Parameters

    * isMuted: boolean 

是否 mute

Returns void

destroy

  * destroy(): void
  * 销毁当前流

Returns void

getLowStreamConfig

  * getLowStreamConfig(): [QNLowStreamConfig](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/10582/WebQNLowStreamConfig) | undefined
  * 获取小流配置

>
> 大小流使用方法可参考[视频大小流使用指南](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/10566/video-
> size-flow-web-new)。

Returns [QNLowStreamConfig](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/10582/WebQNLowStreamConfig) | undefined

getCurrentFrameData

  * getCurrentFrameData(): string
  * 截取当前视频流画面

Returns string

getStats

  * getStats(): [QNLocalVideoTrackStats](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9051/WebQNLocalVideoTrackStats)[]
  * 获取流状态数据

Returns
[QNLocalVideoTrackStats](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9051/WebQNLocalVideoTrackStats)

setOptimizationMode

  * setOptimizationMode(mode: [QNVideoOptimizationMode](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9079/WebQNVideoOptimizationMode)): boolean
  * 设置传输优化模式

Parameters

    * mode: [QNVideoOptimizationMode](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/9079/WebQNVideoOptimizationMode)

视频优化模式

Returns boolean

updateSources

  * updateSources(sources: QNCanvasVideoTrackSource[]): Promise<void>
  * 更新画布内容

Parameters

    * sources: [QNCanvasVideoTrackSource](https://developer.qiniu.com/rtc/10320/WebQNCanvasVideoTrack/10269/WebQNCanvasVideoTrackSource)

Returns Promise<void>

以上内容是否对您有帮助？