智能小程序 Ray 开发——媒体组件 Camera、Image 和 IpcPlayer 实操讲解

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

1. tip：同一页面只能插入一个 camera 组件。
2. tip：Tuya MiniApp Tools 上不支持。
3. tip：相关原理请参考 基于异层渲染的原生组件。
4. 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

1. tip：ipc-player 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
2. tip：Tuya MiniApp Tools 上暂不支持。
3. tip：相关原理请参考 基于异层渲染的原生组件。
4. tip：请注意 原生组件使用限制。

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。