Web

Procedure

The implementation methods in this topic are for reference only. You can develop your application as needed.

1. Initialize the SDK.
   

   Create an AliRtcEngine instance.

   var aliWebrtc = new AliRtcEngine();

   Preview the local video. After you create the AliRtcEngine instance, use the video tag to play the video.

   aliWebrtc.startPreview(
       video    // The video element in HTML
   ).then(()=>{
   }).catch((error) => {
       // The preview failed.
   });

   
   
2. Join a channel.
   

   aliWebrtc.joinChannel({
       userid,         // The user ID.
       channel,        // The channel.
       appid,          // The application ID.
       nonce,          // The nonce.
       timestamp,      // The UNIX timestamp.
       gslb,           // The GSLB service endpoint.
       token,          // The token.
   },displayName).then(()=>{
       // Joined the channel successfully.
   } ,(error)=>{
       // Failed to join the channel. Print the error content to view the failure reason.
       console.log(error.message);
   });

   Note Pass two parameters to join a channel. The first is AliRtcAuthInfo, and the second is the username to display in the channel.

   Parameter	Description
   appId	The application ID. You can create and view the application ID on the Application Management page in the console.
   channelId	The channel ID. It can be 1 to 64 characters in length and can contain letters, digits, underscores (_), and hyphens (-).
   userId	The user ID. It can be 1 to 64 characters in length and can contain letters, digits, underscores (_), and hyphens (-). Note If a user joins a channel with a user ID that is already used in the channel, the original user with that ID is removed from the channel.
   nonce	A random code. It must start with the `AK-` prefix and can contain letters and digits. The maximum length is 64 bytes. Example: `AK-2b9be4b25c2d38c409c376ffd2372be1`.
   timestamp	The timestamp that indicates when the token expires. You can set the validity period to 12 hours, 24 hours, 3 days, or 7 days.
   token	The token for channel authentication. It is calculated using the following formula: token = sha256(appId + appKey + channelId + userId + nonce + timestamp).
   gslb	The service endpoint. This parameter is an array. Use ["https://rgslb.rtc.aliyuncs.com"]. We recommend that you obtain the endpoint from your business server and pass it to the client SDK. Do not hardcode the endpoint in your client code.

   
   
3. Publish or unpublish the local stream.
   
   • Publish the local stream. To allow remote users to subscribe to the local stream, call the publish method. Remote users will receive the onPublisher callback.

     aliWebrtc.publish().then(()=>{
     } ,(error)=>{
         console.log(error.message);
     });

   • Unpublish the local stream. After you unpublish the local stream, remote users receive the onUnPublisher callback.

     aliWebrtc.unPublish().then(()=>{
     } ,(error)=>{
         console.log(error.message);
     });

   
   
4. Subscribe to the onPublisher or onUnPublisher callbacks.
   • Subscribe to the onPublisher callback. The SDK triggers the onPublisher callback when a remote user publishes a stream. You can subscribe to this callback to identify the users who have published streams in the channel.

     aliWebrtc.on('onPublisher',(publisher) =>{
         // The userId of the remote publisher
         console.log(publisher.userId);
         // The display name of the remote publisher
         console.log(publisher.displayName);
         // The content of the remote stream. streamConfigs is an array.
         console.log(publisher.streamConfigs);
       });

   • Subscribe to the onUnPublisher callback. This callback is triggered when a remote user stops publishing a stream.

     aliWebrtc.on('onUnPublisher',(publisher) =>{
         // The userId of the remote publisher
         console.log(publisher.userId);
         // The display name of the remote publisher
         console.log(publisher.displayName);
     });

   Note The onPublisher and onUnPublisher callbacks are triggered only after a user joins the channel.
5. Subscribe to or unsubscribe from a remote stream.
   
   • Subscribe to and display a remote stream. Call the subscribe method to subscribe to the remote stream. After the subscription is successful, call setDisplayRemoteVideo to display the remote stream.

     aliWebrtc.subscribe(userId).then((userId)=>{
     aliWebrtc.setDisplayRemoteVideo(
     userId, // User ID
     video, // The video element in HTML used to display the stream object
     1 // 1 indicates the camera stream (both high and low resolution), and 2 indicates the screen sharing stream
     )
     },(error)=>{
     console.log(error.message);
     });

     Note

     • Web SDK V1.10 and later do not support the onMediaStream event.
     • You do not need to set a view for audio streams. They autoplay after subscription.
   • Unsubscribe. Call the unSubscribe method to unsubscribe from the remote stream.

     aliWebrtc.unSubscribe(userId).then(() => {
     },(error)=>{
         console.log(error.message);
     });

   
   
6. Leave the channel.
   

   aliWebrtc.leaveChannel().then(()=>{
   } ,(error)=>{
       console.log(error.message);
   });