비디오 태그에서 XMLHttpRequest 활용하기 – Blob.slice()로 바이너리 데이터 전송하기

HTML5의 Blob.slice() 메서드는 원본 Blob 객체에서 지정된 바이트 범위에 해당하는 데이터만 추출해 새로운 Blob 객체를 생성할 때 매우 유용합니다. 이렇게 만든 Blob은 아래 예시처럼 XMLHttpRequest와 함께 사용해 서버로 전송할 수 있습니다.

Blob.slice()로 바이너리 데이터 주고받기

다음 예제는 slice()를 활용해 이진(binary) 데이터를 전송하고 수신하는 기본적인 흐름을 보여줍니다. 텍스트 데이터로 Blob을 생성한 뒤, POST 방식으로 "file"을 서버에 업로드합니다.

var val = new XMLHttpRequest();

val.open("POST", url, true);
val.onload = function (event) {
};
var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

비디오 태그(<video>)에 적용하는 방법

비디오 요소에 적용할 때는 서버 응답을 Blob 형태로 받은 후, URL.createObjectURL()을 사용해 Blob 전용 URL로 변환합니다. 이 URL을 <source> 요소의 src 속성에 지정하면 브라우저가 해당 데이터를 비디오로 재생할 수 있습니다.

req.onload = function () {
    var blob_uri = URL.createObjectURL(this.response);
    myElement.appendChild(document.createElement("source")).src = blob_uri;
};
req.responseType = "blob";

핵심은 responseType을 "blob"으로 설정해야 한다는 점입니다. 이렇게 하면 응답이 자동으로 Blob 객체로 처리되며, 별도의 문자열 변환 없이 곧바로 미디어 소스로 연결할 수 있습니다. 동영상 스트리밍 구간을 나눠 받거나 대용량 파일을 부분적으로 처리할 때 Blob.slice()와 이 기법을 조합하면 특히 효과적입니다.