Due to epidemic raged at home and abroad in recent years, online teaching, primary and secondary schools across the country have introduced a lot of companies have also introduced some audio and video communication products, due to the intercom from research and development cost is higher, so most companies choose to use the RTC provided by anyRTC SDK for development, in order to product can quickly online, and stable operation.

AnyRTC provides RTC SDK for Web, wechat, ios, Android, Windows and other platforms, including FLUTTER. This paper will take web as an example to achieve a basic audio and video communication demo from scratch.

Development prerequisites

  • A valid developer account.

  • A mainstream browser that supports THE RTC SDK:

  • A terminal with audio and video input and output devices (microphone, camera)

Download the SDK

  • You can find the Web side of “RTC SDK Download” in the download center of the official website

  • Go to Ali Cloud OSS, CTRL + S or Command + S to download

  • Go to Github Clone or Download ZIP to Download

  • Download it through the NPM marketplace

Import the SDK

  • Script tag introduction

    Using the SDK introduced with the 

    <script src="/<YOUR_PATH>/to/[email protected]"></script>
Copy the code

  • Imported in ES6 mode

    import ArRTC from '/<YOUR_PATH>/to/[email protected]';
Copy the code

  • CommonJS mode is introduced

    var ArRTC = require('/<YOUR_PATH>/to/[email protected]');
Copy the code

  • NPM import

    import ArRTC from 'ar-rtc-sdk';
Copy the code

Operation process

Initialize the client

Create an instance of the local client rtcClient with arrtC.createclient.

const rtcClient = ArRTC.createClient({ mode: "live".codec: "h264" });
Copy the code

Join channel

Call the rtcclient. join method to join the channel. The join method takes the following four parameters:

  • Appid: indicates the App ID obtained on the anyRTC console.

  • Channel: indicates the name of the call channel.

  • Token: Used for token authentication and provides the security level of application information.

  • Uid: identifies a user and seamlessly connects to the service system. The value must be a string of up to 64 bytes, but the string “null” is not supported.

rtcClient.join(appid, channel, token, uid).then((uid) = > { 
// Start listening for all kinds of events
});
Copy the code

Listen for the remote user to join the channel

The user-joined callback is triggered when a remote user joins a channel.

rtcClient.on("user-joined".(user) = > {
// Process logic
});
Copy the code

Listens to audio and video streams released by remote users

The user-Published callback is triggered when a remote user publishes a video stream. You can subscribe to a remote user’s audio and video stream in this callback.

rtcClient.on("user-published".(user, mediaType) = > {
    await rtcClient.subscribe(user, mediaType); // Subscribe to the remote user's audio and video track
    if (mediaType === 'video') {
        user.videoTrack.play("<ELEMENT_ID>"); // Play the remote video to the specified window
    } else if (mediaType === 'audio') {
        user.audioTrack.play(); // Play the remote audio}});Copy the code

Create local audio tracks

This method enumerates available audio input devices, such as microphones.

Note: If you invoke this method, a device authorization window is displayed on the browser. This operation can be performed only in localhost, 127.0.0.1, or secure HTTPS environments due to restrictions in the browser security policy.

const audioTrack = await ArRTC.createMicrophoneAudioTrack();
Copy the code

Create a local video track

This method enumerates the available video input devices, such as cameras.

Note: If you invoke this method, a device authorization window is displayed on the browser. Therefore, you can perform this operation only in localhost, 127.0.0.1, or secure HTTPS environments.

const videoTrack = await ArRTC.createCameraVideoTrack();
Copy the code

Send local audio and video tracks

The local audio and video track is published to the channel, and after the audio and video track is published, the remote end receives the User-Published callback.

rtcClient.publish([videoTrack, audioTrack]);
Copy the code

Exit channel

Call this method to leave the channel.

Note: Leaving the channel requires releasing the locally created track itself. Otherwise, the camera and microphone are working. For example, the camera indicator is steady on.

rtcClient.leave();
// Release the audio and video capture device
videoTrack && videoTrack.close();
audioTrack && audioTrack.close();
Copy the code

Results show