語音聊天室是最近非常熱門的一款語音類軟體，但是撰寫一個語音聊天室軟體是不是很困難呢？沒關系，今天為大家帶來簡易版的，非常簡單呦！但是光聊天怎么行，想不想一起在聊天室看視頻，一起吐槽、觀看呢！不要急喲，馬上帶你們一起寫，

一、專案準備

需求：web端的多人視頻聊天

用到的技術：anyRTC的RTC實時音視頻api

需要使用的RTC - SDK功能

• 創建RTC音視頻引擎：createClient
• 創建本地音頻視頻：createMicrophoneAndCameraTracks
• 加入頻道：join
• 離開頻道：leave
• 開啟本地視頻發送：publish
• 關閉本地視頻發送：unpublish
• 訂閱拉流：subscribe
• 取消訂閱：unsubscribe
• 添加媒體流：addInjectStreamUrl
• 洗掉媒體流：removeInjectStreamUrl

二、專案開發以及相關js代碼

下載或引入 anyRTC

• script匯入

使用 <script> 標簽引入 SDK 時，產生名為ArRTM 的全域變數，該變數含有該模塊的所有成員，

<script src="https://ardw.anyrtc.io/sdk/web/ArRTC@latest.js"></script> //引入RTC
復制代碼

• npm 匯入

npm install --save ar-rtc-sdk;
import ArRTC from "ar-rtc-sdk"; //匯入RTC專案
復制代碼

加入同一個房間（join)

html 視頻容器

<!-- 用戶視頻容器 -->
<div id="remote-playerlist" class="row video-group"></div>
復制代碼

相關JS（加入房間并渲染自己視圖）

//創建本地視圖
const localplayer = $(
`
   <div class="col-6" id="local_video">
	 <p id="local-player-name" class="player-name"></p>
	 <div class="player-with-stats">
	    <div id="local-player" class="player"></div>
	    <div id="local-stats" class="stream-stats stats"></div>
	 </div>
   </div>
`
);
$("#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);
//當前輸入媒體流的狀態，
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");
復制代碼

相關事件回呼（anyrtc sdk配套的事件回呼）

用戶加入房間（user-published）

function handleUserPublished(user, mediaType) {
	const id = user.uid;
	remoteUsers[id] = user;//存放用戶相關視頻資訊
	subscribe(user, mediaType);//訂閱用戶發布的視頻流
}
復制代碼

用戶離開房間（user-unpublished）

function handleUserUnpublished(user) {
	const id = user.uid;
	delete remoteUsers[id];//洗掉用戶相關視頻資訊
	$(`#player-wrapper-${id}`).remove();
}
復制代碼

訂閱發布視頻渲染到頁面的方法封裝

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();
	}
}
復制代碼

離開房間（leave)

client.leave();
復制代碼

插入媒體流

媒體流地址（html 輸入）

<input id="url" type="text" placeholder="rtmp://58.200.131.2:1935/livetv/hunantv">
復制代碼

添加媒體流（addInjectStreamUrl）

// 地址
$("#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);
復制代碼

停止媒體流（removeInjectStreamUrl）

await client.removeInjectStreamUrl();
復制代碼

三、參考

參考 anyRTC ArRTC WebSDK Demos

demos.anyrtc.io/Demo/

作者：anyRTC 張耀