פיתוח אפליקציה לתקשורת וידאו ושמע בזמן אמת הפך לאחד התחומים המרתקים בעולם הפיתוח. במאמר זה נלמד כיצד לפתח אפליקציה פשוטה שמשתמשת ב-WebRTC ליצירת תקשורת וידאו ושמע בזמן אמת בין משתמשים.
מה זה WebRTC?
WebRTC (Web Real-Time Communication) הוא פרוטוקול קוד פתוח שמאפשר לדפדפנים ולמכשירים ניידים לתקשר אחד עם השני באמצעות תקשורת בזמן אמת (real-time) דרך וידאו, שמע וטקסט. היתרון העיקרי של WebRTC הוא שהוא אינו דורש תוספים או תוכנות צד שלישי, מה שמקל על פיתוח אפליקציות תקשורת בזמן אמת.
הכנות והגדרות בסיסיות
לפני שנתחיל בפיתוח, יש לוודא שהדפדפנים בהם תשתמשו תומכים ב-WebRTC. הדפדפנים המובילים כמו Chrome, Firefox, Safari ו-Edge תומכים ב-WebRTC. בנוסף, תזדקקו לסביבת פיתוח תומכת JavaScript, Node.js, ושרת לאירוח האפליקציה.
ניצור את מבנה הפרויקט הבסיסי:
mkdir webrtc-app
cd webrtc-app
npm init -y
npm install express socket.io
הקוד הזה יוצר תיקיית פרויקט, מאתחל אותו עם npm ומתקין את התלויות הבסיסיות – Express.js לניהול השרת ו-Socket.IO לתקשורת בזמן אמת.
הגדרת השרת
נגדיר את השרת שלנו בעזרת Express ו-Socket.IO:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
הקוד הזה מגדיר את השרת ומתחיל להאזין לחיבורי WebSocket באמצעות Socket.IO. כאשר משתמש מתחבר, ההודעה "a user connected" תודפס במסוף, וכאשר הוא מתנתק, תודפס ההודעה "user disconnected".
הגדרת ממשק משתמש
ניצור קובץ HTML בסיסי שישמש כממשק משתמש לאפליקציה שלנו:
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Video Chat</title>
<style>
video {
width: 300px;
height: 200px;
margin: 5px;
}
</style>
</head>
<body>
<h1>WebRTC Video Chat</h1>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>
בממשק המשתמש הזה, יש שני אלמנטים של video – אחד לשידור וידאו מקומי ואחד לוידאו מרוחק. הסקריפטים של Socket.IO ו-main.js יטענו בסוף הקובץ.
הגדרת WebRTC ב-JavaScript
עכשיו ניצור את הקובץ main.js שבו נגדיר את WebRTC ונחבר אותו לשרת Socket.IO:
const socket = io();
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
localVideo.srcObject = stream;
const peerConnection = new RTCPeerConnection();
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
peerConnection.ontrack = event => {
remoteVideo.srcObject = event.streams[0];
};
peerConnection.onicecandidate = event => {
if (event.candidate) {
socket.emit('ice-candidate', event.candidate);
}
};
socket.on('ice-candidate', candidate => {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
});
socket.on('offer', async offer => {
await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
socket.emit('answer', answer);
});
socket.on('answer', async answer => {
await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
});
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
socket.emit('offer', offer);
})
.catch(error => console.error('Error accessing media devices.', error));
בקוד הזה, אנחנו משתמשים ב-getUserMedia כדי לקבל גישה למצלמה ולמיקרופון של המשתמש, ומגדירים חיבור Peer-to-Peer עם RTCPeerConnection. הסקריפט מטפל במשלוח והקבלה של ICE candidates, הצעות (offers) ותשובות (answers) דרך Socket.IO, מה שמאפשר תקשורת בזמן אמת בין משתמשים.
סיכום והרחבות
במאמר זה, יצרנו אפליקציה פשוטה לתקשורת וידאו ושמע בזמן אמת בעזרת WebRTC ו-Socket.IO. זוהי רק ההתחלה – ניתן להרחיב את האפליקציה כדי לכלול תכונות נוספות כמו חדרים (rooms), ניהול משתמשים, הצפנה ועוד.
אם אתם מעוניינים ללמוד בצורה מעמיקה יותר על פיתוח אפליקציות Full-Stack עם WebRTC וכלים נוספים, אתם מוזמנים להתייעץ איתנו על קורס Node.Js.