本页目录
相关链接常见问题

Camera

版本要求:
@ray-js/ray≥0.6.9

描述

系统相机组件，用于预览与拍摄。

属性

属性类型必填默认值说明
mode"normal"否normal应用模式，只在初始化时有效，不能动态变更
resolution"low" | "medium" | "high"否medium分辨率，不支持动态修改
devicePosition"front" | "back"否back摄像头朝向
flash"auto" | "on" | "off" | "torch"否auto闪光灯模式
borderWidthnumber否0边框宽度，单位 px
borderStyle"solid" | "dashed"否solid边框样式
borderColorstring否#ffffff边框颜色，须为十六进制格式
borderRadiusnumber否0边框圆角，单位 px
borderRadiusTopLeftnumber否-边框左上角圆角，单位 px
borderRadiusTopRightnumber否-边框右上角圆角，单位 px
borderRadiusBottomLeftnumber否-边框左下角圆角，单位 px
borderRadiusBottomRightnumber否-边框右下角圆角，单位 px
backgroundColorstring否#ffffff背景颜色，须为十六进制格式
否-摄像头在非正常终止时触发，如退出后台等情况
否-用户不允许使用摄像头时触发
否-相机初始化完成时触发
updateLayoutunknown否-用来异层组件通知容器层样式更新

引用对象

interfaceCameraStopEvent
export interface CameraStopEvent extends BaseEvent {
  /** 事件类型 */
  type: 'stop';
}
interfaceBaseEvent
属性类型必填描述
typestring是事件类型
timeStampnumber是页面打开到触发事件所经过的毫秒数
是触发事件的源组件
是当前组件的一些属性值集合
markany否事件标记数据
interfaceTarget
属性类型必填描述
idstring是事件源组件的id
是事件源组件上的 `dataset` 自定义属性组成的集合

合法值

resolution
值说明最低版本
low低分辨率-
medium中分辨率-
high高分辨率-
devicePosition
值说明最低版本
front前置摄像头-
back后置摄像头-
flash
值说明最低版本
auto自动闪光灯-
on开启闪光灯-
off关闭闪光灯-
torch手电筒模式-
borderStyle
值说明最低版本
solid实线边框-
dashed虚线边框-

示例代码

基础用法

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>相机预览</Text>
      <Camera
        style={{ width: '100%', height: '300px' }}
        devicePosition="back"
        flash="auto"
        resolution="high"
        onInitdone={(e) => console.log('初始化完成, 最大缩放:', e.detail.maxZoom)}
        onError={(e) => console.log('相机错误:', e.detail.errMsg)}
        onBindstop={() => console.log('相机非正常终止')}
      />
    </View>
  );
}

自定义边框

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('初始化完成:', e.detail)}
      />
      <Button
        style={{ marginTop: '10px' }}
        onClick={() => setPosition(position === 'back' ? 'front' : 'back')}
      >
        切换摄像头（当前: {position === 'back' ? '后置' : '前置'}）
      </Button>
    </View>
  );
}

相关链接

相关 API：createCameraContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。

智能生活 App 扫码体验
下载示例代码

常见问题

  1. 同一页面只能插入一个 camera 组件。
  2. Tuya MiniApp IDE 上不支持。
  3. 相关原理请参考 基于异层渲染的原生组件。
  4. 请注意 原生组件使用限制。