Xây dựng web call video cơ bản với WebRTC [P1]

Trong thời đại công nghệ hiện nay, tính năng video call đã trở thành một phần không thể thiếu trong các ứng dụng nhắn tin hiện đại. Trong bài viết đầu tiên của series xây dựng tính năng call video như Message, chúng ta sẽ đi qua quá trình thiết lập dự án và tích hợp WebRTC cơ bản. Bạn sẽ học cách xây dựng giao diện đơn giản và tạo kết nối video call giữa hai người dùng.

1. Giới thiệu về WebRTC

WebRTC (Web Real-Time Communication) là công nghệ mã nguồn mở cho phép các trình duyệt và ứng dụng di động giao tiếp âm thanh, video và dữ liệu thời gian thực mà không cần cài đặt thêm plugin. Đây là nền tảng giúp chúng ta xây dựng các tính năng video call, chat âm thanh hoặc chia sẻ dữ liệu trực tiếp giữa các người dùng.

2. Thiết lập dự án với Next.js

Trước khi bắt đầu tích hợp WebRTC, chúng ta cần thiết lập môi trường làm việc. Trong bài viết này, chúng ta sử dụng Next.js – một framework mạnh mẽ dựa trên React giúp tạo các ứng dụng web hiện đại.

2.1. Khởi tạo dự án

Đầu tiên, hãy chắc chắn rằng bạn đã cài đặt Node.js trên máy. Sau đó, khởi tạo một dự án Next.js mới bằng cách mở terminal và chạy lệnh sau:

npx create-next-app@latest video-call-app
cd video-call-app
npm install

Lệnh này sẽ tạo một dự án Next.js mới với cấu trúc sẵn sàng để chúng ta phát triển.

2.2. Cài đặt các thư viện cần thiết

Tiếp theo, chúng ta sẽ cài đặt các thư viện cần thiết cho video call bằng WebRTC. WebRTC là phần chính, nhưng chúng ta cũng cần cài thêm các công cụ hỗ trợ khác để quản lý kết nối và giao diện.

npm install simple-peer
npm install socket.io-client

simple-peer: Thư viện giúp đơn giản hóa việc sử dụng WebRTC.
socket.io-client: Dùng để tạo kết nối với signaling server cho việc trao đổi thông tin giữa các peer.

3. Xây dựng giao diện video call cơ bản

Trong phần này, chúng ta sẽ tạo giao diện người dùng để hiển thị luồng video từ camera của người dùng và đối phương.

3.1. Tạo component VideoCall.js

Tạo một file VideoCall.js trong thư mục components và thêm mã sau:

import React, { useRef, useEffect, useState } from 'react';
import Peer from 'simple-peer';
import io from 'socket.io-client';

const socket = io('http://localhost:5000'); // Kết nối với signaling server

export default function VideoCall() {
  const [stream, setStream] = useState(null);
  const [peer, setPeer] = useState(null);
  const userVideo = useRef();
  const partnerVideo = useRef();

  useEffect(() => {
    // Lấy luồng video/âm thanh từ camera
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
      setStream(stream);
      if (userVideo.current) {
        userVideo.current.srcObject = stream;
      }
    });

    socket.on('call-made', (signal) => {
      const newPeer = new Peer({ initiator: false, trickle: false, stream });
      newPeer.signal(signal);
      newPeer.on('stream', (stream) => {
        partnerVideo.current.srcObject = stream;
      });
      setPeer(newPeer);
    });
  }, []);

  const initiateCall = () => {
    const newPeer = new Peer({ initiator: true, trickle: false, stream });
    newPeer.on('signal', (signal) => {
      socket.emit('call-user', signal);
    });
    newPeer.on('stream', (stream) => {
      partnerVideo.current.srcObject = stream;
    });
    setPeer(newPeer);
  };

  return (
    <div>
      <div>
        <h2>Your Video</h2>
        <video playsInline muted ref={userVideo} autoPlay style={{ width: '300px' }} />
      </div>
      <div>
        <h2>Partner's Video</h2>
        <video playsInline ref={partnerVideo} autoPlay style={{ width: '300px' }} />
      </div>
      <button onClick={initiateCall}>Gọi video</button>
    </div>
  );
}

3.2. Giải thích mã nguồn

useRef: Được sử dụng để tạo tham chiếu đến các thẻ video HTML, nơi luồng video sẽ được hiển thị.
useEffect: Lấy luồng video/âm thanh từ camera của người dùng và xử lý sự kiện nhận tín hiệu từ signaling server.
simple-peer: Được sử dụng để thiết lập kết nối WebRTC giữa các người dùng. Khi người dùng nhấn nút “Gọi video”, ứng dụng sẽ gửi tín hiệu và kết nối với đối phương.

4. Kết nối với Signaling Server

Signaling server là phần không thể thiếu để trao đổi thông tin giữa hai người dùng trong WebRTC. Chúng ta sẽ xây dựng signaling server trong bài viết tiếp theo, nhưng ở đây, ta sẽ cấu hình kết nối cơ bản với signaling server.

Trong đoạn mã trên, chúng ta đã sử dụng socket.io-client để kết nối với một signaling server đang chạy ở http://localhost:5000. Bạn cần tạo signaling server riêng để ứng dụng hoạt động hoàn chỉnh.

5. Kết luận

Trong bài viết này, chúng ta đã hoàn thành bước đầu tiên trong quá trình xây dựng tính năng video call bằng WebRTC. Bạn đã học cách thiết lập dự án Next.js và React, đồng thời xây dựng giao diện cơ bản cho video call. Trong phần tiếp theo, chúng ta sẽ triển khai signaling server để xử lý việc kết nối giữa hai người dùng.

Đừng quên theo dõi bài viết phần 2 để tiếp tục xây dựng tính năng call video hoàn chỉnh!