1# @ohos.multimedia.avCastPicker (AVCastPicker) 2<!--Kit: AVSession Kit--> 3<!--Subsystem: Multimedia--> 4<!--Owner: @ccfriend; @liao_qian--> 5<!--SE: @ccfriend--> 6<!--TSE: @chenmingxi1_huawei--> 7 8The module provides the functionality to create an **AVCastPicker** component, which offers a unified entry for device discovery and connection. 9 10> **NOTE** 11> 12> - 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. 13> - **Device restriction**: This function is not supported on PCs or 2-in-1 devices. 14> - The Preview in DevEco Studio does not support actual casting. To see the real effect, test on a real device.<!--Del--> 15> - This component can only be used from the device selection screen, which needs to be implemented by OEM vendors.<!--DelEnd--> 16 17## Modules to Import 18 19```js 20import { AVCastPicker } from '@kit.AVSessionKit'; 21``` 22 23## Properties 24 25The [universal properties](../apis-arkui/arkui-ts/ts-component-general-attributes.md) are supported. 26 27## AVCastPicker 28 29``` 30AVCastPicker({ 31 normalColor?: Color | number | string; 32 activeColor?: Color | number | string; 33 pickerStyle?: AVCastPickerStyle; 34 colorMode?: AVCastPickerColorMode; 35 sessionType?: string; 36 customPicker?: CustomBuilder; 37 onStateChange?: (state: AVCastPickerState) => void; 38}) 39``` 40 41Implements an **AVCastPicker** component, which can be used to cast audio and video onto other devices. 42 43This component is a custom component. Some basic knowledge of [@Component](../../ui/state-management/arkts-create-custom-components.md#component) will be helpful in using the component. 44 45**Decorator**: [@Component](../../ui/state-management/arkts-create-custom-components.md) 46 47**Atomic service API**: This API can be used in atomic services since API version 12. 48 49**System capability**: SystemCapability.Multimedia.AVSession.AVCast 50 51| Name| Type| Mandatory| Decorator| Description| 52| -------- | -------- | -------- | -------- | -------- | 53| 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.| 54| 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.| 55| 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**.| 56| 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.| 57| sessionType<sup>12+</sup> | string | No| @Prop | Session type. For details, see [AVSessionType](arkts-apis-avsession-t.md#avsessiontype10). The default value is **AVSessionType** created by the application.| 58| 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.| 59| onStateChange<sup>11+</sup> | (state: [AVCastPickerState](js-apis-avCastPickerParam.md)) => void | No| - | Callback invoked when the casting state changes.| 60 61## Events 62 63The [universal events](../apis-arkui/arkui-ts/ts-component-general-events.md) are supported. 64 65## Example 66 67The following is an example of using **AVCastPicker**: 68<!--RP1--><!--RP1End--> 69 70```ts 71import { AVCastPickerState, AVCastPicker } from '@kit.AVSessionKit'; 72 73@Entry 74@Component 75struct Index { 76 77 @State pickerImage: ResourceStr = $r('app.media.castPicker'); // Custom resources. 78 79 private onStateChange(state: AVCastPickerState) { 80 if (state == AVCastPickerState.STATE_APPEARING) { 81 console.log('The picker starts showing.'); 82 } else if (state == AVCastPickerState.STATE_DISAPPEARING) { 83 console.log('The picker finishes presenting.'); 84 } 85 } 86 87 @Builder 88 customPickerBuilder(): void { 89 Image(this.pickerImage) 90 .width('100%') 91 .height('100%') 92 .fillColor(Color.Black) 93 } 94 95 build() { 96 Row() { 97 Column() { 98 AVCastPicker({ 99 normalColor: Color.Red, 100 customPicker: () => this.customPickerBuilder(), 101 onStateChange: this.onStateChange 102 }) 103 .width('40vp') 104 .height('40vp') 105 .border({ width: 1, color: Color.Red }) 106 }.height('50%') 107 }.width('50%') 108 } 109} 110``` 111