1# @ohos.multimedia.avCastPicker (AVCastPicker)
2
3The **AVCastPicker** component provides a unified entry for device discovery and connection.
4
5> **NOTE**
6>
7> - 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.
8> - You can preview how this component looks on a real device. The preview is not yet available in DevEco Studio Previewer.<!--Del-->
9> - This component can only be used from the device selection screen, which needs to be implemented by OEM vendors.<!--DelEnd-->
10> <!--RP2--><!--RP2End-->
11
12## Modules to Import
13
14```js
15import { AVCastPicker } from '@kit.AVSessionKit';
16```
17
18## AVCastPicker
19
20AVCastPicker()
21
22Implements an **AVCastPicker** component, which can be used to cast audio and video onto other devices.
23
24This component is a custom component. Some basic knowledge of [@Component](../../quick-start/arkts-create-custom-components.md) will be helpful in using the component.
25
26**Atomic service API**: This API can be used in atomic services since API version 12.
27
28**System capability**: SystemCapability.Multimedia.AVSession.AVCast
29
30## Attributes
31
32In addition to the [universal attributes](../apis-arkui/arkui-ts/ts-universal-attributes-size.md), the following attributes are supported.
33
34| Name| Type| Mandatory| Decorator| Description|
35| -------- | -------- | -------- | -------- | -------- |
36| normalColor<sup>11+</sup> | Color &#124; number &#124; string | No| @Prop | Color of the component in normal state.<br>If this parameter is left unspecified, the color setting in **colorMode** is used.|
37| activeColor<sup>11+</sup> | Color &#124; number &#124; 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.|
38| pickerStyle<sup>12+</sup> | [AVCastPickerStyle](js-apis-avCastPickerParam.md#avcastpickerstyle12) | No| @Prop | Style of the component.<br>- When **sessionType** is set to **audio** or **video**, the default value is **STYLE_PANEL**.<br>- 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**.|
39| colorMode<sup>12+</sup> | [AVCastPickerColorMode](js-apis-avCastPickerParam.md#avcastpickercolormode12) | No|  @Prop | Display mode. The default value is **AUTO**.<br>- When **colorMode** is set to **AUTO**, the default system color in dark/light color mode is used.<br>- When **colorMode** is set to **DARK** or **LIGHT**, the preset system color of the corresponding mode is used.|
40| sessionType<sup>12+</sup> | string | No| @Prop | Session type. For details, see [AVSessionType](js-apis-avsession.md#avsessiontype10). The default value is **AVSessionType** created by the application.|
41| customPicker<sup>12+</sup> | [CustomBuilder](../apis-arkui/arkui-ts/ts-types.md#custombuilder8) | No| @Prop | Custom style. You are advised to customize a component style so that the component can be displayed quickly.|
42| onStateChange<sup>11+</sup> | (state: [AVCastPickerState](js-apis-avCastPickerParam.md)) => void | No| @Prop | Callback invoked when the casting state changes.|
43
44## Events
45
46The [universal events](../apis-arkui/arkui-ts/ts-universal-events-click.md) are supported.
47
48## Example
49
50The following is an example of using **AVCastPicker**:
51<!--RP1--><!--RP1End-->
52
53```ts
54import { AVCastPickerState, AVCastPicker } from '@kit.AVSessionKit';
55
56@Entry
57@Component
58struct Index {
59
60  @State pickerImage: ResourceStr = $r('app.media.castPicker'); // Custom resources.
61
62  private onStateChange(state: AVCastPickerState) {
63    if (state == AVCastPickerState.STATE_APPEARING) {
64      console.log('The picker starts showing.');
65    } else if (state == AVCastPickerState.STATE_DISAPPEARING) {
66      console.log('The picker finishes presenting.');
67    }
68  }
69
70  @Builder
71  customPickerBuilder(): void {
72    Image(this.pickerImage)
73      .width('100%')
74      .height('100%')
75      .fillColor(Color.Black)
76  }
77
78  build() {
79    Row() {
80      Column() {
81        AVCastPicker({
82          normalColor: Color.Red,
83          customPicker: () => this.customPickerBuilder(),
84          onStateChange: this.onStateChange
85        })
86          .width('40vp')
87          .height('40vp')
88          .border({ width: 1, color: Color.Red })
89      }.height('50%')
90    }.width('50%')
91  }
92}
93```
94