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## Properties 19 20The [universal properties](../apis-arkui/arkui-ts/ts-component-general-attributes.md) are supported. 21 22## AVCastPicker 23 24``` 25AVCastPicker({ 26 normalColor?: Color | number | string; 27 activeColor?: Color | number | string; 28 pickerStyle?: AVCastPickerStyle; 29 colorMode?: AVCastPickerColorMode; 30 sessionType?: string; 31 customPicker?: CustomBuilder; 32 onStateChange?: (state: AVCastPickerState) => void; 33}) 34``` 35 36Implements an **AVCastPicker** component, which can be used to cast audio and video onto other devices. 37 38This component is a custom component. Some basic knowledge of [@Component](../../quick-start/arkts-create-custom-components.md#component) will be helpful in using the component. 39 40**Decorator**: [@Component](../../quick-start/arkts-create-custom-components.md) 41 42**Atomic service API**: This API can be used in atomic services since API version 12. 43 44**System capability**: SystemCapability.Multimedia.AVSession.AVCast 45 46| Name| Type| Mandatory| Decorator| Description| 47| -------- | -------- | -------- | -------- | -------- | 48| normalColor<sup>11+</sup> | Color | number | string | No| @Prop | Color of the component in normal state.<br>If this parameter is left unspecified, the color setting in **colorMode** is used.| 49| activeColor<sup>11+</sup> | 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.| 50| 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**.| 51| 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.| 52| 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.| 53| 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.| 54| onStateChange<sup>11+</sup> | (state: [AVCastPickerState](js-apis-avCastPickerParam.md)) => void | No| @Prop | Callback invoked when the casting state changes.| 55 56## Events 57 58The [universal events](../apis-arkui/arkui-ts/ts-component-general-events.md) are supported. 59 60## Example 61 62The following is an example of using **AVCastPicker**: 63<!--RP1--><!--RP1End--> 64 65```ts 66import { AVCastPickerState, AVCastPicker } from '@kit.AVSessionKit'; 67 68@Entry 69@Component 70struct Index { 71 72 @State pickerImage: ResourceStr = $r('app.media.castPicker'); // Custom resources. 73 74 private onStateChange(state: AVCastPickerState) { 75 if (state == AVCastPickerState.STATE_APPEARING) { 76 console.log('The picker starts showing.'); 77 } else if (state == AVCastPickerState.STATE_DISAPPEARING) { 78 console.log('The picker finishes presenting.'); 79 } 80 } 81 82 @Builder 83 customPickerBuilder(): void { 84 Image(this.pickerImage) 85 .width('100%') 86 .height('100%') 87 .fillColor(Color.Black) 88 } 89 90 build() { 91 Row() { 92 Column() { 93 AVCastPicker({ 94 normalColor: Color.Red, 95 customPicker: () => this.customPickerBuilder(), 96 onStateChange: this.onStateChange 97 }) 98 .width('40vp') 99 .height('40vp') 100 .border({ width: 1, color: Color.Red }) 101 }.height('50%') 102 }.width('50%') 103 } 104} 105``` 106 107 <!--no_check-->