Feature(#180): 발표자의 영상과 음성 스트림을 파일로 저장 #181

platinouss · 2023-12-02T11:27:13Z

작업 개요

추후 다시 보기 기능을 지원하기 위해, 발표자의 영상과 음성을 파일로 저장해야 했습니다.
발표자의 영상 및 음성 스트림이 프레임(또는 샘플) 단위로 들어오면 각각 버퍼에 저장해두고, 강의 종료 시 버퍼에 저장된 영상과 음성 데이터를 하나의 파일로 병합했습니다.

작업 사항

강의 종료 시 발표자의 영상과 음성 스트림을 파일로 저장한다 close #180
타입스크립트로 node-webrtc 모듈을 사용하기 위한 타입 정의 파일 추가 close #28

고민한 점들(필수 X)

node 환경에서 지원하는 WebRTC의 타입스크립트 미지원 문제

현재 Node의 WebRTC 모듈은 타입스크립트를 지원하지 않아서, 직접 타입을 지정해줘야 한다.

이전에 WebRTC의 타입을 추가해줬다면 하단 부분을 node_modules/wrtc/lib/index.d.ts 최하단에 추가해준다 (만약 타입을 지정해 준적이 없다면 #120 PR을 참고)

export declare var nonstandard: {
  RTCAudioSource: {
    prototype: RTCAudioSource,
    new(): RTCAudioSource
  },
  RTCAudioSink: {
    prototype: RTCAudioSink,
    new(track: MediaStreamTrack): RTCAudioSink
  },
  RTCVideoSource: {
    prototype: RTCVideoSource,
    new(init?: RTCVideoSourceInit): RTCVideoSource
  },
  RTCVideoSink: {
    prototype: RTCVideoSink,
    new(track: MediaStreamTrack): RTCVideoSink
  },
  i420ToRgba(
    i420Frame: { width: number, height: number, data: Uint8ClampedArray },
    rgbaFrame: { width: number, height: number, data: Uint8ClampedArray },
  ): void,
  rgbaToI420(
    i420Frame: { width: number, height: number, data: Uint8ClampedArray },
    rgbaFrame: { width: number, height: number, data: Uint8ClampedArray },
  ): void,
}

export interface RTCAudioSource {
  createTrack(): MediaStreamTrack;
  onData(data: RTCAudioData): void;
}

export interface RTCAudioData {
  samples: Int16Array;
  sampleRate: number;
  bitsPerSample?: 16;
  channelCount?: 1;
  numberOfFrames?: number;
}

export interface RTCAudioSink extends EventTarget {
  stop(): void;
  readonly stopped: boolean;
  ondata: ((this: RTCAudioSink, ev: RTCAudioDataEvent) => any) | null;
  addEventListener(type: "data", listener: DataEventListener | DataEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
  removeEventListener(type: "data", callback: DataEventListener | DataEventListenerObject | null, options?: EventListenerOptions | boolean): void;
}

export interface RTCAudioDataEvent extends RTCAudioData, Event {
  type: 'data';
}

interface DataEventListener extends EventListener {
  (data: RTCAudioDataEvent): void
}

interface DataEventListenerObject extends EventListenerObject {
  handleEvent(evt: RTCAudioDataEvent): void;
}

export interface RTCVideoSourceInit {
  isScreencast?: boolean;
  needsDenoising?: boolean;
}

export interface RTCVideoSource {
  readonly isScreencast: boolean;
  readonly needsDenoising?: boolean;
  createTrack(): MediaStreamTrack;
  onFrame(frame: RTCVideoFrame): void;
}

export interface RTCVideoFrame {
  width: number;
  height: number;
  data: Uint8ClampedArray;
  rotation?: number;
}

export interface RTCVideoSink {
  stop(): void;
  readonly stopped: boolean;
  onframe: ((this: RTCVideoSink, ev: RTCVideoFrameEvent) => any) | null;
  addEventListener(type: "data", listener: FrameEventListener | FrameEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
  removeEventListener(type: "data", callback: FrameEventListener | FrameEventListenerObject | null, options?: EventListenerOptions | boolean): void;
}

export interface RTCVideoFrameEvent extends Event {
  type: 'frame';
  frame: RTCVideoFrame;
}

interface FrameEventListener extends EventListener {
  (data: RTCVideoFrameEvent): void
}

interface FrameEventListenerObject extends EventListenerObject {
  handleEvent(evt: RTCVideoFrameEvent): void;
}

WebRTC를 통해 전송되는 미디어 데이터 추출하기

작성 예정

버퍼에 저장된 영상 및 음성 데이터를 하나의 파일로 병합하기

작성 예정

발표자의 음성 또는 영상을 프레임 단위로 받고, 해당 데이터를 버퍼에 저장한다. 이후 강의가 종료되면 버퍼에 저장되어 있던 데이터를 ffmpeg 모듈을 이용하여 mp4 파일로 추출한다.

tmddus2 · 2023-12-02T14:47:10Z