Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 캐나다구경
- nodelistexamples
- 같이힘내는건어떤가요?
- nodelistarraylike
- 캐나다한인음식
- 멘탈행복
- nodelistarray
- amongus게임
- 티스토리검색엔진
- 타인때문에힘들때
- 혼자가아니에요
- refocus
- 캐나다월마트
- 희안vs희한
- readjust
- 캐나다공증
- 희한희안
- 다시시작하면대요
- 캐나다온타리오
- 희한하다희안하다
- Feynman Technique
- 희안희한
- 캐나다
- arraylike
- itsnormal
- 멘탈
- 어몽어즈
- 캐나다운전면허
- 멘탈관리
- thatsok
Archives
- Today
- Total
Vitabyfrank
실시간 WebRTC Screenshot, RGB vs RGBA 차이점 본문
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를 활용하여, 특정한 작업을 수행할 수 있습니다.
Browser Rendering Steps
Generally, rendering the video in the browser involves several steps:
- Capture the frame.
- Encode the frame into a video stream.
- Repeat until all the frames are captured.
- Mux the video and audio streams into a container.
The most time-consuming steps in this flow are capturing and encoding the frames.
관련 API
- Canvas로 이미지를 편집한 후 바로 다른 사용자와 공유하는 데 유용합니다. 예를 들어, 그림판 앱이나 스크린샷 도구에서 사용됩니다.
- ImageData - An ImageData object that stores RGBA data. ImageData is a web API supported by the browser. For details, see ImageData.
- Rendering Videos in the Browser Using WebCodecs API - https://dev.to/rendley/rendering-videos-in-the-browser-using-webcodecs-api-328n
- getImageData() & toDataURL() - Data URL은 base64로 인코딩된 문자열이므로, 서버로 POST 요청을 통해 전송할 수 있습니다
- What are differences between RGB vs RGBA other than 'opacity'? https://stackoverflow.com/questions/24538501/what-are-differences-between-rgb-vs-rgba-other-than-opacity
'Agora > RTC (voice & video)' 카테고리의 다른 글
코덱(Codec)이란? (0) | 2025.01.09 |
---|---|
WebRTC란? (0) | 2025.01.09 |