HTMLMediaElement.srcObject
==========================

`HTMLMediaElement` 인터페이스의 **`srcObject`** 속성은
 `HTMLMediaElement`와 관련된 미디어 소스 역할을 하는 객체를
 설정하거나 반환합니다.

 srcObject 객체는 `MediaStream` (en-US), a `MediaSource` (en-US), a
 `Blob` 또는 `File`(`Blob`을 상속)일 수 있습니다.

**참고:** 2020년 3월 현재 Safari만이 `srcObject`를 완벽하게 지원합니다. 즉, `MediaSource`, `MediaStream`, `Blob`, 그리고 `File` 객체를 값으로 사용합니다. 다른 브라우저는 `MediaStream` 객체를 지원합니다. 다른 브라우저들이 지원할 때까지 `URL.createObjectURL()`을 사용하여 URL을 생성하고 이를 `HTMLMediaElement.src`에 할당하는 것을 고려하세요(예제는 아래에 있습니다). 또한 버전 108부터 Chromium은 해당 객체의 `MediaSourceHandle` (en-US) 인스턴스(워커에서 전송됨)를 `srcObject`에 할당하여 전용 워커 `MediaSource` 객체 연결을 지원합니다.

값
-

`MediaStream` (en-US), `MediaSource` (en-US), `Blob` 또는
 `File` 객체(실제로 지원되는 내용은 호환성 표를 참고하세요).

사용 일람
-----

 이전 버전의 미디어 소스 명세는 `createObjectURL()`을
 사용하여 객체 URL을 만든 다음 `src`를 해당 URL로
 설정합니다. 이제 `srcObject`를 `MediaStream` (en-US)으로 직접 설정할 수 있습니다.

예제
--

### 기본 예제

 이 예제에서 `MediaStream` (en-US)은 새로 생성된 `<video>` 요소에
 할당됩니다.


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


 이 예제에서 `MediaSource` (en-US)는 새로 생성된 `<video>` 요소에
 할당됩니다.


```js
const mediaSource = new MediaSource();
const video = document.createElement("video");
video.srcObject = mediaSource;
```

### src 속성에 대한 폴백 지원

 아래 예제는 `srcObject`가 지원되지 않는 경우 객체 URL을 만들고 이를 `src`에
 할당해야 하는 이전 브라우저 버전을 지원합니다.

 먼저 카메라의 `MediaStream` (en-US)이 새로 생성된 `<video>`
 요소에 할당되고 이전 브라우저에 대한 폴백이 있습니다.


```js
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
if ("srcObject" in video) {
  video.srcObject = mediaStream;
} else {
  // 사라질 예정이므로 새 브라우저에서는 사용하지 마세요.
  video.src = URL.createObjectURL(mediaStream);
}
```


 둘째, 새로운 `MediaSource` (en-US)가 새로 생성된 `<video>`
 요소에 할당되며 이전 브라우저 및 아직 `MediaSource` (en-US)의 직접 할당을
 지원하지 않는 브라우저에 대한 폴백이 있습니다.


```js
const mediaSource = new MediaSource();
const video = document.createElement("video");
// 이전 브라우저는 srcObject가 없을수 있습니다.
if ("srcObject" in video) {
  try {
    video.srcObject = mediaSource;
  } catch (err) {
    if (err.name !== "TypeError") {
      throw err;
    }
    // 만약 srcObject가 있더라도 MediaStream만 지원하는 경우가 있을 수 있습니다.
    video.src = URL.createObjectURL(mediaSource);
  }
} else {
  video.src = URL.createObjectURL(mediaSource);
}
```

### 워커에서 `MediaSource`를 구성하고 재생을 위해 메인 스레드(main thread)에 전달하기

`MediaSource.handle` (en-US) 속성은 전용 워커 내에서 액세스 할 수 있으며 결과 값 `MediaSourceHandle` (en-US) 객체는 `postMessage()` (en-US) 호출을 통해 워커를 생성한 스레드(이 경우 메인 스레드)로 전송됩니다.


```js
// 내부 전용 워커
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// 워커를 만든 컨텍스트로 핸들을 전송합니다
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // SourceBuffers를 생성하고 가져온(fetched) 미디어로 채우기 전에
  // MediaSource에서 sourceopen을 기다리세요(await). MediaSource는
  // HTMLMediaElement에 연결되고 readyState가 "open"이 될 때까지
  // SourceBuffers 생성을 수락하지 않습니다.
});
```


메인 스레드에서 `message` (en-US) 이벤트 핸들러를 통해 핸들을 수신하고 `HTMLMediaElement.srcObject` 속성을 통해 `<video>`에 첨부하고 비디오를 `play` (en-US)합니다.


```js
worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});
```


**참고:** `MediaSourceHandle` (en-US)는 공유 워커 또는 서비스 워커를 통해 성공적으로 전송할 수 없습니다.

명세
--

| Specification |
| --- |
| HTML Standard # dom-media-srcobject-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.