组件：相机

相机组件用于调用设备摄像头进行拍照和录像，支持实时预览、拍照、开始/停止录像、保存文件以及释放资源等操作。它适用于头像上传、身份验证、视频录制、扫码识别等需要调用摄像头的场景。注意： 该组件为可视组件，但实际显示依赖于其关联的 视频播放器 或 画布 组件，需要将相机实例与预览组件关联后才能看到画面。

典型使用场景：

用户头像拍摄与上传（社交应用、个人资料）
身份验证（人脸识别、证件拍照）
视频录制（短视频、教学视频）
二维码/条形码扫描（配合扫码库）
实时视频预览（视频聊天、监控）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

快速索引

你想知道什么	直接看这里
如何设置视频预览	`视频播放器` 属性
如何初始化摄像头	`初始化()`
如何拍照	`拍照()`
如何保存照片到本地	`保存文件(文件名前缀)`
如何开始录像	`开始录像()`
如何停止录像并获取视频	`停止录像()`
如何停止所有操作	`停止所有操作()`
如何释放摄像头资源	`关闭()`

⚠️ 使用前提

用户授权：使用摄像头需要用户明确授权，浏览器会在调用 初始化() 时弹出权限请求弹窗。若用户拒绝授权，摄像头无法开启。
HTTPS 环境：摄像头访问要求在安全上下文（HTTPS）或 localhost 下使用，否则 API 会被拒绝。
设备支持：请确保设备具有摄像头硬件且驱动正常（PC 端通常需外接摄像头）。
预览关联：相机本身不直接显示画面，需将 视频播放器 属性设置为一个 视频播放器 组件的实例，用于显示摄像头画面。

生命周期流程

相机的使用通常遵循以下流程：

创建实例 → 设置预览组件 → 初始化（请求权限）→ 拍照 / 开始录像 → 停止录像 / 保存照片 → 关闭（释放资源）

属性详解

视频播放器

类型： 对象（视频播放器 组件实例或原生 <video> 元素）
说明： 设置用于显示摄像头实时预览画面的视频播放器组件。必须在调用 初始化() 之前设置此属性，否则无法看到画面。

示例：

相机1.视频播放器 = 预览视频组件

画布

类型： 对象（画板 组件实例或原生 <canvas> 元素）
说明： 设置用于拍照时绘制画面的画布组件。如果未设置，拍照时系统会自动创建一个临时画布。通常配合拍照功能使用，可在画布上叠加 UI 元素或对照片做进一步处理。
示例：
```
相机1.画布 = 画板1
```

常用操作速查

操作	属性/方法	示例
关联预览组件	`视频播放器`	`相机1.视频播放器 = 预览组件`
初始化摄像头	`初始化()`	`相机1.初始化()`
拍摄照片	`拍照()`	`相机1.拍照()`
保存照片到本地	`保存文件(文件名前缀)`	`相机1.保存文件("头像")`
开始录像	`开始录像()`	`相机1.开始录像()`
停止录像并获取视频	`停止录像()`	`变量视频 = 相机1.停止录像()`
停止所有操作	`停止所有操作()`	`相机1.停止所有操作()`
关闭摄像头释放资源	`关闭()`	`相机1.关闭()`

基础示例

最简单的相机使用流程：创建相机 → 关联预览 → 初始化 → 拍照。

' 1. 创建预览视频组件
变量 预览器 = 创建 视频播放器()
预览器.左边 = 50
预览器.顶边 = 50
预览器.视频宽度 = 480
预览器.视频高度 = 360
预览器.边框 = "1px solid #d9d9d9"
预览器.边框圆角 = "8px"
添加组件(预览器)

' 2. 创建相机并关联预览
变量 相机1 = 创建 相机()
相机1.视频播放器 = 预览器

' 3. 初始化摄像头
相机1.初始化()

' 4. 等待2秒后拍照（给用户调整姿势的时间）
延时执行(() => {
    相机1.拍照()
    弹出提示("拍照完成")
    ' 5. 保存照片到本地（下载）
    相机1.保存文件("我的照片")
}, 2000)

综合示例：头像拍照与上传

本示例构建一个完整的头像拍照界面，包含摄像头预览、拍照按钮、拍照预览、重拍和上传功能。

' ========== 创建UI布局 ==========
' 标题
变量 标题 = 创建 标签()
标题.左边 = 30
标题.顶边 = 20
标题.文本 = "📷 拍摄头像"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
添加组件(标题)

' 提示标签
变量 提示标签 = 创建 标签()
提示标签.左边 = 30
提示标签.顶边 = 55
提示标签.文本 = "请将面部置于框内，点击拍照"
提示标签.字体大小 = "14px"
提示标签.文本颜色 = "#999"
添加组件(提示标签)

' 预览视频组件（摄像头实时画面）
变量 预览器 = 创建 视频播放器()
预览器.左边 = 30
预览器.顶边 = 85
预览器.视频宽度 = 480
预览器.视频高度 = 360
预览器.边框 = "2px solid #d9d9d9"
预览器.边框圆角 = "8px"
预览器.背景颜色 = "#000"
添加组件(预览器)

' 拍照按钮
变量 拍照按钮 = 创建 按钮()
拍照按钮.左边 = 30
拍照按钮.顶边 = 460
拍照按钮.宽度 = 120
拍照按钮.高度 = 44
拍照按钮.文本 = "📸 拍照"
拍照按钮.背景颜色 = "#1890ff"
拍照按钮.文本颜色 = "#ffffff"
拍照按钮.字体大小 = "16px"
拍照按钮.边框圆角 = "6px"
添加组件(拍照按钮)

' 重拍按钮（初始禁用）
变量 重拍按钮 = 创建 按钮()
重拍按钮.左边 = 170
重拍按钮.顶边 = 460
重拍按钮.宽度 = 120
重拍按钮.高度 = 44
重拍按钮.文本 = "🔄 重拍"
重拍按钮.背景颜色 = "#d9d9d9"
重拍按钮.文本颜色 = "#666"
重拍按钮.字体大小 = "16px"
重拍按钮.边框圆角 = "6px"
重拍按钮.禁用 = 真
添加组件(重拍按钮)

' 上传按钮（初始禁用）
变量 上传按钮 = 创建 按钮()
上传按钮.左边 = 310
上传按钮.顶边 = 460
上传按钮.宽度 = 120
上传按钮.高度 = 44
上传按钮.文本 = "⬆ 上传"
上传按钮.背景颜色 = "#52c41a"
上传按钮.文本颜色 = "#ffffff"
上传按钮.字体大小 = "16px"
上传按钮.边框圆角 = "6px"
上传按钮.禁用 = 真
添加组件(重拍按钮)

' 照片预览标签（拍照后显示）
变量 照片预览标签 = 创建 标签()
照片预览标签.左边 = 540
照片预览标签.顶边 = 85
照片预览标签.宽度 = 200
照片预览标签.高度 = 360
照片预览标签.背景颜色 = "#f5f5f5"
照片预览标签.边框 = "1px dashed #d9d9d9"
照片预览标签.边框圆角 = "8px"
照片预览标签.文本 = "照片预览区"
照片预览标签.文本颜色 = "#ccc"
照片预览标签.字体大小 = "14px"
照片预览标签.内容水平对齐 = "center"
' 垂直居中使用内边距模拟
添加组件(照片预览标签)

' ========== 业务逻辑 ==========
变量 相机 = 创建 相机()
变量 已拍照 = 假
变量 当前照片URL = ""

' 关联预览
相机.视频播放器 = 预览器

' 初始化摄像头
相机.初始化()

' ========== 拍照 ==========
拍照按钮.置被单击回调((源对象, 事件对象) => {
    如果(已拍照)
        弹出提示("已经拍过照了，请点击重拍")
        返回
    结束 如果
    
    相机.拍照()
    已拍照 = 真
    
    ' 获取照片数据并显示（由于相机没有直接返回照片数据的方法，我们使用保存文件后读取）
    ' 实际项目中可通过 Canvas 获取图片数据，这里简化流程
    相机.保存文件("头像照片")
    
    拍照按钮.禁用 = 真
    重拍按钮.禁用 = 假
    上传按钮.禁用 = 假
    提示标签.文本 = "✅ 拍照完成，可预览或上传"
    提示标签.文本颜色 = "#52c41a"
    
    ' 模拟在预览区显示照片（实际需通过文件读取或 Canvas 获取）
    照片预览标签.文本 = "📸 照片已拍摄\n点击重拍可重新拍摄"
    照片预览标签.文本颜色 = "#333"
    照片预览标签.字体大小 = "16px"
})

' ========== 重拍 ==========
重拍按钮.置被单击回调((源对象, 事件对象) => {
    已拍照 = 假
    
    拍照按钮.禁用 = 假
    重拍按钮.禁用 = 真
    上传按钮.禁用 = 真
    提示标签.文本 = "请重新拍照"
    提示标签.文本颜色 = "#999"
    照片预览标签.文本 = "照片预览区"
    照片预览标签.文本颜色 = "#ccc"
    照片预览标签.字体大小 = "14px"
    
    ' 清除上次保存的照片（模拟）
    弹出提示("已重置，可以重新拍照")
})

' ========== 上传 ==========
上传按钮.置被单击回调((源对象, 事件对象) => {
    如果(!已拍照)
        弹出提示("请先拍照")
        返回
    结束 如果
    
    上传按钮.禁用 = 真
    上传按钮.文本 = "上传中..."
    提示标签.文本 = "⏳ 正在上传..."
    提示标签.文本颜色 = "#faad14"
    
    ' 模拟上传过程
    延时执行(() => {
        上传按钮.禁用 = 假
        上传按钮.文本 = "⬆ 上传"
        提示标签.文本 = "✅ 上传成功！"
        提示标签.文本颜色 = "#52c41a"
        弹出提示("头像上传成功")
        
        ' 关闭摄像头（可选）
        相机.停止所有操作()
        相机.关闭()
        预览器.视频地址 = ""  ' 清空预览
    }, 2000)
})

' ========== 页面关闭时释放资源 ==========
事件 页面被关闭()
    相机.关闭()
结束 事件

函数详解

初始化()

功能： 初始化摄像头，请求用户授权并开始预览画面。必须在关联 视频播放器 后调用。
返回值： 无（操作结果通过预览组件的状态体现）。
示例： 相机1.初始化()

拍照()

功能： 从摄像头当前帧捕获一张照片。拍照后，照片数据可以通过 保存文件() 持久化，或通过关联的 画布 组件获取。
返回值： 无。
示例： 相机1.拍照()

保存文件(文件名前缀)

功能： 将最近一次拍摄的照片保存为文件（触发浏览器下载）。文件名会自动追加时间戳以避免重名。
参数： 文件名前缀（文本型），用于生成下载文件名的前缀。
返回值： 无。
示例： 相机1.保存文件("我的照片") → 下载文件如 我的照片_20240815123045.jpg

开始录像()

功能： 开始录制视频。录制过程中摄像头持续工作，画面仍在预览组件中显示。
返回值： 无。
示例： 相机1.开始录像()

停止录像()

功能： 停止当前的录像操作，并返回录制的视频数据（Blob 对象）。
返回值： Blob 对象，若无有效录像则返回 空。