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/[e-mail]"></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 张耀