Camera
基础库 2.2.0 开始支持, 低版本需做兼容处理。
系统相机。
相关 API：createCameraContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。
导入
import { Camera } from '@ray-js/ray';
import { createCameraContext } from '@ray-js/api';属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| mode | string | normal | 否 | 应用模式，只在初始化时有效，不能动态变更 |
| resolution | string | medium | 否 | 分辨率，不支持动态修改；可选值有 low: 低，medium: 中，high: 高 |
| devicePosition | string | back | 否 | 摄像头朝向, 可选值有front: 前置, back: 后置 |
| flash | string | auto | 否 | 闪光灯, 可选值有auto: 自动, on: 打开, off: 关闭, torch: 常亮 |
| borderWidth | number | 0 | 否 | 边框的宽度, 单位 px |
| borderStyle | string | solid | 否 | 边框的样式, 可选值: solid 和 dashed |
| borderColor | string | #ffffff | 否 | 边框的颜色, 必须为十六进制格式 |
| borderRadius | number | 0 | 否 | 边框的圆角, 单位 px |
| borderRadiusTopLeft | number | 否 | 边框的左上角圆角大小, 单位 px | |
| borderRadiusTopRight | number | 否 | 边框的右上角圆角大小, 单位 px | |
| borderRadiusBottomLeft | number | 否 | 边框的左下角圆角大小, 单位 px | |
| borderRadiusBottomRight | number | 否 | 边框的右下角圆角大小, 单位 px | |
| backgroundColor | string | #ffffff | 否 | 背景颜色, 必须为十六进制格式 |
| onBindstop | eventhandle | 否 | 摄像头在非正常终止时触发，如退出后台等情况 | |
| onError | eventhandle | 否 | 用户不允许使用摄像头时触发 | |
| onInitdone | eventhandle | 否 | 相机初始化完成时触发，e.detail = {maxZoom}
|
Bug & Tip
- tip：同一页面只能插入一个
camera组件。 - tip：Tuya MiniApp Tools 上不支持。
- tip：相关原理请参考 基于异层渲染的原生组件。
- tip：请注意 原生组件使用限制。
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
Image
图片
导入
import { Image } from '@ray-js/ray';属性说明
| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
|---|---|---|---|---|
| className | string | 样式名 | 涂鸦、微信 | |
| src | string | 图片地址 | 涂鸦、微信 | |
| mode | string | 'scaleToFill' | 图片裁剪、缩放的模式，RN 支持部分模式，具体见下表 | 涂鸦、微信 |
| onLoad | (e: { width: number; height: number; origin }) => void | 涂鸦、微信 | ||
| onError | (e: { errMsg: string; origin }) => void | 涂鸦、微信 |
mode 合法值
| 值 | 说明 | 支持平台 |
|---|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | 涂鸦、微信 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 | 涂鸦、微信 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 | 涂鸦、微信 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 | 涂鸦、微信 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 | 涂鸦、微信 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 | 涂鸦、微信 |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 | 涂鸦、微信 |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 | 涂鸦、微信 |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 | 涂鸦、微信 |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 | 涂鸦、微信 |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 | 涂鸦、微信 |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 | 涂鸦、微信 |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 | 涂鸦、微信 |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 | 涂鸦、微信 |
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
IpcPlayer
基础库 2.2.0 开始支持, 低版本需做兼容处理。
实时视频播放。
相关 API：createIpcPlayerContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。
导入
import { IpcPlayer } from '@ray-js/ray';
import { createIpcPlayerContext } from '@ray-js/api';属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| deviceId | string | 是 | device-id 组件的唯一标识符，必须设置该属性 | |
| autoplay | boolean | false | 否 | 自动播放 |
| muted | boolean | false | 否 | 是否静音; |
| clarity | string | normal | 否 | 清晰度, 可选值有normal: 标清, hd: 高清 |
| soundMode | string | speaker | 否 | 声音输出方式, 可选值有speaker: 扬声器, ear: 听筒 |
| orientation | string | vertical | 否 | 画面方向, 可选值有 vertical: 竖直, horizontal: 水平 |
| objectFit | string | contain | 否 | 填充模式, 可选值有 contain: 图像长边填满屏幕，短边区域会被填充⿊⾊, fillCrop: 图像铺满屏幕，超出显示区域的部分将被截掉 |
| autoPauseIf Navigate |
boolean | true | 否 | 当跳转到本小程序的其他页面时，是否自动暂停本页面的实时音视频播放 |
| autoPauseIf OpenNative |
boolean | true | 否 | 当跳转到 App 其它原生页面时，是否自动暂停本页面的实时音视频播放 |
| rotateZ | number | 0 | 否 | 摄像头旋转角度，有效值 0~360 的整数 |
| scalable | boolean | true | 否 | 当前是否可缩放 |
| scaleMultiple | number | 0 | 否 | 缩放比例，仅当 scalable 为 true 时生效，最大不超过 maxScaleMultiple (maxScaleMultiple 可以通过 bind:initdone 事件返回的参数进行获取) |
| ptzControllable | boolean | true | 否 | 设置是否开启视频区域云平台控制 |
| borderWidth | number/string | 0 | 否 | 边框的宽度, 单位 px |
| borderStyle | string | solid | 否 | 边框的样式, 可选值: solid 和 dashed |
| borderColor | string | #ffffff | 否 | 边框的颜色, 必须为十六进制格式 |
| borderRadius | number/string | 0 | 否 | 边框的圆角, 单位 px |
| backgroundColor | string | #ffffff | 否 | 背景颜色, 必须为十六进制格式 |
| onConnectchange | eventhandle | 否 | 当连接状态发生变化时触发，detail = { state }, state: 0 表示连接成功 | |
| onPreviewchange | eventhandle | 否 | 当预览状态发生变化时触发，detail = { state }, state: 1 表示开始预览成功, state: 0 表示结束预览成功 | |
| onOnlinechange | eventhandle | 否 | 当 ipc 设备在线状态变化时触发，detail = { online }, online: true 表示在线, online: false 表示离线或断电 | |
| onInitdone | eventhandle | 否 | 初始化完成时触发 | |
| onZoomchange | eventhandle | 否 | 视频缩放比例及当前倍数变化，detail = { zoomLevel }, zoomLevel 为缩放比例 | |
| onVideotap | eventhandle | 否 | 点击视频时触发 | |
| onError | eventhandle | 否 | 当状态异层时触发 error 事件，detail = { "errCode": 错误码 , "errMsg": 错误描述 }, 错误码见下表 |
错误码
| 值 | 说明 |
|---|---|
| -1000 | 其他未知异常 |
| -1001 | connect 失败 |
| -1002 | 开启预览失败 |
| -1003 | 结束预览失败 |
| -1004 | 设置静音失败 |
| -1005 | 设置清晰度失败 |
| -1006 | 截图失败 |
| -1007 | 属性不合法 |
| -1008 | 设置参数不合法 |
| -1009 | disconnect 失败 |
| -1010 | 网络状态不可用 |
| -1011 | 设备离线 |
| -1012 | 设备被移除 |
| -1013 | startTalk fail |
| -1014 | StopTalk fail |
| -1015 | StartRecord fail |
| -1016 | StopRecord fail |
| -1017 | IsTalkBacking fail |
| -1018 | SetAvailableRockerDirections fail |
| -1019 | IsPTZControllable fail |
| -1020 | SetTrackingStatus fail |
| -1021 | GetVideoInfo fail |
Bug & Tip
- tip：ipc-player 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
- tip：Tuya MiniApp Tools 上暂不支持。
- tip：相关原理请参考 基于异层渲染的原生组件。
- tip：请注意 原生组件使用限制。
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。