Landscape mode

Prerequisites

AppServer

You have set up an AppServer and obtained its domain name. For setup instructions, see server-side integration.

Publisher

The web client currently supports only the viewer role and cannot publish streams. For full functionality, you must integrate the AUIKits suite on a mobile client to start a live stream. For integration instructions, see Android landscape mode and iOS landscape mode.

Development framework

This project uses the UmiJS framework with React and TypeScript. For more information about the framework, see the official UmiJS documentation.

Quick integration

Environment setup

Set up your local Node.js environment. For instructions, see the UmiJS Quick Start guide. If you already have Node.js installed, you can skip this step.

Source code download

For the download address, see the open source project.

Configuration

Configure the project parameters in the config object in the /src/config.ts file.

AppServer configuration

In config.appServer, configure the parameters required for the AppServer.

appServer: {
  // The domain name for the AppServer service. Do not add a trailing slash (/). Cross-origin resource sharing (CORS) must be enabled on the server.
  origin: 'https://xxx.xxx.xxx',
}

imServer configuration

In config.imServer, configure the parameters for the IM service. Ensure the settings are consistent on both the client and server.

imServer: {
  // The legacy interactive message service, which will be phased out. We do not recommend enabling it.
  // If enabled, you must import aliyun-interaction-sdk by using a script tag.
  aliyunIMV1: {
    enable: false, // Specifies whether to enable the service.
    primary: false, // Specifies whether this is the primary channel.
  },
  // The new interactive message service. We recommend that you enable it.
  // If enabled, you must import alivc-im-sdk by using a script tag.
  aliyunIMV2: {
    enable: true, // Specifies whether to enable the service.
    primary: true, // Specifies whether this is the primary channel.
  },
}

Run locally

After you configure the API domain name, open your terminal, navigate to the project folder, and run the following commands to run the project locally.

// Install npm packages (this may be slow).
npm install
// If you have tools like cnpm, pnpm, or tnpm installed, use one of the following commands:
cnpm install
pnpm install
tnpm install
// After the installation is complete, run the dev command. When it succeeds, open the provided URL in your browser.
npm run dev

Build configuration

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

The main build files are index.html, umi.js, and umi.css. Other files are resource files that are loaded on demand.

Configure the publicPath in .umirc.ts based on your deployment to the production environment and how resources are loaded. If your final page loads the generated JS and CSS resources separately, you do not need to configure publicPath. If you use index.html directly, refer to the following example and configure it based on your deployment.

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
 // The default value of the public path for umi.js and umi.css used in the generated index.html is /.
 // For example, if index.html is deployed to http://g.alicdn.com/publicPath/aui-web-liveroom/0.0.1/index.html.
 // If you access the index.html in a test or online environment without configuring publicPath, the browser will try to load umi.js from http://g.alicdn.com/umi.js.
 // This path is incorrect because it is not relative to the index.html directory. Therefore, you must configure the path based on your actual deployment.
 // This example uses the project's name and version in the deployment directory. Configure it according to your specific setup.
 publicPath:
 process.env.NODE_ENV === 'production'
 ? `/publicPath/${json.name}/${json.version}/`
 : '/',
}

export default {
 // The domain name for the AppServer. Note: Do not include a trailing slash (/). If you are not using the default port, you must include the port number.
 appServer: 'https://your-appserver-origin',
};