您的位置: 首页> Java源码

基于 Rokid CXR-M SDK 构建 AR 远程专家协作系统：从零实现眼镜端自定义 UI 与实时交互

匿名上传

发布时间:2025-11-25 13:15:01

摘要：本文深入剖析 Rokid CXR-M SDK 的自定义页面（Custom View）能力，设计并实现一套面向工业、医疗、运维等领域的 AR 远程专家协作系统。通过手机 App 与 Rokid Glasses 的深度协同，现场人员可实时共享第一视角画面，远程专家则能在手机端绘制标注、发送指令、调用工具，所有操作均以动态 UI 形式渲染于眼镜端，实现“所见即所得”的沉浸式协作。文章涵盖 JSON UI 设计、图标上传、动态更新、事件等全流程，并提供完整代码示例与性能优化建议。

一、引言：为什么需要 AR 远程协作？

在工业巡检、设备维修、医疗会诊等高专业度场景中，现场人员常面临复杂问题，亟需远程专家指导。传统方式（电话、视频通话）存在严重信息不对称：

专家看不见现场细节；
口头描述易产生歧义；
无法精准标注操作位置。

Rokid 智能眼镜凭借第一视角摄像头 + 透明显示的特性，天然适合此类场景。而 CXR-M SDK 的自定义页面（Custom View）功能，更是让开发者无需编写眼镜端原生代码，即可在眼镜上动态渲染远程专家的指令、标注、工具面板，实现真正的 “AR 增强协作”。

二、系统架构与核心流程

2.1 整体架构

现场端（Field Worker）：
- 佩戴 Rokid Glasses，开启摄像头；
- 手机 App 通过 CXR-M SDK 控制眼镜，并将第一视角视频流推送至云端。
远程端（Remote Expert）：
- 在 Web 或 App 端观看实时视频流；
- 可进行：文字指令、语音通话、屏幕标注（画圈/箭头）、调用工具（手电筒/拍照）。
眼镜端（Glasses Display）：
- 实时渲染远程专家发送的所有指令与标注，叠加于真实视野之上。

关键创新：所有远程交互内容，均由手机 App 通过 CXR-M SDK 的 Custom View 转化为眼镜端 UI，实现低延迟、高保真的 AR 叠加。

三、自定义页面（Custom View）深度解析

CXR-M SDK 的 openCustomView()、updateCustomView() 等接口，允许开发者用 JSON 描述 UI，并在眼镜端动态渲染。这是本系统的核心。

3.1 支持的布局与控件

根据 SDK 文档，支持以下组件：

布局容器：
- LinearLayout（垂直/水平）
- RelativeLayout（相对定位）
基础控件：
- TextView：显示文本指令
- ImageView：显示标注图标（如箭头、圆圈）

重要限制：

图片需提前上传，分辨率 ≤ 128×128px；
仅绿色通道（#00FF00）在眼镜端可见，其他通道将被忽略。

3.2 初始化 JSON 结构设计

我们设计一个包含指令区、标注区、工具状态区的三层布局：

{
  "type": "RelativeLayout",
  "props": {
    "layout_width": "match_parent",
    "layout_height": "match_parent",
    "backgroundColor": "#00000000"
  },
  "children": [
    {
      "type": "TextView",
      "props": {
        "id": "instruction",
        "layout_width": "wrap_content",
        "layout_height": "wrap_content",
        "layout_centerHorizontal": "true",
        "layout_marginTop": "50dp",
        "text": "请检查阀门A",
        "textSize": "18sp",
        "textColor": "#FF00FF00"
      }
    },
    {
      "type": "ImageView",
      "props": {
        "id": "annotation",
        "layout_width": "80dp",
        "layout_height": "80dp",
        "name": "arrow_right",
        "layout_centerInParent": "true"
      }
    },
    {
      "type": "TextView",
      "props": {
        "id": "tool_status",
        "layout_width": "wrap_content",
        "layout_height": "wrap_content",
        "layout_alignParentBottom": "true",
        "layout_centerHorizontal": "true",
        "layout_marginBottom": "30dp",
        "text": "手电筒已开启",
        "textSize": "14sp",
        "textColor": "#FF00FF00"
      }
    }
  ]
}

3.3 图标资源准备与上传

远程专家绘制的“箭头”“圆圈”等标注，需预先转换为 Base64 图片并上传：

// 将本地 PNG 转为 Base64（仅保留绿色通道）
fun loadIconAsBase64(context: Context, resId: Int): String {
    val bitmap = BitmapFactory.decodeResource(context.resources, resId)
    val greenOnly = Bitmap.createBitmap(bitmap.width, bitmap.height, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(greenOnly)
    val paint = Paint().apply {
        colorFilter = LightingColorFilter(0x00FF00, 0x000000) // 仅保留绿色通道
    }
    canvas.drawBitmap(bitmap, 0f, 0f, paint)
    val stream = ByteArrayOutputStream()
    greenOnly.compress(Bitmap.CompressFormat.PNG, 100, stream)
    return Base64.encodeToString(stream.toByteArray(), Base64.DEFAULT)
}

// 上传图标
val arrowIcon = IconInfo("arrow_right", loadIconAsBase64(context, R.drawable.arrow_right))
val circleIcon = IconInfo("circle", loadIconAsBase64(context, R.drawable.circle))
CxrApi.getInstance().sendCustomViewIcons(listOf(arrowIcon, circleIcon))

️ 注意：图标上传需在 openCustomView() 之前完成，否则 ImageView 无法显示。

四、核心功能实现

4.1 启动自定义页面

fun startRemoteAssist() {
    // 1. 确保蓝牙已连接
    if (!CxrApi.getInstance().isBluetoothConnected) return

    // 2. 上传图标
    uploadIcons()

    // 3. 打开自定义页面
    val initJson = loadJsonFromAsset("remote_assist_init.json")
    CxrApi.getInstance().openCustomView(initJson)
    
    // 4. 页面状态
    CxrApi.getInstance().setCustomViewListener(customViewListener)
}

4.2 动态更新指令与标注

当远程专家发送新指令或标注时，App 生成更新 JSON 并推送：

// 更新文本指令
fun updateInstruction(text: String) {
    val updateJson = """
        [
          {
            "action": "update",
            "id": "instruction",
            "props": { "text": "$text" }
          }
        ]
    """.trimIndent()
    CxrApi.getInstance().updateCustomView(updateJson)
}

// 更新标注图标（如从箭头变为圆圈）
fun updateAnnotation(iconName: String) {
    val updateJson = """
        [
          {
            "action": "update",
            "id": "annotation",
            "props": { "name": "$iconName" }
          }
        ]
    """.trimIndent()
    CxrApi.getInstance().updateCustomView(updateJson)
}

4.3 远程控制眼镜功能

专家可远程触发眼镜的手电筒、拍照、录像功能：

// 开启手电筒（通过控制亮度模拟）
fun turnOnFlashlight() {
    CxrApi.getInstance().setGlassBrightness(15) // 最高亮度
    updateToolStatus("手电筒已开启")
}

// 触发拍照
fun triggerPhoto() {
    CxrApi.getInstance().takeGlassPhoto(1920, 1080, 80, photoCallback)
    updateToolStatus("已拍照")
}

// 开启录像
fun startRecording() {
    CxrApi.getInstance().controlScene(CxrSceneType.VIDEO_RECORD, true, null)
    updateToolStatus("录像中...")
}

4.4 用户交互事件

现场人员可通过功能键长按反馈“确认”或“求助”：

// 设置 AI 事件（功能键长按触发 onAiKeyDown）
CxrApi.getInstance().setAiEventListener(object : AiEventListener {
    override fun onAiKeyDown() {
        // 向远程专家发送“已确认”信号
        sendConfirmationToExpert()
        // 清除当前指令
        updateInstruction(" 操作完成")
    }
    override fun onAiExit() { /* 退出协作模式 */ }
})

五、性能优化与最佳实践

5.1 图标管理策略

预加载常用图标：将箭头、圆圈、对勾、叉号等 10 个以内图标一次性上传；
避免频繁上传：图标上传是耗时操作，应在会话开始时完成。

5.2 UI 更新频率控制

防抖处理：若专家快速连续标注，合并为一次 updateCustomView 调用；
增量更新：仅更新变化的控件，避免全量刷新。

5.3 资源释放

协作结束时，务必释放资源：

fun endRemoteAssist() {
    CxrApi.getInstance().closeCustomView()
    CxrApi.getInstance().setCustomViewListener(null)
    CxrApi.getInstance().setAiEventListener(false)
    // 可选：恢复默认亮度/音量
}