IOT/web-Iot
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xg

Browse Source
This commit is contained in:
mmc
2026-05-12 12:36:07 +08:00
parent 899a31984f
commit 8003b2e113
1 changed files with 97 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/components/AgoraRtc.tsx
View File

@@ -8,15 +8,12 @@ import AgoraRTC from "agora-rtc-sdk-ng";
import {
Button,
Input,
Card,
Badge,
message,
Space,
} from "antd";
import { io } from "socket.io-client";
const APP_ID =
"62a87b833b7e48888aca06b625f88c14";
@@ -30,10 +27,6 @@ const client = AgoraRTC.createClient({
codec: "vp8",
});
// websocket
const socket =
io("http://localhost:3001");
export default function AgoraRtcRoom() {
const [uid] = useState(() =>
@@ -50,11 +43,8 @@ export default function AgoraRtcRoom() {
const [published, setPublished] =
useState(false);
const [msg, setMsg] =
useState("");
const [msgList, setMsgList] =
useState<string[]>([]);
const [joined, setJoined] =
useState(false);
const localVideoRef =
useRef<HTMLDivElement>(null);
@@ -68,30 +58,13 @@ export default function AgoraRtcRoom() {
try {
// websocket 加入房间
socket.emit(
"join-room",
CHANNEL
);
// 收消息
socket.on(
"receive-message",
(data) => {
setMsgList(prev => [
...prev,
`${data.uid}: ${data.message}`
]);
}
);
// rtc 状态
// RTC 状态监听
client.on(
"connection-state-change",
(state) => {
console.log(
"RTC状态:",
state
);
@@ -103,11 +76,16 @@ export default function AgoraRtcRoom() {
setConnected(
true
);
} else {
setConnected(
false
);
}
}
);
// 远端用户发布
// 远端用户发布流
client.on(
"user-published",
async (
@@ -116,11 +94,12 @@ export default function AgoraRtcRoom() {
) => {
console.log(
"远端发布",
"远端用户发布:",
user.uid,
mediaType
);
// 订阅远端流
await client.subscribe(
user,
mediaType
@@ -148,7 +127,27 @@ export default function AgoraRtcRoom() {
}
);
// 加入 rtc
// 用户离开
client.on(
"user-left",
(user) => {
console.log(
"用户离开:",
user.uid
);
if (
remoteVideoRef.current
) {
remoteVideoRef.current.innerHTML =
"";
}
}
);
// 加入频道
await client.join(
APP_ID,
CHANNEL,
@@ -156,15 +155,26 @@ export default function AgoraRtcRoom() {
uid
);
setConnected(true);
console.log(
"加入频道成功"
);
setJoined(true);
message.success(
"RTC 已连接"
"RTC 已加入频道"
);
} catch (err) {
console.error(err);
console.error(
"初始化失败:",
err
);
message.error(
"初始化失败"
);
}
};
@@ -173,23 +183,30 @@ export default function AgoraRtcRoom() {
return () => {
client.leave();
socket.disconnect();
};
}, []);
}, [uid]);
// 推流
// 开始推流
const startPublish =
async () => {
if (!joined) {
message.warning(
"RTC 还未加入频道"
);
return;
}
try {
// 创建音频轨道
// 麦克风轨道
const audioTrack =
await AgoraRTC.createMicrophoneAudioTrack();
// 创建视频轨道
// 摄像头轨道
const videoTrack =
await AgoraRTC.createCameraVideoTrack();
@@ -198,21 +215,28 @@ export default function AgoraRtcRoom() {
localVideoRef.current!
);
// 发布
// 发布流
await client.publish([
audioTrack,
videoTrack,
]);
console.log(
"推流成功"
);
setPublished(true);
message.success(
"推流成功"
"开始推流"
);
} catch (err) {
console.error(err);
console.error(
"推流失败:",
err
);
message.error(
"推流失败"
@@ -220,30 +244,10 @@ export default function AgoraRtcRoom() {
}
};
// 发消息
const sendMessage =
() => {
if (!msg) return;
socket.emit(
"send-message",
{
roomId:
CHANNEL,
uid,
message:
msg,
}
);
setMsg("");
};
return (
<Card
title="Agora RTC 音视频 + 聊天"
title="Agora RTC 音视频测试"
style={{
width: 1000,
margin:
@@ -259,7 +263,7 @@ export default function AgoraRtcRoom() {
>
<div>
UID：{uid}
当前 UID：{uid}
</div>
<Badge
@@ -275,12 +279,26 @@ export default function AgoraRtcRoom() {
}
/>
<Badge
color={
published
? "green"
: "orange"
}
text={
published
? "已推流"
: "未推流"
}
/>
<Button
type="primary"
onClick={
startPublish
}
disabled={
!joined ||
published
}
>
@@ -291,6 +309,7 @@ export default function AgoraRtcRoom() {
style={{
display: "flex",
gap: 20,
marginTop: 20,
}}
>
@@ -305,10 +324,13 @@ export default function AgoraRtcRoom() {
localVideoRef
}
style={{
width: 320,
height: 240,
width: 400,
height: 300,
background:
"#000",
borderRadius: 8,
overflow:
"hidden",
}}
/>
@@ -325,10 +347,13 @@ export default function AgoraRtcRoom() {
remoteVideoRef
}
style={{
width: 320,
height: 240,
width: 400,
height: 300,
background:
"#000",
borderRadius: 8,
overflow:
"hidden",
}}
/>
@@ -336,70 +361,6 @@ export default function AgoraRtcRoom() {
</div>
<div>
<h3>
聊天
</h3>
<Space>
<Input
value={msg}
onChange={e =>
setMsg(
e.target.value
)
}
style={{
width: 300,
}}
/>
<Button
onClick={
sendMessage
}
>
发送
</Button>
</Space>
<div
style={{
marginTop: 20,
height: 200,
border:
"1px solid #ddd",
padding: 10,
overflowY:
"auto",
}}
>
{msgList.map(
(
item,
index
) => (
<div
key={
index
}
>
{
item
}
</div>
)
)}
</div>
</div>
</Space>
</Card>