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>

<script>
export default {
  name: 'LarkXRDataChannelExample',
  data() {
    return {
      receivedData: '' // Used to store received data
    };
  },
  methods: {
    // Initialize the data channel
    larkxrInit() {
      console.log('Data Channel Initialized');
      window.larkxr_dc_init();
    },
    // Receive text data sent from the client page
    onDcTxtData: function(data) {
      this.receivedData = data; // Update received data
    },
    // Receive the current taskId
    onTaskStatus: function(taskId) {
      console.log('Received task status with taskId:', taskId);
    },
    // Send message to the client page
    sendMessage(message) {
      window.larkxr_dc_send(message);
    }
  },
  mounted() {
    this.larkxrInit(); // Call the initialization function after the page loads
    window.onDcTxtData = this.onDcTxtData; // Important
    window.onTaskStatus = this.onTaskStatus; // Important
  }
};
</script>

<style>
.fixed-size-div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
</style>

Data Channel Implementation

4.1 Setting the WebGL Page Address in LarkXR

Refer to the LarkSR Help Manual 3.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. 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. The documentation includes steps on installing and using the SDK and implementing the data channel.