WebCodecs์ VideoFrame ์ฒ๋ฆฌ ์ค๋ฒํค๋์ ๋ํ ์์ธ ๋ถ์. ์ธ์ฝ๋ฉ, ๋์ฝ๋ฉ, ์ ์ฌ์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ค๋ฃจ๋ฉฐ ์ค์๊ฐ ๋น๋์ค ์ ํ๋ฆฌ์ผ์ด์ ์ต์ ํ ๊ธฐ๋ฒ์ ์์๋ด ๋๋ค.
WebCodecs VideoFrame ์ฑ๋ฅ ์ํฅ: ํ๋ ์ ์ฒ๋ฆฌ ์ค๋ฒํค๋ ๋ถ์
WebCodecs๋ ๊ฐ๋ฐ์์๊ฒ ๋ธ๋ผ์ฐ์ ๋ด์์ ์ง์ ๋น๋์ค ๋ฐ ์ค๋์ค ์ธ์ฝ๋ฉ๊ณผ ๋์ฝ๋ฉ์ ์ ๋ก ์์ด ์ ์ดํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ํ์ง๋ง ์ด๋ฌํ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์๋ ์ฑ
์์ด ๋ฐ๋ฆ
๋๋ค. ํจ์จ์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ค์๊ฐ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๋ ค๋ฉด VideoFrame ์ฒ๋ฆฌ์ ์ฑ๋ฅ ์ํฅ์ ์ดํดํ๊ณ ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด ๊ธ์์๋ VideoFrame ์กฐ์๊ณผ ๊ด๋ จ๋ ์ค๋ฒํค๋๋ฅผ ์ฌ์ธต์ ์ผ๋ก ๋ถ์ํ๊ณ , ์ ์ฌ์ ์ธ ๋ณ๋ชฉ ํ์์ ํ์ํ๋ฉฐ, ์ต์ ํ๋ฅผ ์ํ ์ค์ง์ ์ธ ์ ๋ต์ ์ ์ํฉ๋๋ค.
VideoFrame ์๋ช ์ฃผ๊ธฐ ๋ฐ ์ฒ๋ฆฌ ์ดํดํ๊ธฐ
์ฑ๋ฅ์ ๋ํด ์์๋ณด๊ธฐ ์ ์ VideoFrame์ ์๋ช
์ฃผ๊ธฐ๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. VideoFrame์ ๋จ์ผ ๋น๋์ค ํ๋ ์์ ๋ํ๋
๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ์์ค์์ ์์ฑ๋ ์ ์์ต๋๋ค:
- ์นด๋ฉ๋ผ ์
๋ ฅ:
getUserMedia์MediaStreamTrack์ ์ฌ์ฉ. - ๋น๋์ค ํ์ผ:
VideoDecoder๋ฅผ ์ฌ์ฉํ์ฌ ๋์ฝ๋ฉ. - Canvas ์์:
CanvasRenderingContext2D์์ ํฝ์ ์ฝ๊ธฐ. - OffscreenCanvas ์์: Canvas์ ์ ์ฌํ์ง๋ง DOM์ ์ฐ๊ฒฐ๋์ง ์์ผ๋ฉฐ, ์ผ๋ฐ์ ์ผ๋ก ๋ฐฑ๊ทธ๋ผ์ด๋ ์ฒ๋ฆฌ์ ์ฌ์ฉ๋จ.
- ์๋ณธ ํฝ์
๋ฐ์ดํฐ:
ArrayBuffer๋๋ ์ ์ฌํ ๋ฐ์ดํฐ ์์ค์์ ์ง์ VideoFrame์์ฑ.
์ผ๋จ ์์ฑ๋๋ฉด VideoFrame์ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋ ์ ์์ต๋๋ค:
- ์ธ์ฝ๋ฉ:
VideoEncoder์ ์ ๋ฌํ์ฌ ์์ถ๋ ๋น๋์ค ์คํธ๋ฆผ ์์ฑ. - ํ์:
<video>์์๋ ์บ๋ฒ์ค์ ๋ ๋๋ง. - ์ฒ๋ฆฌ: ํํฐ๋ง, ์ค์ผ์ผ๋ง ๋๋ ๋ถ์๊ณผ ๊ฐ์ ์์ ์ํ.
์ด๋ฌํ ๊ฐ ๋จ๊ณ์๋ ์ค๋ฒํค๋๊ฐ ์๋ฐ๋๋ฏ๋ก ์ด๋ฅผ ์ต์ํํ๊ธฐ ์ํด ์ ์คํ ๊ณ ๋ ค๊ฐ ํ์ํฉ๋๋ค.
VideoFrame ์ฒ๋ฆฌ ์ค๋ฒํค๋์ ์์ธ
VideoFrame ์ฒ๋ฆฌ์ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น๋ ๋ช ๊ฐ์ง ์์ธ์ด ์์ต๋๋ค:
1. ๋ฐ์ดํฐ ์ ์ก ๋ฐ ๋ฉ๋ชจ๋ฆฌ ํ ๋น
VideoFrame์ ์์ฑํ๋ ๊ฒ์ ์ข
์ข
ํ ๋ฉ๋ชจ๋ฆฌ ์์น์์ ๋ค๋ฅธ ์์น๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณต์ฌํ๋ ์์
์ ํฌํจํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์นด๋ฉ๋ผ์์ ๋น๋์ค๋ฅผ ์บก์ฒํ ๋ ๋ธ๋ผ์ฐ์ ์ ๋ฏธ๋์ด ํ์ดํ๋ผ์ธ์ ์๋ณธ ํฝ์
๋ฐ์ดํฐ๋ฅผ VideoFrame ๊ฐ์ฒด๋ก ๋ณต์ฌํด์ผ ํฉ๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก, VideoFrame์ ์ธ์ฝ๋ฉํ๊ฑฐ๋ ๋์ฝ๋ฉํ๋ ๊ฒ์ ๋ธ๋ผ์ฐ์ ์ ๋ฉ๋ชจ๋ฆฌ์ WebCodecs ๊ตฌํ์ฒด(๋ณ๋์ ํ๋ก์ธ์ค๋ ์น์ด์
๋ธ๋ฆฌ ๋ชจ๋์ ์์ ์ ์์) ๊ฐ์ ๋ฐ์ดํฐ ์ ์ก์ ํฌํจํฉ๋๋ค.
์์ : ๋ค์ ์๋๋ฆฌ์ค๋ฅผ ๊ณ ๋ คํด ๋ณด์ธ์: ```javascript const videoTrack = await navigator.mediaDevices.getUserMedia({ video: true }); const reader = new MediaStreamTrackProcessor(videoTrack).readable; const frameConsumer = new WritableStream({ write(frame) { // ์ฌ๊ธฐ์ ํ๋ ์ ์ฒ๋ฆฌ frame.close(); } }); reader.pipeTo(frameConsumer); ```
write ๋ฉ์๋๊ฐ ํธ์ถ๋ ๋๋ง๋ค ์๋ก์ด VideoFrame ๊ฐ์ฒด๊ฐ ์์ฑ๋๋ฉฐ, ์ด๋ ์๋นํ ๋ฉ๋ชจ๋ฆฌ ํ ๋น๊ณผ ๋ฐ์ดํฐ ๋ณต์ฌ๋ฅผ ์๋ฐํ ์ ์์ต๋๋ค. ์์ฑ๋๊ณ ์๋ฉธ๋๋ VideoFrame ๊ฐ์ฒด์ ์๋ฅผ ์ต์ํํ๋ฉด ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
2. ํฝ์ ํฌ๋งท ๋ณํ
๋น๋์ค ์ฝ๋ฑ๊ณผ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ์ข
์ข
ํน์ ํฝ์
ํฌ๋งท(์: YUV420, RGBA)์์ ์๋ํฉ๋๋ค. ๋ง์ฝ ์์ค VideoFrame์ด ๋ค๋ฅธ ํฌ๋งท์ด๋ผ๋ฉด ๋ณํ์ด ํ์ํฉ๋๋ค. ์ด๋ฌํ ๋ณํ์ ํนํ ๊ณ ํด์๋ ๋น๋์ค์ ๊ฒฝ์ฐ ๊ณ์ฐ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์์ต๋๋ค.
์์ : ์นด๋ฉ๋ผ๊ฐ NV12 ํฌ๋งท์ผ๋ก ํ๋ ์์ ์ถ๋ ฅํ์ง๋ง ์ธ์ฝ๋๊ฐ I420์ ์์ํ๋ ๊ฒฝ์ฐ, WebCodecs๋ ์๋์ผ๋ก ๋ณํ์ ์ํํฉ๋๋ค. ํธ๋ฆฌํ๊ธฐ๋ ํ์ง๋ง ์ด๋ ์๋นํ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ด ๋ ์ ์์ต๋๋ค. ๊ฐ๋ฅํ๋ค๋ฉด ๋ถํ์ํ ๋ณํ์ ํผํ๊ธฐ ์ํด ์นด๋ฉ๋ผ๋ ์ธ์ฝ๋๊ฐ ์ผ์นํ๋ ํฝ์ ํฌ๋งท์ ์ฌ์ฉํ๋๋ก ๊ตฌ์ฑํ์ธ์.
3. Canvas์์ ๋ฐ์ดํฐ ๋ณต์ฌ
<canvas>๋ OffscreenCanvas๋ฅผ VideoFrame ๋ฐ์ดํฐ์ ์์ค๋ ๋์์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. getImageData๋ฅผ ์ฌ์ฉํ์ฌ ์บ๋ฒ์ค์์ ํฝ์
์ ์ฝ๋ ๊ฒ์ GPU์์ CPU๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๊ฒ์ ํฌํจํ๋ฉฐ, ์ด๋ ๋๋ฆด ์ ์์ต๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก, VideoFrame์ ์บ๋ฒ์ค์ ๊ทธ๋ฆฌ๋ ๊ฒ์ CPU์์ GPU๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์กํด์ผ ํฉ๋๋ค.
์์ : ์บ๋ฒ์ค ์ปจํ
์คํธ ๋ด์์ ์ง์ ์ด๋ฏธ์ง ํํฐ๋ฅผ ์ ์ฉํ๋ ๊ฒ์ ํจ์จ์ ์ผ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์์ ๋ ํ๋ ์์ ์ธ์ฝ๋ฉํด์ผ ํ๋ ๊ฒฝ์ฐ, ์บ๋ฒ์ค์์ VideoFrame์ ์์ฑํด์ผ ํ๋ฉฐ ์ด๋ ๋ณต์ฌ ์์
์ ์๋ฐํฉ๋๋ค. ๋ณต์กํ ์ด๋ฏธ์ง ์ฒ๋ฆฌ ์์
์๋ ์น์ด์
๋ธ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ์ ์ก ์ค๋ฒํค๋๋ฅผ ์ต์ํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
4. ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ฒํค๋
WebCodecs๋ ์ ์์ค ๋น๋์ค ์ฒ๋ฆฌ ๊ธฐ๋ฅ์ ๋ํ ์ ๊ทผ์ ์ ๊ณตํ์ง๋ง, ์ฌ์ ํ ์๋ฐ์คํฌ๋ฆฝํธ(๋๋ ํ์ ์คํฌ๋ฆฝํธ)์์ ์ฌ์ฉ๋ฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ๋น์ง ์ปฌ๋ ์ ๊ณผ ๋์ ํ์ดํ์ ํนํ ์ฝ๋์ ์ฑ๋ฅ์ด ์ค์ํ ๋ถ๋ถ์์ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค.
์์ : VideoFrame ๊ฐ์ฒด๋ฅผ ์ฒ๋ฆฌํ๋ WritableStream์ write ๋ฉ์๋ ๋ด์์ ์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ์ง ๋ง์ธ์. ์ด๋ฌํ ๊ฐ์ฒด๋ค์ ์์ฃผ ๊ฐ๋น์ง ์ปฌ๋ ์
์ ๋์์ด ๋์ด ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ๋์ ๊ธฐ์กด ๊ฐ์ฒด๋ฅผ ์ฌ์ฌ์ฉํ๊ฑฐ๋ ์น์ด์
๋ธ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๊ด๋ฆฌํ์ธ์.
5. ์น์ด์ ๋ธ๋ฆฌ ์ฑ๋ฅ
๋ง์ WebCodecs ๊ตฌํ์ฒด๋ ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ๊ณผ ๊ฐ์ ์ฑ๋ฅ์ด ์ค์ํ ์์ ์ ์ํด ์น์ด์ ๋ธ๋ฆฌ์ ์์กดํฉ๋๋ค. ์น์ด์ ๋ธ๋ฆฌ๊ฐ ์ผ๋ฐ์ ์ผ๋ก ๋ค์ดํฐ๋ธ์ ๊ฐ๊น์ด ์ฑ๋ฅ์ ์ ๊ณตํ์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ์์ ์น์ด์ ๋ธ๋ฆฌ ํจ์๋ฅผ ํธ์ถํ๋ ๊ฒ๊ณผ ๊ด๋ จ๋ ์ ์ฌ์ ์ค๋ฒํค๋๋ฅผ ์ธ์งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด๋ฌํ ํจ์ ํธ์ถ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ์น์ด์ ๋ธ๋ฆฌ ํ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ง์ฌ๋งํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋น์ฉ์ด ๋ฐ์ํฉ๋๋ค.
์์ : ์ด๋ฏธ์ง ์ฒ๋ฆฌ๋ฅผ ์ํด ์น์ด์ ๋ธ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๋ฉด, ์๋ฐ์คํฌ๋ฆฝํธ์ ์น์ด์ ๋ธ๋ฆฌ ๊ฐ์ ํธ์ถ ํ์๋ฅผ ์ต์ํํ๋ ค๊ณ ๋ ธ๋ ฅํ์ธ์. ์น์ด์ ๋ธ๋ฆฌ ํจ์์ ํฐ ๋ฐ์ดํฐ ๋ฉ์ด๋ฆฌ๋ฅผ ์ ๋ฌํ๊ณ ๊ฐ๋ฅํ ํ ๋ง์ ์ฒ๋ฆฌ๋ฅผ ์น์ด์ ๋ธ๋ฆฌ ๋ชจ๋ ๋ด์์ ์ํํ์ฌ ํจ์ ํธ์ถ์ ์ค๋ฒํค๋๋ฅผ ์ค์ด์ธ์.
6. ์ปจํ ์คํธ ์ค์์นญ ๋ฐ ์ค๋ ๋ฉ
ํ๋ ๋ธ๋ผ์ฐ์ ๋ ์ฑ๋ฅ๊ณผ ๋ฐ์์ฑ์ ํฅ์์ํค๊ธฐ ์ํด ์ข ์ข ์ฌ๋ฌ ํ๋ก์ธ์ค์ ์ค๋ ๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๊ทธ๋ฌ๋ ํ๋ก์ธ์ค๋ ์ค๋ ๋ ๊ฐ์ ์ ํ์ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. WebCodecs๋ฅผ ์ฌ์ฉํ ๋, ๋ถํ์ํ ์ปจํ ์คํธ ์ค์์น๋ฅผ ํผํ๊ธฐ ์ํด ๋ธ๋ผ์ฐ์ ๊ฐ ์ค๋ ๋ฉ๊ณผ ํ๋ก์ธ์ค ๊ฒฉ๋ฆฌ๋ฅผ ์ด๋ป๊ฒ ๊ด๋ฆฌํ๋์ง ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์์ : ์์ปค ์ค๋ ๋์ ๋ฉ์ธ ์ค๋ ๋ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ณต์ ํ๊ธฐ ์ํด SharedArrayBuffer๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๋ฉด, ๊ฒฝ์ ์กฐ๊ฑด๊ณผ ๋ฐ์ดํฐ ์์์ ํผํ๊ธฐ ์ํด ์ ์ ํ ๋๊ธฐํ ๋ฉ์ปค๋์ฆ์ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํ์ธ์. ์๋ชป๋ ๋๊ธฐํ๋ ์ฑ๋ฅ ๋ฌธ์ ์ ์๊ธฐ์น ์์ ๋์์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
VideoFrame ์ฑ๋ฅ ์ต์ ํ ์ ๋ต
VideoFrame ์ฒ๋ฆฌ์ ์ฑ๋ฅ ์ํฅ์ ์ต์ํํ๊ธฐ ์ํด ์ฌ๋ฌ ์ ๋ต์ ์ฌ์ฉํ ์ ์์ต๋๋ค:
1. ๋ฐ์ดํฐ ๋ณต์ฌ ์ค์ด๊ธฐ
์ฑ๋ฅ์ ํฅ์์ํค๋ ๊ฐ์ฅ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ ๋ฐ์ดํฐ ๋ณต์ฌ ํ์๋ฅผ ์ค์ด๋ ๊ฒ์ ๋๋ค. ์ด๋ ๋ค์์ ํตํด ๋ฌ์ฑํ ์ ์์ต๋๋ค:
- ํ์ดํ๋ผ์ธ ์ ์ฒด์์ ๋์ผํ ํฝ์ ํฌ๋งท ์ฌ์ฉ: ์นด๋ฉ๋ผ, ์ธ์ฝ๋, ๋ ๋๋ฌ๊ฐ ๋์ผํ ํฌ๋งท์ ์ฌ์ฉํ๋๋ก ๊ตฌ์ฑํ์ฌ ๋ถํ์ํ ํฝ์ ํฌ๋งท ๋ณํ์ ํผํ์ธ์.
- VideoFrame ๊ฐ์ฒด ์ฌ์ฌ์ฉ: ๊ฐ ํ๋ ์๋ง๋ค ์๋ก์ด
VideoFrame์ ์์ฑํ๋ ๋์ , ๊ฐ๋ฅํ ๋๋ง๋ค ๊ธฐ์กด ๊ฐ์ฒด๋ฅผ ์ฌ์ฌ์ฉํ์ธ์. - ์ ๋ก-์นดํผ(zero-copy) API ์ฌ์ฉ: ๋ฐ์ดํฐ๋ฅผ ๋ณต์ฌํ์ง ์๊ณ
VideoFrame์ ๊ธฐ๋ณธ ๋ฉ๋ชจ๋ฆฌ์ ์ง์ ์ ๊ทผํ ์ ์๋ API๋ฅผ ํ์ํ์ธ์.
์์ : ```javascript let reusableFrame; const frameConsumer = new WritableStream({ write(frame) { if (reusableFrame) { //reusableFrame์ผ๋ก ๋ฌด์ธ๊ฐ ์ฒ๋ฆฌ reusableFrame.close(); } reusableFrame = frame; // reusableFrame ์ฒ๋ฆฌ //์ฌ๊ธฐ์๋ frame.close()๋ฅผ ํผํ์ธ์. ์ด์ reusableFrame์ด ๋์๊ณ ๋์ค์ ๋ซํ ๊ฒ์ ๋๋ค. }, close() { if (reusableFrame) { reusableFrame.close(); } } }); ```
2. ํฝ์ ํฌ๋งท ๋ณํ ์ต์ ํ
ํฝ์ ํฌ๋งท ๋ณํ์ ํผํ ์ ์๋ ๊ฒฝ์ฐ, ๋ค์์ ํตํด ์ต์ ํํ์ธ์:
- ํ๋์จ์ด ๊ฐ์ ์ฌ์ฉ: ๊ฐ๋ฅํ๋ค๋ฉด ํ๋์จ์ด ๊ฐ์ ํฝ์ ํฌ๋งท ๋ณํ ํจ์๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ฌ์ฉ์ ์ ์ ๋ณํ ๊ตฌํ: ํน์ ๋ณํ ์๊ตฌ์ฌํญ์ ๋ํด, ์น์ด์ ๋ธ๋ฆฌ๋ SIMD ๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํ์ฌ ์์ฒด ์ต์ ํ๋ ๋ณํ ๋ฃจํด์ ๊ตฌํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
3. Canvas ์ฌ์ฉ ์ต์ํ
์ ๋์ ์ผ๋ก ํ์ํ์ง ์์ ํ <canvas>๋ฅผ VideoFrame ๋ฐ์ดํฐ์ ์์ค๋ ๋์์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ ํผํ์ธ์. ์ด๋ฏธ์ง ์ฒ๋ฆฌ๋ฅผ ์ํํด์ผ ํ๋ ๊ฒฝ์ฐ, ์๋ณธ ํฝ์
๋ฐ์ดํฐ์์ ์ง์ ์๋ํ๋ ์น์ด์
๋ธ๋ฆฌ๋ ์ ๋ฌธ ์ด๋ฏธ์ง ์ฒ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
4. ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์ต์ ํ
๋ค์๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ์ฑ๋ฅ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ธ์:
- ๋ถํ์ํ ๊ฐ์ฒด ์์ฑ ํผํ๊ธฐ: ๊ฐ๋ฅํ ๋๋ง๋ค ๊ธฐ์กด ๊ฐ์ฒด๋ฅผ ์ฌ์ฌ์ฉํ์ธ์.
- ํ์
๋ฐฐ์ด(Typed Array) ์ฌ์ฉ: ์ซ์ ๋ฐ์ดํฐ์ ํจ์จ์ ์ธ ์ ์ฅ ๋ฐ ์กฐ์์ ์ํด
TypedArray๊ฐ์ฒด(์:Uint8Array,Float32Array)๋ฅผ ์ฌ์ฉํ์ธ์. - ๊ฐ๋น์ง ์ปฌ๋ ์ ์ต์ํ: ์ฝ๋์ ์ฑ๋ฅ์ด ์ค์ํ ๋ถ๋ถ์์ ์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ์ง ๋ง์ธ์.
5. ์น์ด์ ๋ธ๋ฆฌ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๊ธฐ
๋ค์๊ณผ ๊ฐ์ ์ฑ๋ฅ์ด ์ค์ํ ์์ ์ ์น์ด์ ๋ธ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์:
- ์ด๋ฏธ์ง ์ฒ๋ฆฌ: ์ฌ์ฉ์ ์ ์ ์ด๋ฏธ์ง ํํฐ๋ฅผ ๊ตฌํํ๊ฑฐ๋ ๊ธฐ์กด์ ์น์ด์ ๋ธ๋ฆฌ ๊ธฐ๋ฐ ์ด๋ฏธ์ง ์ฒ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ฝ๋ฑ ๊ตฌํ: ๋น๋์ค ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ์ ์ํด ์น์ด์ ๋ธ๋ฆฌ ๊ธฐ๋ฐ ์ฝ๋ฑ ๊ตฌํ์ฒด๋ฅผ ์ฌ์ฉํ์ธ์.
- SIMD ๋ช ๋ น์ด: ํฝ์ ๋ฐ์ดํฐ์ ๋ณ๋ ฌ ์ฒ๋ฆฌ๋ฅผ ์ํด SIMD ๋ช ๋ น์ด๋ฅผ ํ์ฉํ์ธ์.
6. ์ฑ๋ฅ ํ๋กํ์ผ๋ง ๋ฐ ๋ถ์
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ WebCodecs ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ํ๋กํ์ผ๋งํ๊ณ ๋ถ์ํ์ธ์. ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ๊ฐ์ฅ ํฐ ์ํฅ์ ๋ฏธ์น๋ ์์ญ์ ์ต์ ํ ๋ ธ๋ ฅ์ ์ง์คํ์ธ์.
Chrome DevTools: Chrome DevTools๋ CPU ์ฌ์ฉ๋, ๋ฉ๋ชจ๋ฆฌ ํ ๋น, ๋คํธ์ํฌ ํ๋์ ๊ธฐ๋กํ๋ ๊ธฐ๋ฅ์ ํฌํจํ ๊ฐ๋ ฅํ ํ๋กํ์ผ๋ง ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. Timeline ํจ๋์ ์ฌ์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ์ธ์. Memory ํจ๋์ ๋ฉ๋ชจ๋ฆฌ ํ ๋น์ ์ถ์ ํ๊ณ ์ ์ฌ์ ์ธ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
Firefox Developer Tools: Firefox ๊ฐ๋ฐ์ ๋๊ตฌ ๋ํ ํฌ๊ด์ ์ธ ํ๋กํ์ผ๋ง ๋๊ตฌ ์ธํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. Performance ํจ๋์ ์ฌ์ฉํ๋ฉด ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ์ ๊ธฐ๋กํ๊ณ ๋ถ์ํ ์ ์์ต๋๋ค. Memory ํจ๋์ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋ ๋ฐ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
7. ์์ปค ์ค๋ ๋ ๊ณ ๋ คํ๊ธฐ
๋ฉ์ธ ์ค๋ ๋๊ฐ ๋ธ๋กํน๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ๋ฐ์์ฑ ์๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ์ ์งํ๊ธฐ ์ํด ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์์ปค ์ค๋ ๋๋ก ์คํ๋ก๋ํ์ธ์. ์์ปค ์ค๋ ๋๋ ๋ณ๋์ ์ปจํ ์คํธ์์ ์๋ํ๋ฏ๋ก, ๋ฉ์ธ ์ค๋ ๋์ ์ฑ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์๊ณ ๋น๋์ค ์ธ์ฝ๋ฉ์ด๋ ์ด๋ฏธ์ง ์ฒ๋ฆฌ์ ๊ฐ์ ์์ ์ ์ํํ ์ ์์ต๋๋ค.
์์ : ```javascript // ๋ฉ์ธ ์ค๋ ๋์์ const worker = new Worker('worker.js'); worker.postMessage({ frameData: videoFrame.data, width: videoFrame.width, height: videoFrame.height }); worker.onmessage = (event) => { // ์์ปค๋ก๋ถํฐ ๋ฐ์ ๊ฒฐ๊ณผ ์ฒ๋ฆฌ console.log('Processed frame:', event.data); }; // worker.js์์ self.onmessage = (event) => { const { frameData, width, height } = event.data; // frameData์ ๋ํ ์ง์ฝ์ ์ธ ์ฒ๋ฆฌ ์ํ const processedData = processFrame(frameData, width, height); self.postMessage(processedData); }; ```
8. ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ ์ค์ ์ต์ ํ
์ฝ๋ฑ ์ ํ, ์ธ์ฝ๋ฉ ๋งค๊ฐ๋ณ์(์: ๋นํธ๋ ์ดํธ, ํ๋ ์๋ ์ดํธ, ํด์๋), ๋์ฝ๋ฉ ์ค์ ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ค์ํ ์ค์ ์ ์คํํ์ฌ ๋น๋์ค ํ์ง๊ณผ ์ฑ๋ฅ ์ฌ์ด์ ์ต์ ์ ๊ท ํ์ ์ฐพ์ผ์ธ์. ์๋ฅผ ๋ค์ด, ๋ฎ์ ํด์๋๋ ํ๋ ์๋ ์ดํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ธ์ฝ๋์ ๋์ฝ๋์ ๊ณ์ฐ ๋ถํ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
9. ์ ์ํ ๋นํธ๋ ์ดํธ ์คํธ๋ฆฌ๋ฐ(ABS) ๊ตฌํ
์คํธ๋ฆฌ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ, ์ฌ์ฉ์์ ๋คํธ์ํฌ ์กฐ๊ฑด ๋ฐ ์ฅ์น ๊ธฐ๋ฅ์ ๋ฐ๋ผ ๋น๋์ค ํ์ง์ ๋์ ์ผ๋ก ์กฐ์ ํ๊ธฐ ์ํด ์ ์ํ ๋นํธ๋ ์ดํธ ์คํธ๋ฆฌ๋ฐ(ABS)์ ๊ตฌํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. ABS๋ฅผ ์ฌ์ฉํ๋ฉด ๋คํธ์ํฌ ๋์ญํญ์ด ์ ํ๋ ๊ฒฝ์ฐ์๋ ๋ถ๋๋ฌ์ด ์์ฒญ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
์ค์ ์์ ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
๋ช ๊ฐ์ง ์ค์ ์๋๋ฆฌ์ค์ ์ด๋ฌํ ์ต์ ํ ๊ธฐ์ ์ด ์ด๋ป๊ฒ ์ ์ฉ๋ ์ ์๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค:
1. ์ค์๊ฐ ํ์ ํ์
ํ์ ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ๋ฎ์ ์ง์ฐ ์๊ฐ๊ณผ ๋์ ํ๋ ์ ์๋๊ฐ ํ์์ ์ ๋๋ค. ์ด๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํด ๋ฐ์ดํฐ ๋ณต์ฌ๋ฅผ ์ต์ํํ๊ณ , ํฝ์ ํฌ๋งท ๋ณํ์ ์ต์ ํํ๋ฉฐ, ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ์ ์น์ด์ ๋ธ๋ฆฌ๋ฅผ ํ์ฉํ์ธ์. ์์ ์ต์ ๋ ๋ฐฐ๊ฒฝ ์ ๊ฑฐ์ ๊ฐ์ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์คํ๋ก๋ํ๊ธฐ ์ํด ์์ปค ์ค๋ ๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
์์ : ํ์ ํ์ ํ๋ซํผ์ ๋น๋์ค ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ์ ์ํด VP8 ๋๋ VP9 ์ฝ๋ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋นํธ๋ ์ดํธ์ ํ๋ ์๋ ์ดํธ ๊ฐ์ ์ธ์ฝ๋ฉ ๋งค๊ฐ๋ณ์๋ฅผ ์ ์คํ๊ฒ ์กฐ์ ํจ์ผ๋ก์จ, ํ๋ซํผ์ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๋ง๊ฒ ๋น๋์ค ํ์ง์ ์ต์ ํํ ์ ์์ต๋๋ค. ๋ํ ํ๋ซํผ์ ์น์ด์ ๋ธ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ ๋ฐฐ๊ฒฝ๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ ์ ๋น๋์ค ํํฐ๋ฅผ ๊ตฌํํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ๋์ฑ ํฅ์์ํฌ ์ ์์ต๋๋ค.
2. ๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ
๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น๋์ค ์ฝํ ์ธ ์ ํจ์จ์ ์ธ ์ธ์ฝ๋ฉ๊ณผ ์ ์ก์ด ํ์ํฉ๋๋ค. ์ฌ์ฉ์์ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋น๋์ค ํ์ง์ ๋์ ์ผ๋ก ์กฐ์ ํ๊ธฐ ์ํด ์ ์ํ ๋นํธ๋ ์ดํธ ์คํธ๋ฆฌ๋ฐ(ABS)์ ๊ตฌํํ์ธ์. ์ฑ๋ฅ์ ๊ทน๋ํํ๊ธฐ ์ํด ํ๋์จ์ด ๊ฐ์ ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ์ ์ฌ์ฉํ์ธ์. ๋น๋์ค ์ฝํ ์ธ ๋ฅผ ํจ์จ์ ์ผ๋ก ๋ฐฐํฌํ๊ธฐ ์ํด ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN) ์ฌ์ฉ์ ๊ณ ๋ คํ์ธ์.
์์ : ๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ ํ๋ซํผ์ ๋น๋์ค ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ์ ์ํด H.264 ์ฝ๋ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ํ๋ซํผ์ CDN์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ ๊ฐ๊น์ด ๊ณณ์ ๋น๋์ค ์ฝํ ์ธ ๋ฅผ ์บ์ํ์ฌ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ์์ฒญ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ๋ํ ํ๋ซํผ์ ์๋ฒ ์ธก ํธ๋์ค์ฝ๋ฉ์ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ๋นํธ๋ ์ดํธ๋ฅผ ๊ฐ์ง ๋น๋์ค์ ์ฌ๋ฌ ๋ฒ์ ์ ์์ฑํ์ฌ, ๋ค๋ฅธ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๊ฐ์ง ์ฌ์ฉ์๊ฐ ๋ฒํผ๋ง ์์ด ์คํธ๋ฆผ์ ์์ฒญํ ์ ์๋๋ก ํ ์ ์์ต๋๋ค.
3. ๋น๋์ค ํธ์ง ๋ฐ ์ฒ๋ฆฌ
๋น๋์ค ํธ์ง ๋ฐ ์ฒ๋ฆฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ข ์ข ๋น๋์ค ํ๋ ์์ ๋ํ ๋ณต์กํ ์์ ์ ํฌํจํฉ๋๋ค. ์ด๋ฌํ ์์ ์ ๊ฐ์ํํ๊ธฐ ์ํด ์น์ด์ ๋ธ๋ฆฌ์ SIMD ๋ช ๋ น์ด๋ฅผ ํ์ฉํ์ธ์. ํจ๊ณผ ๋ ๋๋ง์ด๋ ์ฌ๋ฌ ๋น๋์ค ์คํธ๋ฆผ ํฉ์ฑ ๊ฐ์ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์คํ๋ก๋ํ๊ธฐ ์ํด ์์ปค ์ค๋ ๋๋ฅผ ์ฌ์ฉํ์ธ์.
์์ : ๋น๋์ค ํธ์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ์น์ด์ ๋ธ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์์ ๋ณด์ ์ด๋ ๋ชจ์ ๋ธ๋ฌ์ ๊ฐ์ ์ฌ์ฉ์ ์ ์ ๋น๋์ค ํจ๊ณผ๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ปค ์ค๋ ๋๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ํจ๊ณผ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ ๋๋งํ์ฌ ๋ฉ์ธ ์ค๋ ๋๊ฐ ๋ธ๋กํน๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
WebCodecs๋ ๊ฐ๋ฐ์์๊ฒ ๋ธ๋ผ์ฐ์ ๋ด์์ ๋น๋์ค ๋ฐ ์ค๋์ค๋ฅผ ์กฐ์ํ ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ VideoFrame ์ฒ๋ฆฌ์ ์ฑ๋ฅ ์ํฅ์ ์ดํดํ๊ณ ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ฐ์ดํฐ ๋ณต์ฌ๋ฅผ ์ต์ํํ๊ณ , ํฝ์
ํฌ๋งท ๋ณํ์ ์ต์ ํํ๋ฉฐ, ์น์ด์
๋ธ๋ฆฌ๋ฅผ ํ์ฉํ๊ณ , ์ฝ๋๋ฅผ ํ๋กํ์ผ๋งํจ์ผ๋ก์จ ํจ์จ์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ค์๊ฐ ๋น๋์ค ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ฑ๋ฅ ์ต์ ํ๋ ๋ฐ๋ณต์ ์ธ ๊ณผ์ ์์ ๊ธฐ์ตํ์ธ์. ์ง์์ ์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์
์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ณ ๋ถ์ํ์ฌ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ต์ ํ ์ ๋ต์ ๊ฐ์ ํ์ธ์. WebCodecs์ ํ์ ์ฑ
์๊ฐ ์๊ฒ ํ์ฉํ๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ง์ ์ผ๋ก ๋ชฐ์
๊ฐ ์๊ณ ๋งค๋ ฅ์ ์ธ ๋น๋์ค ๊ฒฝํ์ ๋ง๋ค์ด๋ผ ์ ์์ต๋๋ค.
์ด ๊ธ์์ ๋ ผ์๋ ์์ธ๋ค์ ์ ์คํ๊ฒ ๊ณ ๋ คํ๊ณ ๊ถ์ฅ๋๋ ์ต์ ํ ์ ๋ต์ ๊ตฌํํจ์ผ๋ก์จ, WebCodecs์ ์ ์ฌ๋ ฅ์ ์ต๋ํ ๋ฐํํ๊ณ ์ฌ์ฉ์์ ์ง๋ฆฌ์ ์์น๋ ์ฅ์น ๊ธฐ๋ฅ์ ๊ด๊ณ์์ด ์ฐ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ณ ์ฑ๋ฅ ๋น๋์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ํ๋กํ์ผ๋งํ๊ณ ํน์ ์๊ตฌ์ฌํญ๊ณผ ์ ์ฝ ์กฐ๊ฑด์ ๋ง๊ฒ ์ต์ ํ ๊ธฐ์ ์ ์กฐ์ ํ๋ ๊ฒ์ ์์ง ๋ง์ธ์.