• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# xcomponent
2
3> **NOTE**
4>
5> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<xcomponent>** displays the components to which the EGL/OpenGLES or media data is written.
8
9## Required Permissions
10
11None
12
13## Child Components
14
15Not supported
16
17## Attributes
18
19In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
20
21| Name         | Type  | Mandatory  | Description                                      |
22| ----------- | ------ | ---- | ---------------------------------------- |
23| id          | string | Yes   | Unique ID of the component. The value can contain a maximum of 128 characters.                  |
24| type        | string | Yes   | Type of the component. The options are as follows:<br>- **surface**: The content of this type of component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this type of component is displayed after having been combined with that of other components.<br>|
25| libraryname | string | No   | Name of the dynamic library generated after compilation at the application native layer.                     |
26
27## Styles
28
29The [universal styles](js-components-common-styles.md) are supported.
30
31## Events
32
33In addition to the [universal events](js-components-common-events.md), the following events are supported.
34
35| Name                              | Description                                    |
36| -------------------------------- | ---------------------------------------- |
37| onLoad(context?: object) => void | Triggered when the plug-in is loaded.<br>**context**: context of an **\<XComponent>** object. The APIs contained in the context are defined by developers.|
38| onDestroy() => void              | Triggered when the plug-in is destroyed.                            |
39
40## Methods
41
42In addition to the [universal methods](js-components-common-methods.md), the following methods are supported.
43
44| Name                      | Parameter                                      | Return Value Type | Description                                      |
45| ------------------------ | ---------------------------------------- | ------ | ---------------------------------------- |
46| getXComponentSurfaceId   | -                                        | string | Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used for @ohos interfaces, such as camera-related interfaces.|
47| setXComponentSurfaceSize | {<br>surfaceWidth: number,<br>surfaceHeight: number  <br>} | -      | Sets the width and height of the surface held by the **\<XComponent>**.            |
48| getXComponentContext     | -                                        | object | Obtains the instance object of the xcomponent method extended by the developer.              |
49
50## Example
51
52Provide a surface-type **\<XComponent>** to support camera preview and other capabilities.
53
54   ```html
55<!-- xxx.hml -->
56<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
57	<text id = 'camera' class = 'title'>camera_display</text>
58	<xcomponent id = 'xcomponent' type = 'surface' onload = 'onload' ondestroy = 'ondestroy'></xcomponent>
59</div>
60   ```
61
62   ```js
63// xxx.js
64import camera from '@ohos.multimedia.camera';
65export default {
66    onload() {
67        var surfaceId = this.$element('xcomponent').getXComponentSurfaceId();
68        camera.createPreviewOutput(surfaceId).then((previewOutput) => {
69            console.log('Promise returned with the PreviewOutput instance');
70        })
71    }
72}
73   ```
74