WebRTC (Web Real-Time Communication) یک مجموعه فناوری است که امکان ارتباطات صوتی، تصویری و داده‌ها را به‌صورت بلادرنگ (Real-Time) در مرورگرها و اپلیکیشن‌ها فراهم می‌سازد. این فناوری به توسعه‌دهندگان این امکان را می‌دهد که اپلیکیشن‌های تماس تصویری و صوتی را بدون نیاز به پلاگین‌های اضافی بسازند. در این مقاله، نحوه تماس تصویری با WebRTC برای ساخت اپلیکیشن‌های تماس تصویری به‌طور جامع مورد بررسی قرار می‌گیرد.

۱. آماده‌سازی محیط توسعه

قبل از شروع ساخت اپلیکیشن تماس تصویری با WebRTC، باید محیط توسعه خود را آماده کنید. یکی از نکات مهم این است که WebRTC به‌طور مستقیم در مرورگرها اجرا می‌شود، بنابراین شما به یک سرور برای مدیریت سیگنال و تبادل اطلاعات نیاز دارید.

۱.۱. نصب Node.js و Express

برای راه‌اندازی سرور سیگنالینگ، می‌توانید از Node.js و Express استفاده کنید. با نصب این ابزارها، می‌توانید سرور محلی خود را راه‌اندازی کنید.

سایت Node.js

سایت فریم ورک Express

npm init -y
npm install express socket.io

۱.۲. ایجاد فایل سرور

یک فایل جدید به‌نام server.js ایجاد کنید و کد زیر را در آن قرار دهید:

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.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  socket.on('join', (room) => {
    socket.join(room);
    socket.to(room).emit('new-user', socket.id);
  });

  socket.on('signal', (data) => {
    socket.to(data.room).emit('signal', {
      sender: socket.id,
      signal: data.signal,
    });
  });
});

server.listen(300, () => {
  console.log('Server is running on http://localhost:300');
});

۲. ایجاد رابط کاربری

۲.۱. ساخت فایل HTML

فایلی به‌نام index.html ایجاد کنید و کد زیر را برای رابط کاربری تماس تصویری در آن وارد کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.">
    <title>اپلیکیشن تماس تصویری</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <h1>اپلیکیشن تماس تصویری WebRTC</h1>
    <video id="localVideo" autoplay playsinline></video>
    <video id="remoteVideo" autoplay playsinline></video>
    <button id="startCall">شروع تماس</button>

    <script src="app.js"></script>
</body>
</html>

آموزش سالیدیتی + 5 پروژه عملی

۲.۲. ایجاد فایل JavaScript

فایل جدیدی به‌نام app.js ایجاد کنید و کد زیر را در آن قرار دهید:

const socket = io.connect(window.location.href);
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
let localStream;
let peerConnection;

const roomName = 'myRoom';  // نام اتاق تماس

// دسترسی به دوربین و میکروفن
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then((stream) => {
        localStream = stream;
        localVideo.srcObject = stream;
        socket.emit('join', roomName);
    })
    .catch((error) => console.error('Error accessing media devices.', error));

socket.on('new-user', (id) => {
    createPeerConnection(id);
});

function createPeerConnection(remoteId) {
    peerConnection = new RTCPeerConnection();

    // اضافه کردن استریم محلی به peer connection
    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });

    // دریافت استریم از remote peer
    peerConnection.ontrack = (event) => {
        remoteVideo.srcObject = event.streams[];
    };

    // ایجاد offer
    peerConnection.createOffer()
        .then((offer) => {
            return peerConnection.setLocalDescription(offer);
        })
        .then(() => {
            socket.emit('signal', { signal: peerConnection.localDescription, room: roomName });
        });

    socket.on('signal', (data) => {
        if (data.sender !== socket.id) {
            peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal)).then(() => {
                if (data.signal.type === 'offer') {
                    peerConnection.createAnswer().then((answer) => {
                        peerConnection.setLocalDescription(answer).then(() => {
                            socket.emit('signal', { signal: peerConnection.localDescription, room: roomName });
                        });
                    });
                }
            });
        }
    });
}

۳. اجرای اپلیکیشن

در انتها، سرور را با استفاده از دستور زیر راه‌اندازی کنید:

node server.js

سپس به آدرس http://localhost:300 در مرورگر خود بروید. با کلیک بر روی دکمه “شروع تماس”، وب‌کم شما فعال می‌شود و اگر یک کاربر دیگر به آن اتاق بپیوندد، می‌توانید تماس تصویری برقرار کنید.

نتیجه‌ گیری

WebRTC یک فناوری قدرتمند برای ایجاد اپلیکیشن‌ های تماس تصویری و صوتی است. با تنظیم یک سرور سیگنالینگ و استفاده از APIهای WebRTC، می‌توانید به‌راحتی اپلیکیشن‌های خود را توسعه دهید. این فناوری مزایای بسیاری دارد، از جمله عدم نیاز به نصب نرم‌افزار اضافی و قابلیت برقراری تماس‌های همزمان. با تمرین و تست بیشتر، می‌توانید اپلیکیشن‌های تماس تصویری خود را به‌روز کنید و ویژگی‌های جدیدی به آن‌ها اضافه کنید.