Live stream on a web page - ApsaraVideo Live - Alibaba Cloud Documentation Center

ApsaraVideo Live allows you to integrate ApsaraVideo Player SDKs for multiple platforms and provides stream ingest methods that adapt to different devices. You can use ApsaraVideo Player SDK with any stream ingest method to meet your requirements in different business scenarios. This topic describes how to live stream on a web page.

Prerequisites

ApsaraVideo Live is activated. For more information, see Get started with ApsaraVideo Live.
The ingest domain and streaming domain that are used for live streaming are configured. For more information, see Step 1: Add ingest and streaming domains, Step 2: Add CNAME records to enable acceleration and Step 3: Associate the streaming domain with the ingest domain.

Step 1: Generate an ingest URL and a streaming URL

The ingest URL is used to ingest live streams, and the streaming URL is used to pull live streams for playback. For information about how to generate ingest and streaming URLs, see Live URL generator.

地址生成器

Step 2: Ingest live streams

Live stream ingest is the process of delivering the collected audio and video streams to a live center of ApsaraVideo Live. The following procedure provides an example on how to ingest a stream by using OBS Studio.

Note

Standard streaming does not provide a stream ingest SDK for web. You can use OBS Studio or Push SDK to ingest a stream. For information about how to use different stream ingest tools to ingest a stream, see Live stream ingest.

Download and install OBS Studio. Download link: OBS Studio.
Run OBS Studio.
In the menu bar, choose File > Settings.

On the Settings page, click Stream and configure the following parameters.

001

Parameter	Description
Service	Select Custom....
Server	Enter the generated ingest URL that is signed. Example: `rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************`.
Stream Key	Leave this parameter empty.

Go to the homepage of OBS Studio. Find the Sources section, add a source, and then click Start Streaming.
(Optional) Install the Queen SDK plug-in for OBS to debug retouching effects. For more information, see User guide to the Queen SDK plug-in for OBS.
In the ApsaraVideo Live console, go to the Stream Management page. On the Active Streams tab, you can view and manage the ingested audio or video stream.

Step 3: Play live streams

You can use ApsaraVideo Player SDK for Web to play live streams. For more information, see ApsaraVideo Player SDK for Web.

The following procedure describes how to integrate ApsaraVideo Player SDK for Web to play live streams on a web page.

Add a specified .js file to your project.

ApsaraVideo Player SDK for Web does not depend on frontend .js libraries. You can add a specified .js file to your project to initialize the player.

<head>
  <link rel="stylesheet" href="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/skins/default/aliplayer-min.css" />  // Optional. If you want to use the HTML5 player for playback, add the .css file to your project. 
  <script charset="utf-8" type="text/javascript" src="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/aliplayer-min.js"></script>  // Required. Import the .js file. 
</head>

Specify a container for the player.

<body>
  <div id="J_prismPlayer"></div>
</body>

Instantiate the player.

To stream content from URLs, you must set the source parameter to the streaming URL and the isLive parameter to true. For information about how to obtain an Alibaba Cloud streaming URL, see Step 1: Generate an ingest URL and a streaming URL.

Sample code for streaming from URLs:

<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>'// The streaming URL that is generated in ApsaraVideo Live. 
    isLive: true,// Specify whether to play the live stream. 
    },function(player){
      console.log('The player is created.')
    });
</script>

Online trial and source code of demos

Try the demo for PCs

ApsaraVideo Player SDK for Web provides a visualized online trial. You can apply for an online trial on the Online Settings page. You can configure basic playback features and set the UI layout online.

Note

If you use the HTML5 player to play a live stream, the streaming URL can be in the ApsaraVideo Real-time Communication (ARTC), Flash Video (FLV), or HTTP Live Streaming (HLS) format. A streaming URL in the Real-Time Messaging Protocol (RTMP) format is not supported.

Try the demo for mobile devices

To obtain the demo for mobile browsers, use the DingTalk app on your mobile device to scan the following QR code.

Important

On Android devices, the internal browsers in WeChat and QQ may modify the settings of ApsaraVideo Player SDK without your authorization or knowledge. In this case, specific features of ApsaraVideo Player SDK cannot be used.

二维码

Feature-related source code of demos

You can use the features of ApsaraVideo Player SDK for Web and view the corresponding source code on the Functions page of the Aliplayer website. For more information about the basic features, components, and advanced features, visit the Functions page. 功能展示

Source code of the demo for integration with Vue

ApsaraVideo Player SDK for Web provides demo source code for you to integrate the SDK with the Vue framework.

For more information about the demo, see Demo of Vue-based ApsaraVideo Player.

WeChat mini programs

A WeChat mini program lacks DOM API and BOM API. In this case, specific libraries that are commonly used in frontend development, such as jQuery and Zepto, cannot be loaded in a WeChat mini program. Similarly, ApsaraVideo Player SDK for Web, which relies on the support of browsers, cannot be run in a WeChat mini program. Therefore, you must use the default video component that is provided by a WeChat mini program to play videos. For more information, visit vod-mini-program.

References

When you use ApsaraVideo Player SDK for Web, the settings of commonly used features may vary with different players, playback methods, or browser environments. You can configure these features based on your business requirements. For more information, see Basic features.
ApsaraVideo Player SDK for Web also provides some advanced features, including features for playback control and the playback of long videos. For more information, see Advanced features.
For information about the API operations of ApsaraVideo Player SDK for Web, see API operations.
For answers to some commonly asked questions about ApsaraVideo Player SDK for Web, see FAQ about ApsaraVideo Player for web.