WebCodec - 보내기 및 받기

소개

안녕하세요! ?

이 튜토리얼에서는 WebCodec API를 사용하여 비디오를 보내고 받는 방법을 보여 드리겠습니다.

먼저 서버 코딩을 시작해 보겠습니다.

---

서버 설정

피어 간에 패킷을 보내고 받으려면 웹소켓 서버가 필요합니다.

이를 위해 nodejs를 사용하여 매우 기본적인 서버를 생성하겠습니다. 먼저 프로젝트를 초기화하세요:

npm init -y

그런 다음 필요한 모듈을 설치합니다.

npm i ws express

다음으로 "index.js"라는 새 파일을 만들고 다음 코드로 채웁니다.

// server.js
const WebSocket = require('ws');
const express = require('express');

const app = express();
const port = 3000;
const connectedClients = new Set();

app.use(express.static(__dirname + '/public'));

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', ws => {
  console.log('new connection');
  connectedClients.add(ws);

  ws.on('message', message => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.once('close', () => {
    connectedClients.delete(ws);
    console.log('connection closed');
  });
});

const server = app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

위 코드는 공개 디렉토리를 제공하고 연결된 모든 피어에게 패킷을 보내는 웹소켓 연결을 처리하는 데 너무 복잡한 것은 없습니다. ?

다음으로 발신자 부분을 처리하겠습니다. 먼저 "public"이라는 새 디렉터리를 만듭니다

mkdir public

---

발신자 생성

우리가 만들 첫 번째 프런트엔드 파일은 방송 중인 파일입니다. 공개 항목에 "sender.html"이라는 새 파일을 만들고 다음 HTML로 채웁니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sender</title>
    <style>
      video, canvas {
        width: 640px;
        height: 480px;
        border: 2px solid black;
        margin: 10px;
      }
    </style>
  
  
    <video id="video" autoplay playsinline></video>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>
      const videoElement = document.getElementById('video');
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let videoEncoder;
      let socket;

      const initWebSocket = () => {
        socket = new WebSocket('ws://localhost:3000');

        socket.onopen = () => console.log('WebSocket connected');
        socket.onerror = error => console.error('WebSocket error:', error);
      };

      const initEncoder = () => {
        videoEncoder = new VideoEncoder({
          output: (encodedChunk) => {
            const chunkData = new Uint8Array(encodedChunk.byteLength);
            encodedChunk.copyTo(chunkData);

            if (socket.readyState === WebSocket.OPEN) {
              socket.send(chunkData.buffer);
            }
          },
          error: (error) => console.error('Encoding error:', error)
        });

        videoEncoder.configure({
          codec: 'vp8',
          width: 640,
          height: 480,
          bitrate: 1_000_000,
          framerate: 30
        });
      };

      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          videoElement.srcObject = stream;
          const videoTrack = stream.getVideoTracks()[0];
          const processor = new MediaStreamTrackProcessor(videoTrack);
          const reader = processor.readable.getReader();

          const processFrames = async () => {
            while (true) {
              const { value: videoFrame, done } = await reader.read();
              if (done) break;

              ctx.drawImage(videoFrame, 0, 0, canvas.width, canvas.height);
              videoEncoder.encode(videoFrame, { keyFrame: true });
              videoFrame.close();
            }
          };

          processFrames();
        })
        .catch((error) => console.error('Failed to get camera', error));

        initEncoder();
        initWebSocket();
    </script>
  

코드의 기능을 분석하고 설명합니다.

1. HTML 구조
   • 동영상 요소는 사용자 카메라의 실시간 영상을 표시합니다
   • 캔버스 요소는 비디오 피드의 개별 프레임을 표시하는 데 사용됩니다. 이는 각 인코딩된 프레임의 시각적 미리보기를 제공합니다
2. 자바스크립트 코드
   • initWebSocket 함수는 WebSocket 서버에 연결됩니다. 이 연결은 인코딩된 프레임을 수신기로 스트리밍하는 데 필수적입니다
   • initEncoder 함수는 VideoEncoder 개체를 생성합니다. 인코더가 새로운 청크를 생성할 때마다 실행되는 출력 콜백을 정의합니다
   • videoEncoder.configure()는 코덱을 1Mbps 비트 전송률 및 30FPS의 VP8로 설정하여 부드럽고 고품질의 인코딩을 보장합니다
   • getUserMedia 호출은 카메라에 대한 액세스를 요청하는 데 사용됩니다. 비디오 피드는 비디오 요소에 할당되며 VideoTrackProcessor를 사용하면 각 프레임을 실시간으로 처리할 수 있습니다
   • processFrames 함수는 비디오에서 프레임을 읽어 캔버스 요소에 표시하고 videoEncoder.encode()를 사용하여 각 프레임을 인코딩합니다. 그런 다음 각 프레임은 인코딩된 청크로 서버에 전송됩니다.

휴! 그 내용이 이해되셨기를 바랍니다. 다음으로 스트림을 수신할 파일을 생성하겠습니다. ?

---

수신기 만들기

이 파일은 WebSocket을 통해 인코딩된 비디오 청크를 수신하고 디코딩한 후 캔버스 요소에 표시합니다.

"receiver.html"이라는 공개 디렉토리 아래에 새 파일을 만들고 다음을 입력합니다.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receiver</title>
    <style>
      canvas {
        width: 640px;
        height: 480px;
        border: 2px solid black;
        margin: 10px;
      }
    </style>
  
  
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let videoDecoder;

      const initWebSocket = () => {
        const socket = new WebSocket('ws://localhost:3000');
        socket.binaryType = 'arraybuffer';

        socket.onmessage = event => {
          decodeFrame(event.data);
        };
        socket.onerror = error => console.error('WebSocket error:', error);
      };

      const initDecoder = () => {
        videoDecoder = new VideoDecoder({
          output: (videoFrame) => {
            ctx.drawImage(videoFrame, 0, 0, canvas.width, canvas.height);
            videoFrame.close();
          },
          error: (error) => console.error('Decoding error:', error)
        });

        videoDecoder.configure({
          codec: 'vp8',
          width: 640,
          height: 480
        });
      };

      const decodeFrame = (encodedData) => {
        const chunk = new EncodedVideoChunk({
          type: 'key',
          timestamp: performance.now(),
          data: new Uint8Array(encodedData)
        });

        videoDecoder.decode(chunk);
      };

      initDecoder();
      initWebSocket();
    </script>
  

위 파일을 분석하려면:

1. HTML
   • 캔버스 요소는 디코딩된 비디오 프레임의 기본 표시 영역입니다. 보낸 사람 페이지와 동일하게 너비, 높이, 테두리가 고정되어 있습니다.
2. 자바스크립트
   • initWebSocket 함수는 새로운 WebSocket 연결을 생성하여 보낸 사람으로부터 인코딩된 프레임을 수신하고 디코딩을 위해 decodeFrame()에 전달합니다.
   • initDecoder는 VP8 코덱용으로 구성된 VideoDecoder 개체를 초기화합니다. 디코더는 각 프레임을 캔버스로 출력합니다.
   • decodeFrame은 인코딩된 데이터를 가져와 EncodedVideoChunk(현재 타임스탬프가 포함된 키 프레임)로 래핑한 다음 videoDecoder.decode()를 통해 디코딩합니다. 각 프레임은 캔버스에 실시간으로 표시됩니다

휴! 이제 필요한 모든 부분이 준비되었으므로 실제로 실행해 보겠습니다. ?

---

코드 실행

코드를 실행하려면 다음 명령을 실행하세요.

node index.js

그런 다음 브라우저에서 http://localhost:3000/sender.html을 지정하세요
카메라에 대한 액세스를 허용한 다음 다른 탭을 열어
http://localhost:3000/receiver.html

아래와 같이 보낸 사람이 보내는 스트림을 볼 수 있습니다.

---

결론

이 튜토리얼에서는 카메라에 액세스하고, 인코딩하고, WebSocket을 통해 청크를 보내고, 디코딩하여 수신기 측에 표시하는 방법을 보여주었습니다. 이 튜토리얼이 도움이 되었기를 바랍니다. ?

언제나 그렇듯이 내 github을 통해 코드를 얻을 수 있습니다.
https://github.com/ethand91/webcodec-stream

즐거운 코딩하세요! ?

---

내 작품이 마음에 드시나요? 다양한 주제로 포스팅을 하고 있으니 더 보고 싶으시면 좋아요와 팔로우 부탁드립니다.
또 나는 커피를 좋아한다.

코딩 인터뷰에서 좋은 성적을 내기 위해 알고리즘 패턴을 배우고 싶다면 [다음 과정](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch)을 추천합니다

위 내용은 WebCodec - 보내기 및 받기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!