@ohos.multimedia.avCastPicker (AVCastPicker)

The AVCastPicker component provides a unified entry for device discovery and connection.

NOTE

  • The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
  • You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
  • This component can only be used from the device selection screen, which needs to be implemented by OEM vendors.

Modules to Import

import AVCastPicker from '@ohos.multimedia.avCastPicker';

APIs

AVCastPicker()

Implements an AVCastPicker component, which can be used to cast audio and video onto other devices.

This component is a custom component. Some basic knowledge of @Component will be helpful in using the component.

System capability: SystemCapability.Multimedia.AVSession.AVCast

Attributes

In addition to the universal attributes, the following attributes are supported.

Name Type Description
normalColor Color | number | string Color of the component in normal state.
activeColor Color | number | string Color of the component when audio and video are successfully casted to another device.
onStateChange (state: AVCastPickerState) => void Callback invoked when the casting state changes.

Events

The universal events are supported.

Example

The following is an example of using AVCastPicker:

import AVCastPicker from '@ohos.multimedia.avCastPicker'
import { AVCastPickerState } from '@ohos.multimedia.avCastPickerParam'

@Entry
@Component
struct Index {
  private onStateChange(state: AVCastPickerState) {
    if (state == AVCastPickerState.STATE_APPEARING) {
      console.log('The picker starts showing.')
    } else if (state == AVCastPickerState.STATE_DISAPPEARING) {
      console.log('The picker finishes presenting.')
    }
  }

  build() {
    Row() {
      Column() {
        AVCastPicker({ normalColor: Color.Red, activeColor: Color.Blue, onStateChange: this.onStateChange })
          .width('40vp')
          .height('40vp')
          .border({ width: 1, color: Color.Red })
      }.height('50%')
    }.width('50%')
  }
}