https://www.forasoft.com/blog/article/real-time-video-streaming-app-development-low-latency

WebSocket + 프레임 전송 방식 채택

WebSocket + 프레임 전송 방식으로 React Native 앱에서 실시간 카메라 이미지를 백엔드로 전송하는 전체 구현 과정을 단계별로 상세하게 정리하면 다음과 같습니다.

1. 백엔드(WebSocket 서버) 구축

• Node.js + ws 모듈로 WebSocket 서버를 만듭니다. (기술 스택은 BE측 선정 필요)
• 서버는 클라이언트(모바일 앱)로부터 이미지 데이터를 수신하고, 필요하다면 다른 서비스(예: 이미지 분석 서버)로 전달합니다.

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    // message: base64 인코딩된 이미지 데이터
    // 여기서 바로 분석하거나, 저장, 브로드캐스트 등 처리
    console.log('이미지 데이터 수신');
  });
  ws.on('close', () => console.log('클라이언트 연결 종료'));
});

2. 프론트엔드(React Native) 구현

2-1. 카메라 프레임 캡처

• react-native-vision-camera 또는 react-native-camera 등으로 카메라 프레임을 캡처합니다.
• 프레임을 일정 간격(예: 1초) 또는 사용자 트리거(버튼, 흔들기 등)로 캡처합니다.

// 예시: 카메라 프레임을 캡처하여 base64로 변환
import { Camera } from 'react-native-vision-camera';

// 프레임 캡처 함수 (실제 라이브러리별로 다름)
const captureFrame = async () => {
  const photo = await cameraRef.current.takePhoto({ quality: 0.8, base64: true });
  return photo.base64;
};

2-2. WebSocket 연결 및 관리

• 앱 시작 시 WebSocket 서버에 연결합니다.
• 연결/해제/에러 등 라이프사이클을 관리합니다.

import React, { useEffect, useRef } from 'react';

const wsRef = useRef<WebSocket | null>(null);

useEffect(() => {
  wsRef.current = new WebSocket('ws://서버주소:8080');
  wsRef.current.onopen = () => console.log('WebSocket 연결됨');
  wsRef.current.onclose = () => console.log('WebSocket 연결 종료');
  wsRef.current.onerror = e => console.log('WebSocket 에러', e);

  return () => {
    wsRef.current && wsRef.current.close();
  };
}, []);

2-3. 프레임 전송