Camera

Requires:

@ray-js/ray≥0.6.9

Description

System camera component for previewing and capturing.

Props

Property	Type	Required	Default	Description
`mode`	"normal"	No	normal	Mode; only effective during initialization, cannot be changed dynamically
`resolution`	"low" \| "medium" \| "high"	No	medium	Resolution, cannot be changed dynamically
`devicePosition`	"front" \| "back"	No	back	Camera facing
`flash`	"auto" \| "on" \| "off" \| "torch"	No	auto	Flash mode
`borderWidth`	number	No	0	Border width, in px
`borderStyle`	"solid" \| "dashed"	No	solid	Border style
`borderColor`	string	No	#ffffff	Border color; must be hex format
`borderRadius`	number	No	0	Border radius, in px
`borderRadiusTopLeft`	number	No	-	Top-left border radius, in px
`borderRadiusTopRight`	number	No	-	Top-right border radius, in px
`borderRadiusBottomLeft`	number	No	-	Bottom-left border radius, in px
`borderRadiusBottomRight`	number	No	-	Bottom-right border radius, in px
`backgroundColor`	string	No	#ffffff	Background color; must be hex format
		No	-	Triggered when the camera terminates abnormally, e.g., when the app goes to the background
		No	-	Triggered when camera access is denied by the user
		No	-	Triggered when the camera is initialized
`updateLayout`	unknown	No	-	Used for cross-layer components to notify the container layer to update styles

Referenced Types

interfaceCameraStopEvent

export interface CameraStopEvent extends BaseEvent {
  /** 事件类型 */
  type: 'stop';
}

interfaceBaseEvent

Property	Type	Required	Description
`type`	string	Yes	Event type
`timeStamp`	number	Yes	Time in milliseconds since the page opened
		Yes	Source component of the event
		Yes	Collection of property values for the current component
`mark`	any	No	Event mark data

interfaceTarget

Property	Type	Required	Description
`id`	string	Yes	id of the event source component
		Yes	Collection of custom attributes from the `dataset` on the event source component

Valid Values

`resolution`

Value	Description	Since
`low`	Low resolution	-
`medium`	Medium resolution	-
`high`	High resolution	-

`devicePosition`

Value	Description	Since
`front`	Front camera	-
`back`	Rear camera	-

`flash`

Value	Description	Since
`auto`	Auto flash	-
`on`	Flash on	-
`off`	Flash off	-
`torch`	Torch mode	-

`borderStyle`

Value	Description	Since
`solid`	Solid border	-
`dashed`	Dashed border	-

Examples

Basic usage

import React from 'react';
import { Camera, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>Camera preview</Text>
      <Camera
        style={{ width: '100%', height: '300px' }}
        devicePosition="back"
        flash="auto"
        resolution="high"
        onInitdone={(e) => console.log('Initialized, max zoom:', e.detail.maxZoom)}
        onError={(e) => console.log('Camera error:', e.detail.errMsg)}
        onBindstop={() => console.log('Camera terminated unexpectedly')}
      />
    </View>
  );
}

Custom border

import React, { useState } from 'react';
import { Camera, View, Button } from '@ray-js/ray';

export default function () {
  const [position, setPosition] = useState<'back' | 'front'>('back');

  return (
    <View style={{ padding: '20px' }}>
      <Camera
        style={{ width: '100%', height: '300px' }}
        devicePosition={position}
        flash="off"
        resolution="medium"
        borderWidth={2}
        borderStyle="dashed"
        borderColor="#1890ff"
        borderRadius={16}
        backgroundColor="#000000"
        onInitdone={(e) => console.log('Initialized:', e.detail)}
      />
      <Button
        style={{ marginTop: '10px' }}
        onClick={() => setPosition(position === 'back' ? 'front' : 'back')}
      >
        Switch camera (current: {position === 'back' ? 'Rear' : 'Front'})
      </Button>
    </View>
  );
}

Related API: createCameraContext. This is a native component based on off-screen rendering. Please note the native component usage restrictions.

Scan with SmartLife App to Try

Download Sample Code

FAQ

Only one camera component can be inserted on the same page.
Not supported in the Tuya MiniApp IDE.
For related principles, refer to Native components based on off-screen rendering.
Please note the native component usage restrictions.

Camera

Description

Props

Referenced Types

Valid Values

resolution

devicePosition

flash

borderStyle