xcomponent

<!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
 <text id = 'camera' class = 'title'>camera_display</text>
 <xcomponent id = 'xcomponent' type = 'surface' onload = 'onload' ondestroy = 'ondestroy'></xcomponent>
</div>

// xxx.js
import camera from '@ohos.multimedia.camera';
export default {
 onload() {
     var surfaceId = this.$element('xcomponent').getXComponentSurfaceId();
     camera.createPreviewOutput(surfaceId).then((previewOutput) => {
         console.log('Promise returned with the PreviewOutput instance');
     })
 }
}