Play Link Visual camera streams in IoT Studio

Prerequisites

You have created video products and devices. For more information, see Create video products and devices.

Step 1: Develop a real-time video service

1. Create a business logic.

   1. Create a project. For more information, see Create a general-purpose project.

   2. On the project Homepage, under Project development, click the Business logic tab.

   3. Click Create > Create Blank Business Service above the application list.

   4. In the Create Business Logic dialog box, enter a business logic name (for example: Get LV real-time video stream) and a description, and click Confirm.

      The business logic development workbench opens. The Service List on the left shows the newly created Get LV real-time video stream service. The right side displays a welcome guide that outlines the four development steps: select a trigger node, edit function nodes, debug, and publish.

2. Configure the business logic nodes.

   

   1. On the business logic development page, click the Node button on the left and drag an HTTP Request node onto the canvas.

   2. Drag a NodeJS script node to the canvas, connect the HTTP request node to it, and configure it.

      1. Under the Node.js script node configuration, click Extended Library Management. In the panel that appears, search for the @alicloud/pop-core package and click Install in the Actions column.

      2. For Script, select Blank Template, and copy the following sample code into the code box.

         Note

         The sample code calls the QueryLiveStreaming API provided by Link Visual to retrieve the live streaming URL of the device.

         /**
         * @param {Object} payload The output of the previous node.
         * @param {Object} node The output of a specified node.
         * @param {Object} query The output of the first node in the service flow.
         * @param {Object} context  { appKey, appSecret }
         * @param {Object} global Global variables.
         */
         module.exports = async function(payload, node, query, context, global) {
           const Core = require('@alicloud/pop-core');
           var client = new Core({
             accessKeyId: '<your-access-key-id>',
             accessKeySecret: '<your-access-key-secret>',
             // securityToken: '<your-sts-token>', // use STS Token
             endpoint: 'https://linkvisual.cn-shanghai.aliyuncs.com',
             apiVersion: '2018-01-20'
           });
           var params = {
             "Scheme": "hls",
             "PlayUnLimited": true,
             "UrlValidDuration": 14400,
             "ProductKey": "<your-productKey>",
             "DeviceName": "<your-deviceName>",
             // "IotInstanceId": "<your-iotInstanceId>" // Pass this parameter if required.
           }
           var requestOption = {
             method: 'POST',
             formatParams: false,
           };
           const result = await client.request('QueryLiveStreaming', params, requestOption);
           return result;
         }

   3. Drag and drop an HTTP response node, connect the NodeJS script node to it, and set its output to Previous node (payload).

3. Debug and publish the service.

   1. On the business service edit page, click Deploy and Debug in the upper-right corner to deploy the service.

   2. After the deployment is complete, click the Deploy and Debug button again to debug.

   3. After the debugging is successful, click the Publish button to the right of Deploy and Debug to publish the service.

      You must publish the business service to the cloud before other services can invoke it.

Step 2: Play the real-time video stream

1. Create a Web Application. For more information, see Create a Web Application.

2. In the Components section on the left of the web application editor page, drag a Real-time Video component to the canvas.

   In the Style panel on the right, you can configure the component's position (X and Y coordinates, and rotation angle), size (W and H), component name, opacity, and Source URL (enter an HLS URL).

3. Click the Configure Data Source icon to the right of the Playback source address input box.

4. In the Data Source Configuration panel, set Select Data Source to API, API Source to Business Logic Development, and Select Business Service to the created Get LV Real-time Video Stream service.

   Set Request Parameters to Static Parameter, keep the default value {}, and click OK.

5. Click OK.

6. In the top bar, click the Save, Preview, and Publish buttons to view and publish the application.