WebGL DataChannel

1 Introduction
   --

This guide explains how to use the LarkXR Data Channel feature in WebGL, covering initialization, receiving text data from the client page, and sending messages back. It helps you quickly achieve basic communication functions.

Note: WebGL Data Channel requires upgrading LarkXR to version V3.3.2.6.

Functional Overview
   ----

### **2.1 Initializing the Data Channel**

After the WebGL page loads, initialize the data channel by calling `window.larkxr_dc_init()`, which sets up the data channel.

### **2.2 Receiving Text Data**

When the client page sends text data, the `onDcTxtData` function is triggered. It displays the received text in a specified div element on the WebGL page.

### **2.3 Receiving TaskId**

Upon data channel connection, the WebGL page calls the `onTaskStatus` function, which receives the TaskId parameter.

### **2.4 Sending Messages to the Client Page**

A button on the WebGL page calls `larkxr_dc_send` to send messages to the client page.

Page Structure
   ----
WebGL HTML:

```
<!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!')">Send message "Hello from WebGL page!" to the client page</button>
    <div class="fixed-size-div">This is the target div, receiving data from the client page:
        <span id="targetDiv"></span>
    </div>
    <script>
        // Initialize the data channel
        function larkxr_init() {
            console.log("Data Channel Initialized");
            window.larkxr_dc_init();
        }

// Receive text data sent from the client page
        function onDcTxtData(data) {
            // Get the target div element
            const targetDiv = document.getElementById('targetDiv');
            // Assign the parameter value to the div's innerText
            targetDiv.innerText = data;
        }

// Receive the current taskId
        function onTaskStatus(taskId) {
            console.log("Received task status with taskId:", taskId);
        }

// Call the initialization function after the page loads
        window.onload = function () {
            larkxr_init();
        };
    </script>
</body>
</html>

```
WebGL Vue:

```
 <template>
  <div class="larkxr-data-channel-example">
    <h1>LarkXR Data Channel Example</h1>
    <button @click="sendMessage('Hello from WebGL page!')">Send message "Hello from WebGL page!" to the client page</button>
    <div class="fixed-size-div">
      This is the target div, receiving data from the client page:
      <span>{{ receivedData }}</span>
    </div>
  </div>
</template>

```

Data Channel Implementation
   ------

### 4.1 Setting the WebGL Page Address in LarkXR

Refer to the [LarkSR Help Manual 3.3](https://docs.paraverse.cc/project/3/) to add the WebGL program. Locate the relevant section in the manual and fill in the WebGL page address as instructed.

### 4.2 Implementing the Data Channel with WebSDK

1: Download the Source Code

Download the WebSDK source code from [GitHub - ParaverseTechnology/lark_sr_websdk_demos](https://github.com/ParaverseTechnology/lark_sr_websdk_demos). This project provides a simple introduction to using the LarkSR WebSDK to create a cloud rendering client.

2: Refer to the Manual

For detailed operations, refer to the [LarkSR WebClient SDK Documentation](https://paraversetechnology.github.io/webclient_sdk/). The documentation includes steps on installing and using the SDK and implementing the data channel.