• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.multimedia.avInputCastPicker (AVInputCastPicker)
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 **AVInputCastPicker** component, which offers a unified entry for discovering and connecting recording devices.
9
10> **NOTE**
11>
12> - The initial APIs of this module are supported since API version 20. Newly added APIs will be marked with a superscript to indicate their earliest API version.
13> - The Preview in DevEco Studio does not support actual recording device selection. To see the real effect, test on a real device.<!--Del-->
14> - This component can only be used from the recording device selection screen, which needs to be implemented by OEM vendors.
15> - This component can only be used on PCs.<!--DelEnd-->
16
17## Modules to Import
18
19```js
20import { AVInputCastPicker } from '@kit.AVSessionKit';
21```
22
23## Properties
24
25The [universal properties](../apis-arkui/arkui-ts/ts-component-general-attributes.md) are supported.
26
27## AVInputCastPicker
28
29```
30AVInputCastPicker({
31  customPicker?: CustomBuilder;
32  onStateChange?: (state: AVCastPickerState) => void;
33})
34```
35
36Implements an **AVInputCastPicker** component, which can be used to switch audio input devices.
37
38This 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.
39
40**Decorator**: [@Component](../../ui/state-management/arkts-create-custom-components.md#component)
41
42**Atomic service API**: This API can be used in atomic services since API version 20.
43
44**System capability**: SystemCapability.Multimedia.AVSession.AVInputCast
45
46**Parameters**
47
48| Name| Type| Mandatory| Decorator| Description|
49| -------- | -------- | -------- | -------- | -------- |
50| customPicker | [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.|
51| onStateChange | (state: [AVCastPickerState](js-apis-avCastPickerParam.md#avcastpickerstate11)) => void | No| - | Callback invoked when the device list state changes.<br>**state**: callback parameter for device list state changes.|
52
53## OnPickerStateCallback
54type OnPickerStateCallback = (state: AVCastPickerState) => void
55
56**System capability**: SystemCapability.Multimedia.AVSession.AVInputCast
57
58**Parameters**
59
60| Name| Type| Mandatory| Description|
61| -------- | -------- | -------- | -------- |
62| state | [AVCastPickerState](js-apis-avCastPickerParam.md#avcastpickerstate11) | No| Device list state.|
63
64## Events
65
66The [universal events](../apis-arkui/arkui-ts/ts-component-general-events.md) are supported.
67
68## Example
69
70The following is an example of using **AVCastPicker**:
71
72```ts
73import { AVCastPickerState, AVInputCastPicker } from '@kit.AVSessionKit';
74
75@Entry
76@Component
77struct Index {
78
79  @State pickerImage: ResourceStr = $r('app.media.castPicker'); // Custom resources.
80
81  private onStateChange(state: AVCastPickerState) {
82    if (state == AVCastPickerState.STATE_APPEARING) {
83      console.info('The picker starts showing.');
84    } else if (state == AVCastPickerState.STATE_DISAPPEARING) {
85      console.info('The picker finishes presenting.');
86    }
87  }
88
89  @Builder
90  customPickerBuilder(): void {
91    Image(this.pickerImage)
92      .width('100%')
93      .height('100%')
94      .fillColor(Color.Black)
95  }
96
97  build() {
98    Row() {
99      Column() {
100        AVInputCastPicker({
101          customPicker: () => this.customPickerBuilder(),
102          onStateChange: this.onStateChange
103        })
104          .width('40vp')
105          .height('40vp')
106          .border({ width: 1, color: Color.Red })
107      }.height('50%')
108    }.width('50%')
109  }
110}
111```
112