Добрый день! Мне нужно создать приложение для видео вызова на базе
WebRTC. Схема его работы следующая. На главной странице есть кнопка со ссылкой на страницу видео связи.
Id страницы — это строка из случайных символов. Далее клиент присоединяется к комнате, отправив запрос на сервер через
socket.io. Его
id также отображается на экране. Это приложение full-stack на базе
React,
Node.js,
Socket.io,
WebRTC,
TypeScript. Я все максимально упростил, чтобы сосредоточиться именно на технологии
WebRTC.
Чтобы осуществить вызов, нужно ввести
id другого клиента и нажать кнопку ниже. Мне нужно, чтобы при установлении соединения у каждого пользователя появлялось видео с устройства собеседника, и наоборот (как например при видео звонке WhatsApp). На каждом устройстве включается разрешение на использование микрофона и камеры.
В качестве сервера для обмена сигналами используется
socket.io на базе
node.js.
Проблема в том, что при осуществлении вызова, видео иногда отображается у обоих пользователей, иногда только на одном устройстве. Иногда на обоих концах нет видео. В общем, приложение работает нестабильно.
Вот код сервера для обмена сигналами:
import { io } from ".";
interface Signal {
operation: 'join' | 'offer' | 'answer' | 'ice';
source?: string;
target: string;
data: any;
}
io.on("connection", (socket) => {
socket.on("server", (arg: Signal) => {
console.log(arg)
if(arg.operation==='join') {
socket.join(arg.target);
}
if(arg.operation==='offer' || arg.operation==='answer' || arg.operation==='ice') {
console.log(arg.operation);
io.to(arg.target).emit(arg.target, arg)
}
});
});
Главная страница клиента. При клике на кнопку переходим в комнату (роут со случайным id):
import React from "react";
import { XButton2 } from "../components/Buttons";
import { useNavigate } from "react-router-dom";
const makeId = (length: number): string => {
let result = "";
const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
const charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
};
export default function Main() {
const navigate = useNavigate();
function create() {
const id = makeId(4);
navigate(`/room/${id}`);
}
return <XButton2 onClick={create}>Create room</XButton2>;
}
Страница комнаты:
import React, { Fragment } from "react";
import { IconButton } from "@mui/material";
import { AiOutlineLeft } from "react-icons/ai";
import { useNavigate, useParams } from "react-router-dom";
import RoomContainer from "../components/RoomContainer";
export default function Room() {
const navigate = useNavigate();
const { id } = useParams();
return (
<Fragment>
<IconButton
sx={{ mb: 3, fontSize: "35px", border: "1px solid #ddd" }}
onClick={() => navigate("/")}
>
<AiOutlineLeft />
</IconButton>
{id ? <RoomContainer id={id} /> : null}
</Fragment>
);
}
Это компонент, в котором должно выполняться видео соединение:
import React, {
ChangeEvent,
Fragment,
useEffect,
useRef,
useState,
} from "react";
import {
Box,
Card,
CardContent,
CardHeader,
Snackbar,
Stack,
TextField,
Typography,
} from "@mui/material";
import { io } from "socket.io-client";
import { XButton1 } from "./Buttons";
import { rtcConfig } from "../../rtcConfig";
interface Signal {
operation: "join" | "offer" | "answer" | "ice";
source?: string;
target: string;
data?: any;
}
const VITE_SOCK_API = import.meta.env.VITE_SOCK_API;
const socket = io(VITE_SOCK_API);
const peerConnection = new RTCPeerConnection(rtcConfig);
export default function RoomContainer({ id }: { id: string }) {
const remoteRef = useRef<HTMLVideoElement>(null);
const [message, setMessage] = useState<string>("");
const [value, setValue] = useState<string>("");
async function call() {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
const mySignal: Signal = {
operation: "offer",
source: id,
target: value,
data: offer,
};
socket.emit("server", mySignal);
}
useEffect(() => {
// VIDEO!!!
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {
// Join
const mySignal: Signal = { operation: "join", target: id };
socket.emit("server", mySignal);
stream.getTracks().forEach((track) => {
peerConnection.addTrack(track, stream);
});
// Incoming sockets
socket.on(id, async (arg: Signal) => {
// Incoming offer
if (arg.operation === "offer" && arg.source) {
peerConnection.setRemoteDescription(
new RTCSessionDescription(arg.data)
);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
const mySignal: Signal = {
operation: "answer",
source: id,
target: arg.source,
data: answer,
};
socket.emit("server", mySignal);
}
// Recieve an answer
if (arg.operation === "answer") {
const remoteDesc = new RTCSessionDescription(arg.data);
await peerConnection.setRemoteDescription(remoteDesc);
}
// Ice candidate
if (arg.operation === "ice") {
try {
const candidate = new RTCIceCandidate(arg.data); // ??????
await peerConnection.addIceCandidate(candidate);
} catch (e) {
console.error("Error adding received ice candidate", e);
}
}
});
});
}, []);
peerConnection.addEventListener("track", async (event) => {
const [remoteStream] = event.streams;
if (remoteRef.current) remoteRef.current.srcObject = remoteStream;
});
// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener("icecandidate", (event) => {
console.log(event.candidate);
if (event.candidate) {
const mySignal: Signal = {
operation: "ice",
source: id,
target: value,
data: event.candidate,
};
socket.emit("server", mySignal);
}
});
// Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener("connectionstatechange", (event) => {
if (peerConnection.connectionState === "connected") {
setMessage("Peers connected!");
}
});
return (
<Fragment>
<Card>
<CardHeader
title="Connect and open media channel"
sx={{ borderBottom: "1px solid #ddd" }}
/>
<CardContent>
<Stack spacing={2}>
<Typography
variant="h5"
sx={{
cursor: "pointer",
border: "1px solid #ddd",
borderRadius: "5px",
p: 2,
}}
onClick={() => {
if (id) {
navigator.clipboard.writeText(id);
setMessage("Copied");
}
}}
>
{id}
</Typography>
<TextField
label="Connect other client"
variant="outlined"
value={value}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setValue(e.target.value)
}
/>
<XButton1
onClick={async () => {
// offer
if (id && value) call();
}}
>
Connect
</XButton1>
<Box sx={{ width: "100%", pb: "65%", position: "relative", border: '1px solid #ddd' }}>
<video
ref={remoteRef}
autoPlay
playsInline
style={{
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
}}
/>
</Box>
</Stack>
</CardContent>
</Card>
<Snackbar
open={Boolean(message.length)}
autoHideDuration={3000}
onClose={() => setMessage("")}
message={message}
/>
</Fragment>
);
}
Также я заметил, что во время установления соединения, событие по раздаче кандидатов срабатывает очень много раз (я включил прослушивание через
console.log).
Полный код также доступен в этом репозитории:
https://github.com/narzantaria/webrtc-app
Подскажите пожалуйста, что нужно исправить или добавить для полноценной работы видео связи?
Спасибо всем за внимание.
