WebGL 数据通道

简介

本手册介绍了如何在WebGL中使用 LarkXR 数据通道功能，包括初始化数据通道、接收用户端页面发送的文本数据以及发送消息到用户端页面。通过本手册，你可以快速上手并实现基本的通信功能。

注意：WebGL的数据通道功能需升级LarkXR版本到V3.3.2.6

功能概述

2.1 初始化数据通道

在WebGL页面加载完成后，需要初始化数据通道。此函数会调用 window.larkxr_dc_init() 方法，完成数据通道的初始化。

2.2 接收文本数据

当用户端页面发送文本数据时，页面会调用 onDcTxtData 函数。此函数会将接收到的文本数据显示在WebGL页面上的指定 div 元素中。

2.3 接收TaskId

当数据通道连通，WebGL页面会调用 onTaskStatus 函数。此函数会接收到TaskId参数。

2.4 发送消息到用户端页面

WebGL页面上有一个按钮，点击该按钮会调用 larkxr_dc_send 函数，将消息发送到用户端页面。

页面结构

以下是页面的WebGL HTML 结构 Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LarkXR Data Channel Example</title>
    <style>
        .fixed-size-div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>LarkXR Data Channel Example</h1>
    <button onclick="larkxr_dc_send('Hello from WebGL page!')">发送消息"Hello from WebGL page!"到用户端页面</button>
    <div class="fixed-size-div">This is the target div，接收用户端页面发送的数据:
        <span id="targetDiv"></span>
    </div>
    <script>
        // 初始化数据通道
        function larkxr_init() {
            console.log("Data Channel Initialized");
            window.larkxr_dc_init();
        }

        // 接收用户端页面发送的文本数据
        function onDcTxtData(data) {
            // 获取目标 div 元素
            const targetDiv = document.getElementById('targetDiv');
            // 将参数值赋值给 div 的 innerText
            targetDiv.innerText = data;
        }

        // 接收当前的taskId
        function onTaskStatus(taskId) {
            console.log("Received task status with taskId:", taskId);
        }

        // 页面加载完成后调用初始化函数
        window.onload = function () {
            larkxr_init();
        };
    </script>
</body>
</html>

以下是页面的WebGL Vue 结构 Demo：

LarkXR Data Channel Example

<button @click="sendMessage('Hello from WebGL page!')">发送消息"Hello from WebGL page!"到用户端页面

This is the target div，接收用户端页面发送的数据:
{{ receivedData }}

  <script>
  export default {
    name: 'LarkXRDataChannelExample',
    data() {
      return {
        receivedData: '' // 用于存储接收到的数据
      };
    },
    methods: {
      // 初始化数据通道
      larkxrInit() {
        console.log('Data Channel Initialized');
        window.larkxr_dc_init();
      },
      // 接收用户端页面发送的文本数据
      onDcTxtData: function(data) {
       this.receivedData = data; // 更新接收到的数据
     },
      // 接收当前的taskId
      onTaskStatus:function(taskId) {
        console.log('Received task status with taskId:', taskId);
      },
      // 发送消息到用户端页面
      sendMessage(message) {
        window.larkxr_dc_send(message);
      }
    },
    mounted() {
      this.larkxrInit(); // 页面加载完成后调用初始化函数
      window.onDcTxtData = this.onDcTxtData // 重要
      window.onTaskStatus = this.onTaskStatus // 重要
    }
  };
  </script>
  
  <style>
  .fixed-size-div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
  </style>

数据通道实现

4.1 WebGL 页面地址设置到 LarkXR

根据 LarkSR 帮助手册 3.3，添加 WebGL 程序。在手册中找到相关章节，按照说明填写 WebGL 页面的地址。

4.2 使用 WebSDK 实现数据通道

1：下载源码

从 GitHub - ParaverseTechnology/lark_sr_websdk_demos 下载 WebSDK 源码。此项目提供了如何使用 LarkSR WebSDK 创建云渲染客户端的简单介绍。

2：参考手册

详细操作请参考 LarkSR WebClient SDK 文档。文档中包含了如何安装、使用 SDK 以及如何实现数据通道的具体步骤。