Portrait Style

Prerequisites

AppServer

You have configured the AppServer and obtained an endpoint. For more information, see Server-side configuration and running.

Streamer

AUI Kits for interactive streaming of web applications provides only live channels on the viewer side and does not support stream ingest. If you want to use all features of AUI Kits for interactive streaming, integrate AUI Kits for mobile terminals. For more information, see Portrait mode and Landscape mode.

Development framework

This project is developed using the UmiJS framework and the React and TypeScript technology stacks. For more information about the UmiJS framework, see the documentation on the official website of UmiJS.

Quick Integration

Prepare the environment

Configure a local Node environment. For more information, see Getting started with UmiJS. If you already configured the local Node development environment, skip this step.

Download the source code

You can download the project from the open source project repository.

Configuration

Configure the required parameters for the config object in the src/config.ts file.

Configure the AppServer

Configure the parameter for the AppServer in the config.appServer parameter.

appServer: {
  // Configure the AppServer service domain name. Do not end the value with a forward slash (/). Cross-domain settings must be enabled on the server-side.
  origin: 'https://xxx.xxx.xxx',
}

Configure imServer

Configure the parameters for interactive messaging in the config.imServer parameter. The parameter settings must be the same on the frontend and backend.

imServer: {
  // Previous version of the interactive message service. This version will be phased out. We recommend that you do not enable it.
  // If enabled, import aliyun-interaction-sdk in a script.
  aliyunIMV1: {
    enable: false, // Specifies whether to enable.
    primary: false, // Specifies whether it is the primary channel.
  },
  // New version of the interactive message service. We recommend using this version.
  // If enabled, import alivc-im-sdk in a script.
  aliyunIMV2: {
    enable: true, // Specifies whether to enable.
    primary: true, // Specifies whether it is the primary channel.
  },
}

Run the project in the local environment

After you configure the API domain name, open the terminal, go to the project directory, and then run the following commands to run the project in the local environment:

// Install npm packages (installation may be slow).
npm install
// If you have tools such as cnpm, pnpm, or tnpm installed, use one of the following commands.
cnpm install
pnpm install
tnpm install

// After installation, run the dev command. When it runs successfully, access the provided URL in your browser.
npm run dev

Configure the build

// Run the build command to generate the final product in the ./dist directory.
npm run build

The built files include index.html, umi.js, and umi.css. The rest are resource files that are loaded on demand.

Configure the publicPath parameter in the .umirc.ts file in the same manner that you deploy the production environment and load resources. If you want to separately load the generated JavaScript and CSS resources on the final webpage that you want to access, you do not need to configure the publicPath parameter. If you use the index.html file, configure the publicPath parameter as needed. Example:

import fs from 'fs';
import path from 'path';

const packagejson = fs.readFileSync(path.resolve('./package.json'));
const json = JSON.parse(packagejson.toString());

export default {
  // Other configuration parameters are omitted.

  // The default public path for umi.js and umi.css used in the generated index.html is /.
  // If index.html is deployed at http://g.alicdn.com/publicPath/aui-web-liveroom/0.0.1/index.html
  // and you access the index.html in the test or production environment without configuring publicPath, the loaded umi.js will be at http://g.alicdn.com/umi.js.
  // This is not in the same directory as index.html. Configure it as needed.
  // This example uses the project's name and version in the deployment directory. Configure it as needed.
  publicPath:
  process.env.NODE_ENV === 'production'
  ? `/publicPath/${json.name}/${json.version}/`
  : '/',
}

Your implementation

This project focuses on the development of the live channel module. Before you use this project to provide services for users, you must configure other related modules as needed.

Logon

In this project, the system checks whether a user has logged on if the user accesses the live channel list or enters a live channel. If the user did not log on, the view is redirected to the logon page. This part of logic is located in the src/wrappers/auth/index.tsx file. You can modify the logic as needed.

Live channel list

The project code for the live channel list is stored in the src/pages/room-list directory. The current logic is simple and you can optimize the code as needed.

Dependent services and third-party packages

VConsole

VConsole SDK is introduced in the plugin.ts file for testing on mobile terminals. By default, VConsole SDK is disabled. The SDK is enabled only if the URL contains vconsole=1.

AliPlayer

ApsaraVideo Player SDK is introduced in the plugin.ts file to play live streams in a live channel. For more information, see Overview.

alivc-im-sdk

Interactive messaging SDK of the latest version (alivc-im-sdk) is introduced in the plugin.ts file to send and receive interactive messages in a live channel. The v2/token operation provided by the AppServer for live channels returns data such as the token that is required for authentication by interactive messaging SDK. All services will be switched to the latest version of interactive messaging SDK. We recommend that you update the previous version of the SDK to the latest version.

aliyun-interaction-sdk

Interactive messaging SDK of the previous version (aliyun-interaction-sdk) is introduced in the plugin.ts file to send and receive interactive messages in a live channel. The token operation provided by the AppServer for live channels returns the token that is required for authentication by interactive messaging SDK. For more information, see Integrate interactive messaging SDK for web.

axios

axios provides an open source npm package that is used to call the API of the AppServer for live channels. For more information, see axios.

Integrate with uni-app-based HTML5 application

In addition to the web project, AUI Kits also provides a uni-app-based project that can be compiled into HTML5 pages.

Prepare the environment

We recommend that you download and use the HBuilderX visual editor to develop the project. For more information, see Quick Start.

Download the source code

For more information, visit GitHub.

Configure the parameters

Open the open source project in HBuilderX and configure the required parameters in the config.js file. You can configure the endpoint of the AppServer.

export default {
  // AppServer domain name. Note: Do not include a trailing /.
  appServer: 'https://your-appserver-origin',
};

Run the project in the local environment

After you configure the development environment and configure the required parameter, choose Run > Browser in the toolbar and click a browser.

The HTML5 pages are in portrait mode. You can open the browser console and switch the display mode to portrait mode.

Publish

For more information, see Publish as web site.

Other

The service dependencies and implementation details for this project are the same as those for the web project. For more information, see the document mentioned above.