语音聊天室是最近非常热门的一款语音类软件,但是编写一个语音聊天室软件是不是很困难呢?没关系,今天为大家带来简易版的,非常简单呦!但是光聊天怎么行,想不想一起在聊天室看视频,一起吐槽、观看呢!不要急哟,马上带你们一起写。
使用 标签引入 SDK 时,产生名为
ArRTM
的全局变量,该变量含有该模块的所有成员。
<script src="https://ardw.anyrtc.io/sdk/web/ArRTC@latest.js"></script> //引入RTC
复制代码
npm install --save ar-rtc-sdk;
import ArRTC from "ar-rtc-sdk"; //导入RTC项目
复制代码
<!-- 用户视频容器 -->
<div id="remote-playerlist" class="row video-group"></div>
复制代码
//创建本地视图
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);
//当前输入媒体流的状态。
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");
复制代码
function handleUserPublished(user, mediaType) {
const id = user.uid;
remoteUsers[id] = user;//存放用户相关视频信息
subscribe(user, mediaType);//订阅用户发布的视频流
}
复制代码
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 = $(
`
${
uid}" class="col-6">
remoteUser(
${
uid})
${
uid}" class="player">
`
);
$("#remote-playerlist").append(player);
user.videoTrack.play(`player-${
uid}`);
}
if (mediaType === "audio") {
user.audioTrack.play();
}
}
复制代码
client.leave();
复制代码
<input id="url" type="text" placeholder="rtmp://58.200.131.2:1935/livetv/hunantv">
复制代码
// 地址
$("#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);
复制代码
await client.removeInjectStreamUrl();
复制代码
anyRTC
ArRTC WebSDK Demosdemos.anyrtc.io/Demo/
作者:anyRTC 张耀