Run the web demo

Procedure

1. Download and decompress the software development kit (SDK) and sample code. For more information, see SDK download.
2. Copy the SDK file to the same folder as the index.html file in the sample code.
3. Open and configure the index.html file in the demo.
   1. Add a reference to the SDK.
      

      <script src="./aliyun-webrtc-sdk-1.12.1.js"></script>

      Note The SDK file name is for reference only. You must use the actual file name.
   2. Configure the AppId and AppKey to obtain a token.

      Configure the AppId and AppKey in the GenerateAliRtcAuthInfo method to obtain a test token.

      var appId = "yourAppId"; // Replace this with your AppId.
      var key = "yourAppKey";  // Replace this with your AppKey.

      Note You can also obtain a token from the console. Tokens obtained from the console are for development and testing purposes only. For commercial use, you must obtain a formal token by implementing the GenerateAliRtcAuthInfo method in your code. For more information, see Use a token for authentication.
4. Run the demo.

   Enter a channel number and click Join Channel.

   After you join the channel, the local preview is enabled and the video stream, which includes the main camera and audio streams, is pushed by default. You can enable or disable the local preview, and start or stop stream ingest.

   The channel displays your username, channel number, and stream ingest status. If other members are in the channel, their usernames are displayed on the left.

   • To change the stream ingest status, you can hot-swap the stream ingest options. Alternatively, you can click Stop Stream Ingest, and then select Push Video Stream or Push Shared Stream.
   • To start a real-time communication session with other members in the channel, hover the mouse over a member's username on the left. When Shared Stream Subscribe or Video Stream Subscribe appears, click the desired option.
     Note

     • In the demo, you can only subscribe to video streams and shared streams. You must implement audio stream subscription separately. For more information about the API, see AliRtcEngine API.
     • The user interface of the subscribed user is displayed on the right side of the channel. After you and another user subscribe to each other's streams, you can start a real-time communication session.