web简易视频聊天室+媒体流插入

语音聊天室是最近非常热门的一款语音类软件，但是编写一个语音聊天室软件是不是很困难呢？没关系，今天为大家带来简易版的，非常简单呦！但是光聊天怎么行，想不想一起在聊天室看视频，一起吐槽、观看呢！不要急哟，马上带你们一起写。

一、项目准备

需求：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>