ํ๋ก ํธ์๋ WebCodecs์ ๊ฐ๋ ฅํ ์ค์๊ฐ ๋ฏธ๋์ด ์ธ์ฝ๋ฉ ๊ธฐ๋ฅ์ ํ์ํ์ฌ ๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ, ํ์ ํ์, ๋ธ๋ผ์ฐ์ ๋ด ์ธํฐ๋ํฐ๋ธ ๊ฒฝํ ๋ฑ ํ์ ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌํํด ๋ณด์ธ์.
ํ๋ก ํธ์๋ WebCodecs ์ค์๊ฐ ์ธ์ฝ๋: ๋ผ์ด๋ธ ๋ฏธ๋์ด ์ฒ๋ฆฌ
์น์ ๋์์์ด ์งํํ๋ฉฐ ๋ธ๋ผ์ฐ์ ๋ด์์ ๊ฐ๋ฅํ ๊ฒ์ ๊ฒฝ๊ณ๋ฅผ ๋ํ๊ฐ๊ณ ์์ต๋๋ค. ์ต๊ทผ ๊ฐ์ฅ ํฅ๋ฏธ๋ก์ด ๋ฐ์ ์ค ํ๋๋ WebCodecs์ ๋์ ์ผ๋ก, ๊ฐ๋ฐ์๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ง์ ๋ฏธ๋์ด ์ฝ๋ฑ์ ๋ํ ์ ์์ค ์ก์ธ์ค๋ฅผ ํ ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ค์๊ฐ ๋ฏธ๋์ด ์ฒ๋ฆฌ, ํนํ ๋ผ์ด๋ธ ์ธ์ฝ๋ฉ ์์ญ์์ ์๋ง์ ๊ธฐํ์ ๋ฌธ์ ์ด์ด์ค๋๋ค.
WebCodecs๋ ๋ฌด์์ธ๊ฐ?
WebCodecs๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฏธ๋์ด ์ธ์ฝ๋์ ๋์ฝ๋๋ฅผ ๋ ธ์ถํ๋ ์น API ์งํฉ์ ๋๋ค. WebCodecs ์ด์ ์๋ ์น ๋ธ๋ผ์ฐ์ ๊ฐ ๋ด์ฅ๋, ์ข ์ข ๋ถํฌ๋ช ํ, ์ฝ๋ฑ ๊ตฌํ์ ์์กดํ์ต๋๋ค. WebCodecs๋ ๋ค์๊ณผ ๊ฐ์ ์ ์ฌ๋ ฅ์ ์ด์ด์ค๋๋ค:
- ๋ ๋ฎ์ ์ง์ฐ ์๊ฐ: ์ธ์ฝ๋ฉ/๋์ฝ๋ฉ ํ๋ก์ธ์ค์ ์ง์ ์ ๊ทผํ์ฌ ์ค์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ ๊ธด๋ฐํ ์ ์ด์ ์ง์ฐ ์๊ฐ ๊ฐ์๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
- ์ฌ์ฉ์ ์ ์: ๊ฐ๋ฐ์๋ ํน์ ์ฌ์ฉ ์ฌ๋ก์ ๋ง๊ฒ ์ฝ๋ฑ ๋งค๊ฐ๋ณ์๋ฅผ ๋ฏธ์ธ ์กฐ์ ํ์ฌ ๋์ญํญ, ํ์ง ๋ฐ ์ฑ๋ฅ์ ์ต์ ํํ ์ ์์ต๋๋ค.
- ํ์ : WebCodecs๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ด์์ ์ง์ ์๋ก์ด ์ฝ๋ฑ๊ณผ ๋ฏธ๋์ด ์ฒ๋ฆฌ ๊ธฐ์ ์ ์คํํ ์ ์์ต๋๋ค.
WebCodecs๋ AV1, VP9, H.264๋ฅผ ํฌํจํ ๋ค์ํ ์ธ๊ธฐ ๋น๋์ค ๋ฐ ์ค๋์ค ์ฝ๋ฑ์ ์ง์ํฉ๋๋ค. ํน์ ์ฝ๋ฑ์ ์ฌ์ฉ ๊ฐ๋ฅ ์ฌ๋ถ๋ ๋ธ๋ผ์ฐ์ ์ ํ๋ซํผ์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค.
์ ํ๋ก ํธ์๋์์ ์ค์๊ฐ ์ธ์ฝ๋ฉ์ ํด์ผ ํ๋๊ฐ?
์ ํต์ ์ผ๋ก ์ค์๊ฐ ๋ฏธ๋์ด ์ธ์ฝ๋ฉ์ ๋ฐฑ์๋ ์๋ฒ์ ์์ญ์ด์์ต๋๋ค. ํ์ง๋ง ํ๋ก ํธ์๋์์ ์ธ์ฝ๋ฉ์ ์ํํ๋ฉด ๋ช ๊ฐ์ง ์ด์ ์ด ์์ต๋๋ค:
- ์๋ฒ ๋ถํ ๊ฐ์: ์ธ์ฝ๋ฉ ์์ ์ ํด๋ผ์ด์ธํธ ์ธก์ผ๋ก ์คํ๋ก๋ํ๋ฉด ์๋ฒ ๋ฆฌ์์ค๊ฐ ํ๋ณด๋์ด ๋ ๋ง์ ์ฌ์ฉ์๋ฅผ ์์ฉํ๊ณ ํ์ฅ์ฑ์ ๋์ผ ์ ์์ต๋๋ค.
- ์ง์ฐ ์๊ฐ ๊ฐ์ (์ ์ฌ์ ): ์ผ๋ถ ์๋๋ฆฌ์ค์์๋ ํ๋ก ํธ์๋ ์ธ์ฝ๋ฉ์ด ์ธ์ฝ๋ฉ์ ์ํ ์๋ฒ ์๋ณต์ ์ ๊ฑฐํ์ฌ ์ข ๋จ ๊ฐ ์ง์ฐ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค. ํ์ง๋ง ๋คํธ์ํฌ ์ํ์ ํด๋ผ์ด์ธํธ ์ธก ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ด ์ค์ํ ์์์ ๋๋ค.
- ๊ฐ์ธ ์ ๋ณด ๋ณดํธ ๊ฐํ: ๋ฏธ๋์ด๋ ์ฌ์ฉ์์ ์ฅ์น์์ ์ง์ ์ฒ๋ฆฌ๋๊ณ ์ธ์ฝ๋ฉ๋ ์ ์์ผ๋ฉฐ, ์ด๋ ์์ ๋ฏธ๋์ด์ ์๋ฒ ์ธก ์ฒ๋ฆฌ๋ฅผ ์ต์ํํ์ฌ ๊ฐ์ธ ์ ๋ณด ๋ณดํธ๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์๊ฒฉ ์๋ฃ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฏผ๊ฐํ ํ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ์ ์ ๋ก์ปฌ์์ ์ธ์ฝ๋ฉํ๋ฉด ๋ณด์์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ ์ํ ์ธ์ฝ๋ฉ: ํด๋ผ์ด์ธํธ ์ธก ์ธ์ฝ๋ฉ์ ํตํด ์ฌ์ฉ์์ ๋คํธ์ํฌ ์ํ ๋ฐ ์ฅ์น ๊ธฐ๋ฅ์ ๋ฐ๋ผ ์ธ์ฝ๋ฉ ๋งค๊ฐ๋ณ์๋ฅผ ๋์ ์ผ๋ก ์กฐ์ ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ ๊ฐ๋ ฅํ๊ณ ๊ฐ์ธํ๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
ํ๋ก ํธ์๋ WebCodecs ์ค์๊ฐ ์ธ์ฝ๋์ ์ฌ์ฉ ์ฌ๋ก
ํ๋ก ํธ์๋์์ ์ค์๊ฐ ์ธ์ฝ๋ฉ์ ์ํํ๋ ๊ธฐ๋ฅ์ ๊ด๋ฒ์ํ๊ณ ํฅ๋ฏธ๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค:
๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ
WebCodecs๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ์ ์ง์ฐ ๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ์ต์ํ์ ์ง์ฐ์ผ๋ก ์ค์๊ฐ ๋ฐฉ์ก์ ํ ์ ์๋ ํ๋ซํผ์ ์์ํด ๋ณด์ธ์. ์ด๋ ๋ ์ธํฐ๋ํฐ๋ธํ๊ณ ๋งค๋ ฅ์ ์ธ ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ์ฉ๋๋ก ์ฌ์ฉ๋ ์ ์์ต๋๋ค:
- ์ธํฐ๋ํฐ๋ธ ๊ฒ์ ์คํธ๋ฆฌ๋ฐ: ๊ฒ์ด๋จธ๋ ์์ฒญ์๋ก๋ถํฐ ๊ฑฐ์ ์ค์๊ฐ์ ๊ฐ๊น์ด ํผ๋๋ฐฑ์ ๋ฐ์ผ๋ฉฐ ๊ฒ์ ํ๋ ์ด๋ฅผ ์คํธ๋ฆฌ๋ฐํ ์ ์์ต๋๋ค.
- ๋ผ์ด๋ธ ์ด๋ฒคํธ: ์ฝ์ํธ, ์ปจํผ๋ฐ์ค ๋ฐ ๊ธฐํ ์ด๋ฒคํธ๋ฅผ ๋ ๋ฎ์ ์ง์ฐ ์๊ฐ์ผ๋ก ์คํธ๋ฆฌ๋ฐํ์ฌ ์๊ฒฉ ์ฐธ์์์ ์์ฒญ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- ์์ ๋ฏธ๋์ด: ์์ ๋ฏธ๋์ด ํ๋ซํผ์ ๋ผ์ด๋ธ ๋น๋์ค ๊ธฐ๋ฅ์ ํฅ์๋ ์ฑ๋ฅ๊ณผ ์ํธ์์ฉ์ฑ์ผ๋ก ๊ฐํํ ์ ์์ต๋๋ค.
ํ์ ํ์
WebCodecs๋ ํ์ ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ๊ณผ ํจ์จ์ฑ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ์์ ์ง์ ๋น๋์ค๋ฅผ ์ธ์ฝ๋ฉํจ์ผ๋ก์จ ์๋ฒ ๋ถํ๋ฅผ ์ค์ด๊ณ ์ ์ฌ์ ์ผ๋ก ์ง์ฐ ์๊ฐ์ ๋ฎ์ถ ์ ์์ต๋๋ค. ์ด์ ์ ์ป์ ์ ์๋ ๊ธฐ๋ฅ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋์ญํญ ์๋น ๊ฐ์: ์ต์ ํ๋ ์ธ์ฝ๋ฉ์ ํ์ ํตํ์ ํ์ํ ๋์ญํญ์ ์์ ์ค์ฌ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ์ ํ๋ ์ฌ์ฉ์์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. ์ด๋ ํนํ ์ธํฐ๋ท ์ธํ๋ผ๊ฐ ๋ ๋ฐ๋ฌ๋ ์ง์ญ์์ ์ค์ํฉ๋๋ค.
- ๋น๋์ค ํ์ง ํฅ์: ์ ์ํ ์ธ์ฝ๋ฉ์ ๋คํธ์ํฌ ์ํ์ ๋ฐ๋ผ ๋น๋์ค ํ์ง์ ๋์ ์ผ๋ก ์กฐ์ ํ์ฌ ๊น๋ค๋ก์ด ํ๊ฒฝ์์๋ ๋ถ๋๋ฝ๊ณ ์ผ๊ด๋ ๊ฒฝํ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
- ๊ฐ์ ๋ฐฐ๊ฒฝ ๋ฐ ํจ๊ณผ: WebCodecs๋ฅผ WebAssembly์ ๊ฒฐํฉํ์ฌ ์ค์๊ฐ ๋น๋์ค ์ฒ๋ฆฌ๋ฅผ ์ํํ๊ณ ๊ฐ์ ๋ฐฐ๊ฒฝ ๋ฐ ์ฆ๊ฐ ํ์ค ํจ๊ณผ์ ๊ฐ์ ๊ธฐ๋ฅ์ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ํ์ฑํํ ์ ์์ต๋๋ค.
์ธํฐ๋ํฐ๋ธ ๋น๋์ค ์ ํ๋ฆฌ์ผ์ด์
WebCodecs๋ ์ฌ์ฉ์๊ฐ ์ค์๊ฐ์ผ๋ก ๋น๋์ค ์คํธ๋ฆผ์ ์กฐ์ํ๊ณ ์ํธ ์์ฉํ ์ ์๋ ์ธํฐ๋ํฐ๋ธ ๋น๋์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋น๋์ค ํธ์ง ๋๊ตฌ: ์๋ฅด๊ธฐ, ํฌ๋กญ, ํํฐ ์ ์ฉ๊ณผ ๊ฐ์ ๊ฐ๋จํ ๋น๋์ค ํธ์ง ์์ ์ ํ๋ฌ๊ทธ์ธ์ด๋ ์๋ฒ ์ธก ์ฒ๋ฆฌ ์์ด ๋ธ๋ผ์ฐ์ ์์ ์ง์ ์ํํ ์ ์์ต๋๋ค.
- ์ฆ๊ฐ ํ์ค ์ ํ๋ฆฌ์ผ์ด์ : ์ค์๊ฐ ๋น๋์ค ์คํธ๋ฆผ์ ๊ฐ์ ๊ฐ์ฒด์ ํจ๊ณผ๋ฅผ ์ถ๊ฐํ์ฌ ๋ชฐ์ ๊ฐ ์๊ณ ์ธํฐ๋ํฐ๋ธํ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
- ์๊ฒฉ ํ์ ๋๊ตฌ: WebCodecs๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ์ค์๊ฐ์ผ๋ก ๋น๋์ค ์คํธ๋ฆผ์ ๊ณต๋์ผ๋ก ์ฃผ์์ ๋ฌ๊ณ ์กฐ์ํ ์ ์๋ ๋๊ตฌ๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
ํด๋ผ์ฐ๋ ๊ฒ์ด๋ฐ
ํด๋ผ์ฐ๋ ๊ฒ์ด๋ฐ์ ์๋ฒ์์ ์ฌ์ฉ์์ ์ฅ์น๋ก ์ธํฐ๋ํฐ๋ธ ๋น๋์ค๋ฅผ ์คํธ๋ฆฌ๋ฐํ๋ ๊ฒ์ ์์กดํฉ๋๋ค. WebCodecs๋ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ์ ๋ฐ์ ์ธ ๊ฒ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํ ์ ์์ต๋๋ค:
- ์ง์ฐ ์๊ฐ ๊ฐ์: ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํจ์ผ๋ก์จ WebCodecs๋ ์ฌ์ฉ์ ์ ๋ ฅ๊ณผ ํ๋ฉด์ ํด๋น ์์ ์ฌ์ด์ ์ง์ฐ์ ์ต์ํํ ์ ์์ต๋๋ค.
- ์๊ฐ์ ํ์ง ํฅ์: WebCodecs๋ ๋คํธ์ํฌ ์ํ์ ๋ฐ๋ผ ๋น๋์ค ํ์ง์ ๋์ ์ผ๋ก ์กฐ์ ํ์ฌ ๋ถ๋๋ฝ๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ๊ฒ์ ๊ฒฝํ์ ๋ณด์ฅํฉ๋๋ค.
- ๋ ๋์ ์ฅ์น ์ง์: WebCodecs๋ ์ ์ ๋ ฅ ๋ ธํธ๋ถ ๋ฐ ๋ชจ๋ฐ์ผ ์ฅ์น๋ฅผ ํฌํจํ ๋ ๋์ ๋ฒ์์ ์ฅ์น์์ ํด๋ผ์ฐ๋ ๊ฒ์ด๋ฐ์ ๊ฐ๋ฅํ๊ฒ ํ ์ ์์ต๋๋ค.
๊ธฐ์ ์ ๊ตฌํ: ๊ธฐ๋ณธ ์์
์ ์ฒด ๊ตฌํ์ ๋ณต์กํ์ง๋ง, ์ฌ๊ธฐ ํต์ฌ ๊ฐ๋ ์ ์ค๋ช ํ๋ ๊ฐ๋จํ ์์ ๊ฐ ์์ต๋๋ค:
- ๋ฏธ๋์ด ์คํธ๋ฆผ ์ก์ธ์ค:
getUserMedia()API๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์นด๋ฉ๋ผ์ ๋ง์ดํฌ์ ์ก์ธ์คํฉ๋๋ค. - ์ธ์ฝ๋ ์์ฑ: ์ํ๋ ์ฝ๋ฑ๊ณผ ๊ตฌ์ฑ์ ์ง์ ํ์ฌ
VideoEncoder๊ฐ์ฒด๋ฅผ ์ธ์คํด์คํํฉ๋๋ค. - ํ๋ ์ ์ธ์ฝ๋ฉ:
VideoFrame๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ๋ฏธ๋์ด ์คํธ๋ฆผ์์ ํ๋ ์์ ์บก์ฒํ๊ณ ์ธ์ฝ๋์encode()๋ฉ์๋์ ์ ๋ฌํฉ๋๋ค. - ์ธ์ฝ๋ฉ๋ ์ฒญํฌ ์ฒ๋ฆฌ: ์ธ์ฝ๋๋ ์ธ์ฝ๋ฉ๋ ์ฒญํฌ๋ฅผ ์ถ๋ ฅํฉ๋๋ค. ์ด ์ฒญํฌ๋ค์ ํจํค์ง๋์ด ์์ ์ธก์ผ๋ก ์ ์ก๋์ด์ผ ํฉ๋๋ค.
- ๋์ฝ๋ฉ ๋ฐ ์ฌ์ (์์ ์ธก): ์์ ์ธก์์๋
VideoDecoder๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ฝ๋ฉ๋ ์ฒญํฌ๋ฅผ ๋์ฝ๋ฉํ๊ณ ๋น๋์ค๋ฅผ ํ์ํฉ๋๋ค.
์ด ์์ ๋ ๊ธฐ๋ณธ์ ์ธ ๋จ๊ณ๋ฅผ ๊ฐ์กฐํฉ๋๋ค. ์ค์ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ๋ค์์ ์ฒ๋ฆฌํด์ผ ํฉ๋๋ค:
- ์ค๋ฅ ์ฒ๋ฆฌ: ์๊ธฐ์น ์์ ๋ฌธ์ ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ๊ธฐ ์ํด ๊ฐ๋ ฅํ ์ค๋ฅ ์ฒ๋ฆฌ ๊ธฐ๋ฅ์ ๊ตฌํํฉ๋๋ค.
- ๋๊ธฐํ: ์ค๋์ค์ ๋น๋์ค ์คํธ๋ฆผ ๊ฐ์ ์ ์ ํ ๋๊ธฐํ๋ฅผ ๋ณด์ฅํฉ๋๋ค.
- ๋คํธ์ํฌ ์ ์ก: ์ธ์ฝ๋ฉ๋ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ์ํด ์ ์ ํ ๋คํธ์ํฌ ํ๋กํ ์ฝ(์: WebRTC, WebSockets)์ ์ ํํฉ๋๋ค.
- ์ฝ๋ฑ ์ ํ: ๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ๋คํธ์ํฌ ์ํ์ ๋ฐ๋ผ ์ต์ ์ ์ฝ๋ฑ์ ๋์ ์ผ๋ก ์ ํํฉ๋๋ค.
์ฝ๋ ์ค๋ํซ (๊ฐ๋ ์ ):
// ์ฌ์ฉ์ ๋ฏธ๋์ด ์คํธ๋ฆผ ๊ฐ์ ธ์ค๊ธฐ
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
// VideoEncoder ์์ฑ
const encoder = new VideoEncoder({
config: {
codec: "avc1.42E01E", // H.264 ๊ธฐ์ค ํ๋กํ์ผ
width: 640,
height: 480,
bitrate: 1000000, // 1 Mbps
framerate: 30
},
output: (chunk) => {
// ์ธ์ฝ๋ฉ๋ ์ฒญํฌ ์ฒ๋ฆฌ (์: ๋คํธ์ํฌ๋ฅผ ํตํด ์ ์ก)
console.log("์ธ์ฝ๋ฉ๋ ์ฒญํฌ:", chunk);
},
error: (e) => {
console.error("์ธ์ฝ๋ฉ ์ค๋ฅ:", e);
}
});
encoder.configure({
codec: "avc1.42E01E",
width: 640,
height: 480,
bitrate: 1000000,
framerate: 30
});
// ์คํธ๋ฆผ์์ ๋น๋์ค ํธ๋ ๊ฐ์ ธ์ค๊ธฐ
const videoTrack = stream.getVideoTracks()[0];
const reader = new MediaStreamTrackProcessor(videoTrack).readable;
const frameGrabber = new VideoFrameProcessor({transformer: new TransformStream({transform: async (frame, controller) => {
encoder.encode(frame);
frame.close(); // ํ๋ ์์ ํด์ ํ๋ ๊ฒ์ด ์ค์
}})
}).writable;
reader.pipeTo(frameGrabber);
์ค์ ๊ณ ๋ ค์ฌํญ: ์ด ์ฝ๋ ์ค๋ํซ์ ๋จ์ํ๋ ์์์ ๋๋ค. ๊ฐ๋ ฅํ ๊ตฌํ์ ์ํด์๋ ์ค๋ฅ ์ฒ๋ฆฌ, ์ ์ ํ ๊ตฌ์ฑ ๋ฐ ๋คํธ์ํฌ ์ ์ก์ด ํ์์ ์ ๋๋ค.
๋์ ๊ณผ์ ๋ฐ ๊ณ ๋ ค ์ฌํญ
WebCodecs๋ ์์ฒญ๋ ์ ์ฌ๋ ฅ์ ์ ๊ณตํ์ง๋ง, ๊ณ ๋ คํด์ผ ํ ๋ช ๊ฐ์ง ๊ณผ์ ๊ฐ ์์ต๋๋ค:
- ๋ธ๋ผ์ฐ์ ์ง์: WebCodecs ์ง์์ ์ฌ์ ํ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ๋ฐ์ ํ๊ณ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ ํ๋ฅผ ํ์ธํ์ฌ ๋์ ๊ณ ๊ฐ์ด ์ง์๋๋์ง ํ์ธํ์ธ์. ๊ธฐ๋ฅ ๊ฐ์ง๊ฐ ์ค์ํฉ๋๋ค.
- ์ฑ๋ฅ: ๋ธ๋ผ์ฐ์ ์์ ๋น๋์ค๋ฅผ ์ธ์ฝ๋ฉํ๋ ๊ฒ์ ํนํ ์ ์ ๋ ฅ ์ฅ์น์์ ๋ฆฌ์์ค๋ฅผ ๋ง์ด ์๋ชจํ ์ ์์ต๋๋ค. ์์ฉ ๊ฐ๋ฅํ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ค๋ฉด ์ ์คํ ์ต์ ํ๊ฐ ํ์ํฉ๋๋ค. WebAssembly๋ฅผ ์ฌ์ฉํ์ฌ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์คํ๋ก๋ํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ฝ๋ฑ ์ ํ ๋ฐ ๊ตฌ์ฑ: ์ฌ๋ฐ๋ฅธ ์ฝ๋ฑ์ ์ ํํ๊ณ ์ ์ ํ๊ฒ ๊ตฌ์ฑํ๋ ๊ฒ์ ์ต์ ์ ํ์ง๊ณผ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ฝ๋ฑ ๋งค๊ฐ๋ณ์(์: ๋นํธ๋ ์ดํธ, ํ๋ ์๋ ์ดํธ, ํ๋กํ์ผ)๋ฅผ ์ดํดํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค.
- ๋๊ธฐํ: ํนํ ์ค์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ค๋์ค์ ๋น๋์ค ์คํธ๋ฆผ ๊ฐ์ ๋๊ธฐํ๋ฅผ ์ ์งํ๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ํ์์คํฌํ ๋ฐ ๋ฒํผ๋ง ๊ธฐ์ ์ด ์ข ์ข ํ์ํฉ๋๋ค.
- ๋ณด์: ๋ฏผ๊ฐํ ๋ฏธ๋์ด๋ก ์์ ํ ๋๋ ์ฌ์ฉ์ ๊ฐ์ธ ์ ๋ณด๋ฅผ ๋ณดํธํ๊ธฐ ์ํด ์ ์ ํ ๋ณด์ ์กฐ์น๊ฐ ๋ง๋ จ๋์ด ์๋์ง ํ์ธํ์ธ์. ์ํธํ ๋ฐ ๋ณด์ ์ ์ก ํ๋กํ ์ฝ์ ๊ณ ๋ คํ์ญ์์ค.
์ต์ ํ ๊ธฐ๋ฒ
ํ๋ก ํธ์๋ WebCodecs ์ค์๊ฐ ์ธ์ฝ๋์ ์ฑ๋ฅ๊ณผ ํจ์จ์ฑ์ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ์ต์ ํ ๊ธฐ๋ฒ์ ๊ณ ๋ คํ์ญ์์ค:
- ์ฝ๋ฑ ์ ํ: ์ฌ์ฉ ์ฌ๋ก์ ๊ฐ์ฅ ํจ์จ์ ์ธ ์ฝ๋ฑ์ ์ ํํ์ญ์์ค. AV1๊ณผ VP9์ H.264๋ณด๋ค ๋ ๋์ ์์ถ ํจ์จ์ฑ์ ์ ๊ณตํ์ง๋ง ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋์ง ์์ ์ ์์ต๋๋ค. H.264๋ ๋๋ฆฌ ์ง์๋๋ ์ฝ๋ฑ์ด์ง๋ง ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๋ผ์ด์ ์ค ๋น์ฉ์ด ํ์ํ ์ ์์ต๋๋ค.
- ๋นํธ๋ ์ดํธ ์ ์: ๋คํธ์ํฌ ์ํ์ ๋ฐ๋ผ ๋นํธ๋ ์ดํธ๋ฅผ ๋์ ์ผ๋ก ์กฐ์ ํ์ญ์์ค. ๋คํธ์ํฌ ๋์ญํญ์ด ์ ํ๋ ๋๋ ๋นํธ๋ ์ดํธ๋ฅผ ๋ฎ์ถ๊ณ ๋์ญํญ์ด ์ถฉ๋ถํ ๋๋ ๋์ ๋๋ค.
- ํ๋ ์๋ ์ดํธ ์ ์ด: ์ฑ๋ฅ ํฅ์์ ์ํด ํ์ํ ๊ฒฝ์ฐ ํ๋ ์๋ ์ดํธ๋ฅผ ์ค์ด์ญ์์ค. ํ๋ ์๋ ์ดํธ๊ฐ ๋ฎ์์๋ก ํด๋ผ์ด์ธํธ ์ฅ์น์ ๊ณ์ฐ ๋ถํ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
- ํด์๋ ์ค์ผ์ผ๋ง: ํ์ํ ๊ฒฝ์ฐ ๋น๋์ค์ ํด์๋๋ฅผ ๋ฎ์ถ์ญ์์ค. ํด์๋๊ฐ ๋ฎ์์๋ก ์ธ์ฝ๋ฉ์ ํ์ํ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ด ์ค์ด๋ญ๋๋ค.
- WebAssembly: WebAssembly๋ฅผ ์ฌ์ฉํ์ฌ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ ์คํ๋ก๋ํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํค์ญ์์ค. WebAssembly๋ฅผ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ์์ ๋ค์ดํฐ๋ธ ์ฝ๋๋ฅผ ๊ฑฐ์ ๋ค์ดํฐ๋ธ ์๋๋ก ์คํํ ์ ์์ต๋๋ค.
- ํ๋์จ์ด ๊ฐ์: ๊ฐ๋ฅํ ๋๋ง๋ค ํ๋์จ์ด ๊ฐ์์ ํ์ฉํ์ญ์์ค. ์ต์ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น๋ ์ข ์ข ๋น๋์ค ์ธ์ฝ๋ฉ ๋ฐ ๋์ฝ๋ฉ์ ์ํ ํ๋์จ์ด ๊ฐ์์ ์ ๊ณตํฉ๋๋ค.
- ์์ปค ์ค๋ ๋: ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๊ณ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์๋ต์ฑ์ ์ํฅ์ ๋ฏธ์น๋ ๊ฒ์ ํผํ๊ธฐ ์ํด ์ธ์ฝ๋ฉ์ ๋ณ๋์ ์์ปค ์ค๋ ๋๋ก ์คํ๋ก๋ํ์ญ์์ค.
ํ๋ก ํธ์๋ ๋ฏธ๋์ด ์ฒ๋ฆฌ์ ๋ฏธ๋
WebCodecs๋ ๋ธ๋ผ์ฐ์ ๋ด์์ ์ง์ ์ ๊ตํ ๋ฏธ๋์ด ์ฒ๋ฆฌ ๊ธฐ๋ฅ์ ํ์ฑํํ๋ ๋ฐ ์์ด ์ค์ํ ์ง์ ์ ๋ํ๋ ๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ด ์ฑ์ํ๊ณ ํ๋์จ์ด ๊ฐ์์ด ๋์ฑ ๋ณดํธํ๋จ์ ๋ฐ๋ผ ์์ผ๋ก ๋ช ๋ ์์ ํจ์ฌ ๋ ํ์ ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฑ์ฅํ ๊ฒ์ผ๋ก ๊ธฐ๋ํ ์ ์์ต๋๋ค.
ํ๋ก ํธ์๋ ๋ฏธ๋์ด ์ฒ๋ฆฌ์ ๋ฏธ๋๋ ๋ฐ์ผ๋ฉฐ, ๋ค์๊ณผ ๊ฐ์ ๊ฐ๋ฅ์ฑ์ ํฌํจํฉ๋๋ค:
- ๊ณ ๊ธ ๋น๋์ค ํจ๊ณผ: ์ค์๊ฐ ๋ฐฐ๊ฒฝ ์ ๊ฑฐ ๋ฐ ๊ฐ์ฒด ์ถ์ ๊ณผ ๊ฐ์ ๋ ์ ๊ตํ ๋น๋์ค ํจ๊ณผ๊ฐ ๋ธ๋ผ์ฐ์ ์์ ์ง์ ๊ฐ๋ฅํด์ง ๊ฒ์ ๋๋ค.
- AI ๊ธฐ๋ฐ ๋ฏธ๋์ด ์ฒ๋ฆฌ: ๋น๋์ค ๋ถ์, ๊ฐ์ฒด ์ธ์, ์ฝํ ์ธ ์ธ์ ์ธ์ฝ๋ฉ๊ณผ ๊ฐ์ ์์ ์ ์ํ ๋จธ์ ๋ฌ๋ ๋ชจ๋ธ์ ํตํฉ. ๋น๋์ค ์ฝํ ์ธ ์ ๋ฐ๋ผ ์ธ์ฝ๋ฉ ๋งค๊ฐ๋ณ์๋ฅผ ์๋์ผ๋ก ์ต์ ํํ๋ ๊ฒ์ ์์ํด ๋ณด์ธ์.
- ๋ชฐ์ ํ ๊ฒฝํ: WebCodecs๋ ์น์์ ๋ชฐ์ ํ ๊ฐ์ ๋ฐ ์ฆ๊ฐ ํ์ค ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๋ฐ ํต์ฌ์ ์ธ ์ญํ ์ ํ ๊ฒ์ ๋๋ค.
๊ฒฐ๋ก
ํ๋ก ํธ์๋ WebCodecs ์ค์๊ฐ ์ธ์ฝ๋ฉ์ ์น์์์ ๋ฏธ๋์ด ์ฒ๋ฆฌ๋ฅผ ์ํ ๊ฐ๋ ฅํ ์๋ก์ด ํจ๋ฌ๋ค์์ ์ ๊ณตํฉ๋๋ค. WebCodecs์ ๊ธฐ๋ฅ์ ํ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๋ผ์ด๋ธ ์คํธ๋ฆฌ๋ฐ, ํ์ ํ์, ์ธํฐ๋ํฐ๋ธ ๋น๋์ค ๋ฑ์์ ํ์ ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ์ฑ๋ฅ ์ธก๋ฉด์์ ๊ณผ์ ๊ฐ ๋จ์ ์์ง๋ง ์ ์ฌ์ ์ธ ์ด์ ์ ์๋นํฉ๋๋ค. ์น์ด ๊ณ์ ์งํํจ์ ๋ฐ๋ผ WebCodecs๋ ์จ๋ผ์ธ ๋ฏธ๋์ด ๊ฒฝํ์ ๋ฏธ๋๋ฅผ ํ์ฑํ๋ ๋ฐ ์ ์ ๋ ์ค์ํ ์ญํ ์ ํ๊ฒ ๋ ๊ฒ์ ๋๋ค. ์ด ํฅ๋ฏธ๋ก์ด ๊ธฐ์ ๋ก ๊ฐ๋ฅํ ๊ฒ์ ๊ฒฝ๊ณ๋ฅผ ๊ณ์ ํ์ํ๊ณ , ์คํํ๊ณ , ๋ํ๊ฐ์ญ์์ค!