Voice chat room is a very popular voice software recently, but writing a voice chat room software is not very difficult? It doesn’t matter, today we bring a simple version, very simple yo! But light chat how line, want to watch video together in the chat room, laugh together, watch it! Don’t worry, I’ll take you with me.

I. Project preparation

Requirement: Web-based multiplayer video chat

Techniques used:AnyRTC real-time audio and video API

The RTC-SDK function that needs to be used

• Create an RTC audio and video engine: createClient
• To create local audio video: createMicrophoneAndCameraTracks
• Join channel: join
• Leave the channel: leave
• Enable local video sending: publish
• Disable local video sending: unpublish
• Subscribe to pull stream: subscribe
• Unsubscribe: unsubscribe
• Add a media stream: addInjectStreamUrl
• Remove a media stream: removeInjectStreamUrl

Ii. Project development and relevant JS codes

Download or import anyRTC

• The script to import

When the SDK is introduced with the

<script src="https://ardw.anyrtc.io/sdk/web/[email protected]"></script> // introducing the RTCCopy the code

• NPM import

npm install --save ar-rtc-sdk;
import ArRTC from "ar-rtc-sdk"; // Import the RTC project

Copy the code

Join a room

HTML video container

<! -- User video container --><div id="remote-playerlist" class="row video-group"></div>

Copy the code

Related JS (Add room and render your own view)

// Create a local view
const localplayer = $(
` 
      
 
       
 
       
 
        
 
        
 
       
 
      
 `
);
$("#remote-playerlist").append(localplayer);
// create ArRTC client
client = await ArRTC.createClient({
	mode: "rtc".codec: "h264"
});
// add event listener to play remote tracks when remote user publishs.
client.on("user-published", handleUserPublished);
client.on("user-unpublished", handleUserUnpublished);
// State of the current input media stream.
client.on("stream-inject-status", handleInjectStatus);

// join a channel and create local tracks, we can use Promise.all to run them concurrently
[options.uid, localTracks.audioTrack, localTracks.videoTrack] = await Promise.all([
	// join the channel
	client.join(options.appid, options.channel, options.token || null, options.uid || null),
	// create local tracks, using microphone and camera
	ArRTC.createMicrophoneAudioTrack(),
	ArRTC.createCameraVideoTrack()
]);
    
localTracks.videoTrack.play("local-player");

Copy the code

Related event callback (Event callback with anyRTC SDK)

User joins a room (user-published)

function handleUserPublished(user, mediaType) {
	const id = user.uid;
	remoteUsers[id] = user;// Store user related video information
	subscribe(user, mediaType);// Video streams published by subscribers
}

Copy the code

User leaves the room (user-unpublished)

function handleUserUnpublished(user) {
	const id = user.uid;
	delete remoteUsers[id];// Delete user-related video information
	$(`#player-wrapper-${id}`).remove();
}

Copy the code

Subscribe to publish video render to page method encapsulation

async function subscribe(user, mediaType) {
	const uid = user.uid;
	// subscribe to a remote user
	await client.subscribe(user, mediaType);
	if (mediaType === "video") {
		const player = $(
`
      <div id="player-wrapper-${uid}" class="col-6">
        <p class="player-name">remoteUser(${uid})</p>
        <div class="player-with-stats">
          <div id="player-${uid}" class="player"></div>
          <div class="track-stats stats"></div>
        </div>
      </div>
 `
		);
		$("#remote-playerlist").append(player);
		user.videoTrack.play(`player-${uid}`);
	}
	if (mediaType === "audio") { user.audioTrack.play(); }}Copy the code

Leave the room

client.leave();

Copy the code

Insert media stream

Media stream address (HTML input)

<input id="url" type="text" placeholder="RTMP: / / 58.200.131.2:1935 / livetv hunantv">

Copy the code

Add media stream (addInjectStreamUrl)

/ / address
$("#url").val() ? options.url = $("#url").val() : options.url = $("#url") [0].placeholder;
const injectStreamConfig = {
	width: 0.height: 0.videoGop: 30.videoFramerate: 100.videoBitrate: 3500.audioSampleRate: 44100.audioChannels: 1};await client.addInjectStreamUrl(options.url, injectStreamConfig);

Copy the code

Stop the Stream (removeInjectStreamUrl)

await client.removeInjectStreamUrl();

Copy the code

Three, reference

referenceanyRTC ArRTC WebSDK Demos

demos.anyrtc.io/Demo/

Author: anyRTC Zhang Yao