URL.createObjectUrl을 사용하는 대신 srcObject 사용하기?

이전에 썼던, createObjectUrl에 대한 내용을 정리하면서 mdn 문서에서 아래 내용을 발견했었다. 이전 글 링크

당시 URL.createObjectUrl()을 이용해 비디오 파일에 대한 url 을 생성하고 video 요소의 src 속성으로 지정해 썸네일을 추출하는 이슈를 하고 있었다. 관련된 문서를 찾아보며 이 부분을 마주했을 땐, video element에 리소스를 붙이려면 createObjectUrl()을 이용하지 않아야하나? 생각이 들었다. 결론부터 말하자면 내가 작업했던 부분엔 MediaStream을 사용하지 않기 때문에 해당하지 않았다. MediaStream을 잘 몰라서 생긴 착오로... 이번에 이부분에 대해 알아봤던 걸 정리했다.

srcObject

일단 srcObject란 무엇일까?

HTMLMediaElement의 속성으로, 미디어 소스 객체를 설정하거나 반환할 수 있다. 

값으로는 MediaStream, MediaSource, BLob 또는 File이 올 수 있다고 한다. (20년 3월 기준으로 Safari만 완벽하게 지원하며 나머지 브라우저는 MediaStream만 가능하다고 한다. )

 

MediaStream

위의 경고에서 언급되었던 MediaStream은  MediaStream API에서 사용하는 인터페이스로, 미디어 콘텐츠의 스트림을 나타낸다. 스트림은 비디오 또는 오디오 트랙과 같은 여러 개의 트랙으로 구성된다.  여기서 MediaStream API란 오디오와 비디오 데이터 스트리밍을 지원하는 WebRTC 관련 API이다. 

그니까 위의 경고 문구는  WebRTC를 이용해 비디오 스트림 관련 기능을 구현할 때만 해당되는 내용으로, MediaStream을 URL.createObjectUrl 로 url을 생성해 video에 붙이지 말고, srcObject 속성을 이용하라는 뜻이었다.

srcObject를 이용한 video 요소에 MediaStream 설정 예제

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
video.srcObject = mediaStream;

 

미디어스트림을 읽고 대충 영상 소스도 포함이겠거니 했는데 그게 아니었다. 알아보겠다고 해놓고 미뤄놨었는데 그대로 방치해뒀으면 잘못된 정보를 오래 게시할 뻔 했다...!!!  내 블로그에 혼자 정리해서 올리는 글이지만 웹상에 공개하는 만큼 좀 더 잘 알아보고 작성해야겠다는 생각이 들었다.

 

참고 문서

https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement/srcObject

HTMLMediaElement.srcObject - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

MediaStream - Web APIs | MDN