Integrate RTS-based Push SDK for web

Procedure

1. Load the SDK into the page by using one of the following methods:

   • Method 1: Load the script of Push SDK into the head element in the HTML file.

     <script src="https://g.alicdn.com/AliyunVideoClient/H5RTSPusher/1.1.1/aliyun-rts-pusher.js"></script>

   • Method 2: Import the npm package.

     npm install aliyun-rts-pusher --save

     import { AliRTSPusher } from 'aliyun-rts-pusher';

2. Initialize the SDK.

   Create a stream ingest client and configure a listener to listen to error events.

   // Create a stream ingest client.
   const pushClient = AliRTSPusher.createClient();
   // Listen to error events.
   pushClient.on('error', (err) => { console.log(err.errorCode) });

   For more information, see createClient and IEventListener. For more information about error codes, see Error codes.

3. Specify a local container for preview.

   Insert a div element into the HTML file as a local container to preview the video stream that is ingested.

   <div id="videoContainer"></div>

   Pass the container ID to the SDK. The SDK creates a video tag in the container and plays the preview image.

   const videoEl = pushClient.setRenderView('videoContainer');

   For more information, see setRenderView.

4. Specify the video quality.

   Specify the video quality before collection. For more information about optional preset parameters, see VideoProfileMap. You can traverse the content of the key-value pair. The key is the parameter required for the setVideoQuality operation, and the value is the detailed configurations. Default value: 720p_2.

   pushClient.setVideoQuality('720p_1');

   For more information, see setVideoQuality.

5. Start collecting audio and video files.

   Turn on the camera or microphone, or enable screen sharing. After the collection is complete, the local preview screen appears on the page.

   // Turn on the camera.
   await pushClient.startCamera();
   // Turn on the microphone.
   await pushClient.startMicrophone();

   For more information, see startCamera, startMicrophone, and startScreenCapture.

6. Start stream ingest.

   Pass the RTS-based ingest URL and start stream ingest.

   Note

   RTS-based Push SDK for web supports the following encoding formats:

   • Video encoding format: H.264

   • Audio encoding format: Opus

   pushClient.startPush('artc://domain/appName/streamName');

   For more information, see startPush.

7. Stop stream ingest.

   pushClient.stopPush();

   For more information, see stopPush.

8. Stop collecting audio and video files.

   // Turn off the camera.
   pushClient.stopCamera();
   // Turn off the microphone.
   pushClient.stopMicrophone();

   For more information, see stopCamera, stopMicrophone, and stopScreenCapture.