写点什么

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

发布于: 2021 年 04 月 16 日

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

一、项目准备

需求:web 端的多人视频聊天

用到的技术:anyRTC的RTC实时音视频api

需要使用的 RTC - SDK 功能

二、项目开发以及相关 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 clientclient = 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 张耀

用户头像

实时交互,万物互联! 2020.08.10 加入

实时交互,万物互联,全球实时互动云服务商领跑者!

评论

发布
暂无评论
web简易视频聊天室+媒体流插入