자바스크립트 "WebCodecs API"

아름다운전진 2023. 3. 9. 08:07

728x90

WebCodecs API는 웹에서 비디오 및 이미지 코덱 작업을 위한 새로운 JavaScript API입니다. 비디오 및 이미지 데이터를 인코딩 및 디코딩하기 위한 저수준 API를 제공하여 개발자가 맞춤형 비디오 및 이미지 처리 파이프라인을 구현할 수 있도록 합니다. WebCodecs API는 효율적이고 빠르게 설계되어 개발자가 대량의 비디오 및 이미지 데이터를 실시간으로 처리하고 조작할 수 있습니다.

WebCodecs API는 아직 개발 중이며 웹 브라우저에서 아직 널리 지원되지 않습니다. 작성 당시에는 Chrome Canary 및 Firefox Nightly 브라우저에서만 사용할 수 있습니다. 그러나 앞으로는 더 널리 보급될 것으로 예상됩니다.

다음은 WebCodecs API의 주요 구성 요소에 대한 개요입니다.

`Encoder`: 비디오 프레임을 H.264 또는 VP8과 같은 압축된 비디오 형식으로 인코딩하는 방법을 제공하는 클래스입니다.

`Decoder`: 압축된 비디오 프레임을 원시 비디오 프레임으로 디코딩하기 위한 메서드를 제공하는 클래스입니다.

`VideoFrame`: 단일 비디오 프레임을 나타내는 클래스입니다. 여기에는 프레임의 크기, 형식 및 타임스탬프에 대한 정보가 포함됩니다.

`ImageBitmapFrame`: 단일 이미지 프레임을 ImageBitmap으로 나타내는 클래스입니다.

`VideoEncoderConfiguration`: 프레임 속도, 비트 전송률 및 코덱과 같은 비디오 인코딩에 대한 구성 옵션을 제공하는 인터페이스입니다.

`VideoDecoderInit`: 코덱과 같은 비디오 디코딩을 위한 초기화 옵션을 제공하는 인터페이스입니다.

`PixelFormat`: YUV 또는 RGBA와 같은 비디오 또는 이미지 프레임의 형식을 나타내는 열거형입니다.

이제 WebCodecs API를 사용하는 방법에 대한 몇 가지 예를 살펴보겠습니다.

예제 1: 비디오 인코딩

const encoder = new VideoEncoder({

output: async (chunk) => {

// Send the encoded video chunk to the server

await sendToServer(chunk);

});

const configuration = new VideoEncoderConfiguration({

codec: 'vp8',

frameRate: 30,

bitrate: 1000000,

});

await encoder.configure(configuration);

// Start the video encoding process

await encoder.start();

// Encode each video frame as it becomes available

for (const videoFrame of videoFrames) {

await encoder.encode(videoFrame);

}

// Stop the video encoding process

await encoder.flush();

await encoder.close();

이 예제에서는 새 `VideoEncoder` 개체를 만들고 `VideoEncoderConfiguration` 개체로 구성합니다. 그런 다음 인코더 개체에서 `start()`를 호출하여 인코딩 프로세스를 시작하고 인코더 개체에서 `encode()`를 호출하여 각 비디오 프레임을 사용할 수 있게 되면 인코딩합니다. 마지막으로 인코더 개체에서 `flush()` 및 `close()`를 호출하여 인코딩 프로세스를 중지합니다.

예제 2: 비디오 디코딩

const decoder = new VideoDecoder({

output: (frame) => {

// Display the decoded video frame

displayVideoFrame(frame);

});

const init = new VideoDecoderInit({

codec: 'vp8',

});

await decoder.configure(init);

// Start the video decoding process

await decoder.start();

// Decode each video frame as it becomes available

for (const videoChunk of videoChunks) {

await decoder.decode(videoChunk);

}

// Stop the video decoding process

await decoder.flush();

await decoder.close();

이 예제에서는 새 `VideoDecoder` 개체를 만들고 `VideoDecoderInit` 개체로 구성합니다. 그런 다음 `decoder` 개체에서 `start()`를 호출하여 디코딩 프로세스를 시작하고 `decoder` 개체에서 `decode()`를 호출하여 사용 가능해지면 각 비디오 청크를 디코딩합니다. 마지막으로 디코더 개체에서 `flush()` 및 `close()`를 호출하여 디코딩 프로세스를 중지합니다.

728x90