harmony 鸿蒙@ohos.multimedia.avCastPicker (AVCastPicker)

2025-06-12
浏览 (4)

@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.

Device restriction: This function is not supported on PCs or 2-in-1 devices.

You can preview how this component looks on a real device. The preview is not yet available in 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 '@kit.AVSessionKit';

Properties

The universal properties are supported.

AVCastPicker

AVCastPicker({
  normalColor?: Color|number|string;
  activeColor?: Color|number|string;
  pickerStyle?: AVCastPickerStyle;
  colorMode?: AVCastPickerColorMode;
  sessionType?: string;
  customPicker?: CustomBuilder;
  onStateChange?: (state: AVCastPickerState) => void;
})

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.

Decorator: @Component

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.Multimedia.AVSession.AVCast

Name	Type	Mandatory	Decorator	Description
normalColor¹¹⁺	Color \| number \| string	No	@Prop	Color of the component in normal state. If this parameter is left unspecified, the color setting in colorMode is used.
activeColor¹¹⁺	Color \| number \| string	No	@Prop	Color of the component when audio and video are successfully casted to another device. If this parameter is left unspecified, the system preferentially matches the color based on normalColor. If normalColor is also left unspecified, the color setting in colorMode is used.
pickerStyle¹²⁺	AVCastPickerStyle	No	@Prop	Style of the component. - When sessionType is set to audio or video, the default value is STYLE_PANEL. - When sessionType is set to voice_call or video_call, the default value is STYLE_MENU and the value cannot be changed to STYLE_PANEL.
colorMode¹²⁺	AVCastPickerColorMode	No	@Prop	Display mode. The default value is AUTO. - When colorMode is set to AUTO, the default system color in dark/light color mode is used. - When colorMode is set to DARK or LIGHT, the preset system color of the corresponding mode is used.
sessionType¹²⁺	string	No	@Prop	Session type. For details, see AVSessionType. The default value is AVSessionType created by the application.
customPicker¹²⁺	CustomBuilder	No	@Prop	Custom style. You are advised to customize a component style so that the component can be displayed quickly.
onStateChange¹¹⁺	(state: AVCastPickerState) => void	No	-	Callback invoked when the casting state changes.

Events

The universal events are supported.

Example

The following is an example of using AVCastPicker:

import { AVCastPickerState, AVCastPicker } from '@kit.AVSessionKit';

@Entry
@Component
struct Index {

  @State pickerImage: ResourceStr = $r('app.media.castPicker'); // Custom resources.

  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.');
    }
  }

  @Builder
  customPickerBuilder(): void {
    Image(this.pickerImage)
      .width('100%')
      .height('100%')
      .fillColor(Color.Black)
  }

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