WebSDK + DataChannel

# Embedding Cloud Rendering into Business Systems: A Complete Guide to Seamless Interaction

In today's digital age, embedding cloud rendering technology into business systems has become a key strategy for enhancing user experience and work efficiency. By integrating cloud rendering into business systems, users can see real-time responses of cloud-rendered images while performing business operations, and operations on the cloud-rendered images can also be immediately fed back into the business system. This seamless interaction not only enhances the user experience but also provides new possibilities for optimizing business processes. This article will detail how to achieve this goal using **WebSDK and Data Channel Plugins**.

## I. Scenario Overview

Assume you are managing a building visualization project where your business system allows users to design building models and view rendering effects in real time. To achieve this functionality, you need to embed cloud rendering into the business system so that users can see real-time responses of the cloud-rendered images while operating within the business system, and operations on the cloud-rendered images can also be fed back into the business system for two-way interaction.

## II. Preparations

Before starting the implementation, ensure you have the following:

- **Business System + WebSDK**: You can build on the basis of the WebSDK Demo. Source code: [github.com](https://github.com/ParaverseTechnology/lark_sr_websdk_demos).
- **LarkXR Cloud Rendering Platform**: You can either self-host [https://paraverse.cc/larkxr-resource/](https://paraverse.cc/larkxr-resource/) 
- **Data Channel Plugin**: Supports Unity, Unreal Engine (UE), and WebGL applications, and provides different integration methods for each technology stack. Here is the detailed integration guide: [https://docs.paraverse.cc/doc/1197/](https://docs.paraverse.cc/doc/1197/).

## III. Implementation Steps

### (1) Integrating WebSDK

1. **Introducing WebSDK**

WebSDK offers a variety of demo examples. Source code: [github.com](https://github.com/ParaverseTechnology/lark_sr_websdk_demos). Among them, `ui-mobile-vue-new` is a highly recommended choice. This demo, developed with Vue 2.0, not only maintains consistency with the standard client but also provides a complete set of UI components and supports high customization.

```bash
# npm
npm i larksr_websdk
# plain html
<script src="larksr-web-sdk.min.js"></script>
```
# 2. Initializing WebSDK & Loading Cloud Rendering Scenes

You need to provide some configuration parameters. For example, if you are using a self-built LarkXR cloud rendering platform:

```javascript
// serverAddress: LarkXR cloud rendering platform address, exp: http://222.128.6.137:8181/
// Your SDK ID: If you have applied for a cloud authorization code from the developer platform, please apply for an SDK authorization code on the developer platform. Otherwise, contact business@paraverse.cc
// appliId: Check in the LarkXR management console.
var larksr = new LarkSR({ 
    // Set the element to mount the display
    // Note: Do *not* set it to document.documentElement
    rootElement: document.getElementById('container'),
    // Server address, fill in your server address in actual use
    // e.g., http://222.128.6.137:8181/
    serverAddress: "Lark Frontend Server Address",
});

// Authorization code, must be verified successfully before calling connect
larksr.initSDKAuthCode('Your SDK ID')
.then(() => {
    // Start connection;
    client.connect({
        // The application ID of the cloud resource to be used, check in the LarkXR management console.
        // Refer to the documentation for querying applications
        // [LarkXR3.3 API Documentation](https://showdoc.pingxingyun.com/web/#/75/1697)
        appliId: "Application ID"
    })
    .then(() => {
        console.log('enter success');
    })
    .catch((e) => {
        console.error(e);
    }); 
})
.catch((e) => {
    console.error(e);
});
```
### (2) Configuring Data Channel Plugin

• We support Unity, Unreal Engine (UE), and WebGL applications, and provide different integration methods for each technology stack. Here is the detailed integration guide: [One-Stop Technical Documentation](https://docs.paraverse.cc/doc/1197/)

### (3) Sending Messages to Cloud Rendered Scenes

In the business system, when users perform operations, send messages to the cloud-rendered scenes through the methods encapsulated in WebSDK. For example:

```xml
<template>
  <div>
    
    <button @click="handleClick">Click me, send a message to the cloud application</button>
  </div>
</template>

Taking Unreal Engine (UE) as an example, you can listen for messages sent from the business system:

```cpp
// on_data: Callback for receiving data from web or other clients, must not be NULL
LARKXR_API int DC_CALL lr_client_start(const char* taskid, on_connected cb_connected, on_data cb_data, on_disconnected cb_disconnected, void* user_data);
```
### (5) Cloud Application Sends Messages to Business End

Sending data, supports both string and binary data.

Parameter description:

1. type: Type of data to be sent, either string or binary data.
2. data: Pointer to the data.
3. size: Length of the data (for strings, it is recommended to include the length of '\0').

Return value: Less than 0 indicates a failure to send, refer to type definition; equal to the length of the sent data indicates a successful send.

```cpp
LARKXR_API int DC_CALL lr_client_send(enum data_type type, const char* data, size_t size);
```
### (6) Business End Listens for Messages from Cloud Application

Throughout the entire lifecycle of LarkSR, various event notifications will be triggered.

Among them, the data channel connection success event and the data channel message received event are the types of events that are the focus of this implementation.

```javascript
// Is the data channel open -- Important, can determine if the data channel is connected
larksr.on('datachannelopen', function(e) { 
    console.log("LarkSRClientEvent datachannelopen", e); 
});
// Data channel receives text message
larksr.on('datachanneltext', function(e) { 
    console.log("LarkSRClientEvent datachanneltext", e); 
});
// Data channel receives binary message 
larksr.on('datachannelbinary', function(e) { 
    console.log("LarkSRClientEvent datachannelbinary", e); 
});
```