Vitabyfrank

실시간 WebRTC Screenshot, RGB vs RGBA 차이점 본문

Agora/RTC (voice & video)

실시간 WebRTC Screenshot, RGB vs RGBA 차이점

Vitabyfrank 2025. 1. 22. 12:52

Red Green Blue vs Red Green Blue Alpha 

RGB vs RGBA

웹 개발을 하다 보면 색상을 다루는 일이 빈번합니다. 특히 RGB와 RGBA는 가장 널리 사용되는 색상 표현 방식인데요. 이 둘의 차이점과 각각의 활용 사례에 대해 자세히 알아보겠습니다.

RGB란 무엇인가? rgb(빨강 값, 초록 값, 파랑 값)

RGB는 빨강(Red), 초록(Green), 파랑(Blue)이라는 세 가지 색상의 조합으로 색상을 정의합니다.
각 색상의 값은 0~255 또는 0%~100% 범위에서 설정됩니다.

 

  • rgb(255, 255, 255)흰색 (White)
    빨강, 초록, 파랑이 각각 최대 밝기로 섞이면 빛의 모든 색이 합쳐져 흰색이 됩니다.
  • rgb(0, 0, 0)검은색 (Black)
    빨강, 초록, 파랑이 모두 없는 상태(값이 0)에서는 빛이 없으므로 검은색이 됩니다.

 

/* RGB 표현 방식 */
 
color: rgb(255, 0, 0); /* 순수한 빨강 */
color: rgb(0, 255, 0); /* 순수한 초록 */
color: rgb(0, 0, 255); /* 순수한 파랑 */
color: rgb(128, 128, 128); /* 회색 */
color: rgb(50%, 50%, 50%); /* 중간 회색 */

 

RGBA의 특별함 rgba(빨강 값, 초록 값, 파랑 값, Alpha 값)

RGBA는 RGB에 Alpha(투명도) 채널을 추가한 형태입니다.

Alpha 값은 0.0(완전 투명)부터 1.0(완전 불투명)까지의 값을 가질 수 있습니다. 이를 통해 요소의 투명도를 세밀하게 조절할 수 있죠.

 

 
/* RGBA 표현 방식 */
color: rgba(255, 0, 0, 0.5); /* 50% 투명한 빨강 */
color: rgba(0, 0, 0, 0.8); /* 80% 불투명한 검정 */
color: rgba(255, 255, 255, 0.3); /* 30% 불투명한 흰색 */

 

 

Alpha 채널이란?

Alpha 채널은 색상의 투명도를 조절하는 역할을 합니다. 값이 작을수록 더 투명해지고, 값이 클수록 더 불투명해집니다.

  • 0.0: 완전 투명 (보이지 않음)
  • 1.0: 완전 불투명 (색상이 100% 보임) 

/* Alpha 채널 설정 */
 
background-color: rgba(0, 0, 0, 0.8); /* 80% 불투명한 검정 */


RGB와 RGBA의 차이점


속성 RGB RGBA
구성 요소 빨강, 초록, 파랑 빨강, 초록, 파랑, 투명도(Alpha)
투명도 지원 X O
사용 목적 배경색, 텍스트 색상 등 투명도가 필요 없는 경우 오버레이, 모달 배경, 그림자 효과 등 투명도가 필요한 경우
메모리 사용 각 픽셀당 24비트(3바이트) 사용 각 픽셀당 32비트(4바이트) 사용

 


Screenshot  using Agora SDK - Demo: https://webdemo.agora.io/screenshot/index.html

$("#takeScreenshot").click(async function (e) {
  //get imageData object picture from local video track.
  const imageData = localTracks.videoTrack.getCurrentFrameData();
  downloadImageData(imageData);
});

//download imageData picture.
async function downloadImageData(data) {
  //create canvas,set the canvas's width and height as data(imageData object)'s width and height.
  const canvas = document.createElement("canvas");
  canvas.width = data.width;
  canvas.height = data.height;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  //put imageData object value into canvas
  ctx.putImageData(data, 0, 0);
  //convert the canvas picture to base64 format.
  const dataURL = canvas.toDataURL();
  //create a hyperlink, and set the value as previous 'dataURL' value, so that we can download as capture.png file.
  const link = document.createElement("a");
  link.download = "capture.png";
  link.href = dataURL;
  document.body.appendChild(link);
  link.click();
  link.remove();
  canvas.remove();
}

 

  • getCurrentFrameData() : Gets the data of the video frame being rendered. Returns ImageData
  • An ImageData object that stores RGBA data. ImageData is a web API supported by the browser. For details, see ImageData.
  • Agora SDK에서 제공하는 getCurrentFrameData() 메서드로  - "실시간 " 로컬 비디오 트랙의 현재 프레임을 캡처하고, 이 프레임을 이미지로 다운로드할 수 있도록 하는 것입니다. 이를 통해 Agora SDK와 HTML Canvas API를 활용하여, 특정한 작업을 수행할 수 있습니다.

 

 

screen_shot

Browser Rendering Steps

Generally, rendering the video in the browser involves several steps:

  1. Capture the frame.
  2. Encode the frame into a video stream.
  3. Repeat until all the frames are captured.
  4. Mux the video and audio streams into a container.

The most time-consuming steps in this flow are capturing and encoding the frames.


관련 API

 

 

 

 

'Agora > RTC (voice & video)' 카테고리의 다른 글

코덱(Codec)이란?  (0) 2025.01.09
WebRTC란?  (0) 2025.01.09