URL.pathname - Web API

URL.pathname
============

`URL` 인터페이스의 **`pathname`** 속성은 URL의 경로와 그 앞의 `/`로 이루어진 `USVString`을 반환합니다. 경로가 없는 경우 빈 문자열을 반환합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--

```js
const path = url.pathname;
url.pathname = newPath;
```

### 값

`USVString`.

예제
--

```js
var url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/pathname?q=value",
);
var result = url.pathname; // Returns:"/ko/docs/Web/API/URL/pathname"
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-pathname |

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

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

같이 보기
-----

* 속성이 속한 `URL` 인터페이스.


URL.searchParams - Web API

URL.searchParams
================

`URL` 인터페이스의 **`searchParams`** 읽기 전용 속성은 URL 내의 `GET` 디코딩 된 쿼리 매개변수에 접근할 수 있는 `URLSearchParams` 객체를 반환합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--

```js
const urlSearchParams = url.searchParams;
```

### 값

`URLSearchParams` 객체.

예제
--

페이지의 URL을 `https://example.com/?name=Jonathan%20Smith&age=18`로 가정했을 때, `name`과 `age` 매개변수는 다음과 같이 가져올 수 있습니다.

```js
let params = new URL(document.location).searchParams;
let name = params.get("name"); // is the string "Jonathan Smith".
let age = parseInt(params.get("age")); // is the number 18
```

명세
--

| Specification |
| --- |
| URL Standard # dom-url-searchparams |

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

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


URL.toString() - Web API

URL.toString()
==============

**`URL.toString()`** 문자열화 메서드는 전체 URL을 담은 `USVString`을 반환합니다. 사실상 읽기 전용 `URL.href`인 셈입니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--

```js
href = url.toString();
```

### 반환 값

`USVString`.

예제
--

```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/toString",
);
url.toString(); // should return the URL as a string
```

명세
--

| Specification |
| --- |
| URL Standard # URL-stringification-behavior |

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

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

같이 보기
-----

* 메서드가 속한 `URL` 인터페이스.


URL.search - Web API

URL.search
==========

`URL` 인터페이스의 **`search`** 속성은 맨 앞의 `'?'`와 함께 URL의 쿼리 문자열, 즉 검색 매개변수를 나타내는 `USVString`입니다.

신형 브라우저에서는 `URL.searchParams` 속성을 통해 간편한 쿼리 문자열 분석을 지원합니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

구문
--

```js
const searchParams = object.search;
url.search = newSearchParams;
```

### 값

`USVString`.

Examples
--------

```js
const url = new URL(
  "https://developer.mozilla.org/ko/docs/Web/API/URL/search?q=123",
);
console.log(url.search); // Logs "?q=123"
```

명세서
---

| Specification |
| --- |
| URL Standard # dom-url-search |

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

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

See also
--------

* 속성이 속한 `URL` 인터페이스.


URL.revokeObjectURL() - Web API

URL.revokeObjectURL()
=====================

**`URL.revokeObjectURL()`** 정적 메서드는 이전에 `URL.createObjectURL()`을 통해 생성한 객체 URL을 해제합니다. 객체 URL을 더는 쓸 일이 없을 때 사용해서, 브라우저가 이제 해당 객체를 메모리에 들고 있지 않아도 된다고 알려주세요.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

**참고:** 이 기능은 `Blob` 인터페이스의 생명 주기 문제와 잠재적인 메모리 누수 가능성으로 인해 Service Worker에서 사용할 수 없습니다.

구문
--

```js
URL.revokeObjectURL(objectURL);
```

### 매개변수

`objectURL`

`createObjectURL()`을 통해 생성한 객체 URL을 나타내는 `DOMString`.

예제
--

객체 URL을 사용하여 이미지 표시하기를 보세요.

명세
--

| Specification |
| --- |
| File API # dfn-revokeObjectURL |

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

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

같이 보기
-----

* 웹 애플리케이션에서 파일 사용하기
* `URL.createObjectURL()`


The structured clone algorithm - Web API

The structured clone algorithm
==============================

The structured clone 알고리즘은 복잡한 JavaScript 객체의 직렬화을 위해서 HTML5 specification에 의해서 정의된 새로운 알고리즘 입니다. 이것은 순환그래프를 포함하는 객체의 직렬화를 지원하기 때문에 JSON보다 더 유용합니다. — 객체는 같은 그래프에서 다른객체를 참조하는 객체를 참조할 수 있습니다. 이러한 케이스들에서는 structured clone알고리즘이 아마도 JSON보다 더 효율적일 것입니다.

알고리즘은 본질적으로 원본 객체의 모든 필드를 거치고 각 필드의 값들을 새로운 객체로 복제합니다. 만약 필드가 객체를 가졌다면 모든 필드와 그 서브필드가 새로운 객체로 복제될 때 까지 재귀적으로 동작합니다.

JSON을 넘는 이득
-----------

JSON을 뛰어넘는 structured clone알고리즘의 여러가지 핵심 이득이 있습니다.

* Structured clones은 `RegExp` 객체들도 복사할 수 있습니다..
* Structured clones은 `Blob`, `File`와 `FileList` 객체들도 복사할 수 있습니다..
* Structured clones은 `ImageData` 객체들도 복사할 수 있습니다. 클론된`CanvasPixelArray` (en-US)크기(dimensions)는 원본과 match될 것이고 같은 픽셀 데이터의 복제를 가집니다.
* Structured clones은 참조들의 순환 그래프들을 포함한 객체들을 올바르게 복제할 수 있습니다.
structured clones과 함께 동작하지 않는 것들
--------------------------------

* `Error와` `Function` 객체들은 structured clone 알고리즘에 의해서 복제될 수 없습니다; 이것을 시도하면 `DATA_CLONE_ERR` exception을 던질 것 입니다.
* DOM node들을 클론하려고 시도하는것도 동일하게 `DATA_CLONE_ERR` exception을 던질 것 입니다.
* 객체들의 몇몇 파라미터들은 보존되지 않습니다:
    + `RegExp객체들의 liastIndex필드는 보존되지 않습니다.`
    + Property descriptors, setters, 그리고 getters (이것들과 비슷한 메타데이터같은 기능들)은 복제되지 않습니다. 예를들어서 한 객체가 프로퍼티 디스크립터를 사용하여 읽기전용으로 마크되어져 있다면 이것은 읽기-쓰기가 가능하도록 복제 될 것입니다. 이것이 디폴트 조건이기 때문입니다.
    + 프로토타입 체인은 거치지않고 복제되지 않습니다.
Supported types
---------------

| Object type | Notes |
| --- | --- |
| All primitive types | 하지만 심볼들은 포함하지 않습니다. |
| Boolean object |  |
| String object |  |
| Date |  |
| RegExp | lastIndex필드는 보존되지 않습니다. |
| `Blob` |  |
| `File` |  |
| `FileList` |  |
| ArrayBuffer |  |
| ArrayBufferView (en-US) | 이것은 기본적으로 int32Array나 기타같은 typed arrays의 모든것을 의미합니다. |
| `ImageData` |  |
| Array |  |
| Object | 이것은 그냥 plain객체들을 포함합니다.(e.g. 객체 리터럴) |
| Map |  |
| Set (en-US) |  |

또 다른 방법 : 깊은 복사(deep copy)
---------------------------

객체의 깊은 복사(deep copy)를 원한다면(모든 프로토타입 체인과 내포된 속성들 까지도), 또다른 접근방식을 사용해야만 합니다. 아래의 예제를 확인하세요.

```js
function clone(objectToBeCloned) {
  // Basis.
  if (!(objectToBeCloned instanceof Object)) {
    return objectToBeCloned;
  }

  var objectClone;

  // Filter out special objects.
  var Constructor = objectToBeCloned.constructor;
  switch (Constructor) {
    // Implement other special objects here.
    case RegExp:
      objectClone = new Constructor(objectToBeCloned);
      break;
    case Date:
      objectClone = new Constructor(objectToBeCloned.getTime());
      break;
    default:
      objectClone = new Constructor();
  }

  // Clone each property.
  for (var prop in objectToBeCloned) {
    objectClone[prop] = clone(objectToBeCloned[prop]);
  }

  return objectClone;
}
```

**참고:** 이 알고리즘은 실제로 `RegExp`, `Array`, 와 `Date`스페셜 객체들을 구현했습니다. 필요에 따라서 다른 특수한 케이스들을 구현할 수 있습니다.

See also
--------

* HTML5 Specification: Safe passing of structured data
* `window.history`
* `window.postMessage()`
* Web Workers
* Components.utils.cloneInto


Window: requestAnimationFrame() method - Web API

Window: requestAnimationFrame() method
======================================

**`window.requestAnimationFrame()`** 메서드는 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트 바로 전에 브라우저가 애니메이션을 업데이트할 지정된 함수를 호출하도록 요청합니다. 이 메서드는 리페인트 이전에 호출할 인수로 콜백을 받습니다.

**참고:** 다음 리페인트에서 다른 프레임을 애니메이션 적용할려면 콜백 루틴이 반드시 스스로 `requestAnimationFrame()`을 호출해야 합니다. `requestAnimationFrame()`은 하나의 장면입니다.

화면에 애니메이션을 업데이트할 준비가 될 때마다 이 메서드를 호출해야 합니다. 이는 브라우저가 다음 리페인트를 수행하기 전에 애니메이션 함수를 호출하도록 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 웹 브라우저에서는 W3C 권장사항에 따라 디스플레이 주사율과 일치됩니다. `requestAnimationFrame()`은 배터리 수명과 성능 향상을 위해 대부분의 브라우저에서 백그라운드 탭들이나 숨겨진 `<iframe>` (en-US)들이 실행될 때 중단됩니다.

콜백 메서드에는 단일 인수 `DOMHighResTimeStamp` (en-US)가 전달되어 현재 시간(시간 발생 (en-US)이후의 밀리초 수에 기반된)을 나타냅니다. `requestAnimationFrame()`에 의해 대기 중인 다수의 콜백이 한 프레임에서 실행되기 시작할 때, 각각의 콜백은 모든 이전 콜백의 작업량을 계산하는 동안 시간이 지나갔음에도 불구하고 동일한 타임스탬프를 받습니다(아래의 코드 예제에서는 오직 타임스태프가 변할 때에만 프레임에 애니메이션을 적용합니다. 즉, 첫번째 콜백에서만 적용됩니다). 이 타임스탬프는 밀리초 단위의 십진수이지만, 최소 정밀도는 1ms(1000 µs)입니다.

**경고:** 항상 프레임에서 얼마나 많은 애니메이션이 진행될 것인지 계산하기 위해 첫 번째 인수(혹은 현재 시간을 가질 수 있는 몇몇 다른 메서드)를 사용해야 합니다. **그렇지 않으면 높은 주사율에서 애니메이션이 빠르게 실행될 것입니다**.
 이를 수행하는 방법에 대해서는 아래 예제를 참고해주세요.

구문
--

```js
requestAnimationFrame(callback);
```

### 파라미터

`callback`

다음 리페인트를 위한 애니메이션을 업데이트할 때 호출할 함수. 콜백 함수에는 `requestAnimationFrame()`이 콜백 함수들의 실행을 시작할 시점을 나타내는 `performance.now()` (en-US) 에 의해 반환되는 것과 유사한 `DOMHighResTimeStamp` (en-US) 단일 인수가 전달됩니다.

### 반환 값

콜백 목록의 항목을 고유하게 식별하는 요청 id인 `long` 정수 값. 이것은 0이 아닌 값이지만, 그 값에 대해 어떠한 다른 추측을 할 수 없습니다. 이 값을 `window.cancelAnimationFrame()` 에 전달해 콜백 요청을 취소할 수 있습니다.

예시
--

 이 예제에서, 요소는 2초(2000 밀리초) 동안 애니메이션이 적용됩니다. 요소는 0.1px/ms 속도로 오른쪽으로 이동해서,
 그것의 상대적 위치(CSS 픽셀)는 `0.1 * elapsed`로 애니메이션의 시작 이후 경과된 시간(밀리초) 함수에서 계산될 수 있습니다. 요소의 최종 위치는 처음 위치에서 오른쪽으로 200px(`0.1 * 2000`) 이동한 위치입니다.

```js
const element = document.getElementById("some-element-you-want-to-animate");
let start, previousTimeStamp;
let done = false;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  if (previousTimeStamp !== timestamp) {
    // Math.min()은 여기서 요소가 정확히 200px에 멈추는지 확인하기 위해 사용됩니다
    const count = Math.min(0.1 \* elapsed, 200);
    element.style.transform = `translateX(${count}px)`;
    if (count === 200) done = true;
  }

  if (elapsed < 2000) {
    // 2초 이후에 애니메이션 종료
    previousTimeStamp = timestamp;
    if (!done) {
      window.requestAnimationFrame(step);
    }
  }
}

window.requestAnimationFrame(step);
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-animationframeprovider-requestanimationframe |

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

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

함께 보기
-----

* `Window.cancelAnimationFrame()`
* mozRequestAnimationFrame – 블로그 포스트
* requestAnimationFrame for smart animating - 블로그 포스트
* Animating with JavaScript: from setInterval to requestAnimationFrame - 블로그 포스트
* TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations
* Paul Irish: requestAnimationFrame API: now with sub-millisecond precision
* A polyfill


ServiceWorkerGlobalScope.skipWaiting() - Web API

ServiceWorkerGlobalScope.skipWaiting()
======================================

`ServiceWorkerGlobalScope` (en-US) 의 **`ServiceWorkerGlobalScope.skipWaiting()`** 메소드는 waiting 상태의 서비스 워커를 active 상태의 서비스 워커로 변경하도록 강제한다.

근본적인 서비스 워커에 대한 업데이트들이 현재의 클라이언트와 다른 모든 active 클라이언트들에게 즉시 적용되도록 하기 위해 `Clients.claim()` 과 이 메소드를 사용한다.

Syntax
------

```js
ServiceWorkerGlobalScope.skipWaiting().then(function () {
  //Do something
});
```

### Returns

`undefined` 로 즉시 resolve 되는 `Promise`

Example
-------

서비스 워커가 실행되는 동안 언제라도 `self.skipWaiting()` 는 호출될 수 있지만, 이것은 `waiting` 상태로 남아 있을 수도 있는 새롭게 설치된 서비스 워커가 있는 경우에만 영향을 줄 수 있다. 따라서, `InstallEvent` (en-US) 핸들러 내부에서 `self.skipWaiting()` 을 호출하는 것이 일반적이다.

다음 예시는 active 상태의 서비스 워커가 이미 존재하는지의 여부에 관계없이, 새로 설치된 서비스 워커가 `activating` 상태로 진행되도록 한다.

```js
self.addEventListener("install", function (event) {
  // skipWaiting()가 반환하는 promise는 안전하게 무시될 수 있다.
  self.skipWaiting();

  // 잠재적으로 event.waitUntil(); 내부에서
  // 서비스 워커 설치를 위해 필요한 다른 action 들을 수행하라.
});
```

명세서
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-skipwaiting |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Clients.claim()`
* `Promises`
* Using web workers (en-US)


ServiceWorkerGlobalScope.clients - Web API

ServiceWorkerGlobalScope.clients
================================

`ServiceWorkerGlobalScope` (en-US) 인터페이스의 **`clients`** 읽기 전용 속성은 서비스 워커와 관련된 `Clients` (en-US) 객체를 반환한다.

Syntax
------

```js
swClients = self.clients;
```

### Value

특정한 워커와 관련된 `Clients` (en-US) 객체.

명세서
---

| Specification |
| --- |
| Service Workers # service-worker-global-scope-clients |

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

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

See also
--------

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)


ServiceWorkerGlobalScope: notificationclick event - Web API

ServiceWorkerGlobalScope: notificationclick event
=================================================

`notificationclick` 이벤트는 `ServiceWorkerRegistration.showNotification()` (en-US) 에 의해 발생한 시스템 notification 이 클릭되었음을 나타내기 위해 발생된다.

|  | No |
| --- | --- |
| Cancelable | No |
| Interface | `NotificationEvent` (en-US) |
| Event handler | `onnotificationclick` |

Examples
--------

`addEventListener` 메소드 내에서 `notificationclick` 이벤트를 사용할 수 있다:

```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

또는 `onnotificationclick` 이벤트 핸들러 속성을 사용할 수 있다:

```js
self.onnotificationclick = function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
};
```

명세서
---

| Specification |
| --- |
| Notifications API Standard # activating-a-notification |
| Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclick |

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

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

See also
--------

* Service Worker API
* Notifications API


TreeWalker.currentNode - Web API

TreeWalker.currentNode
======================

**`TreeWalker.currentNode`** 속성은 `TreeWalker`가 현재 가리키고 있는 `Node` (en-US)를 나타낸다.

구문
--

```js
node = treeWalker.currentNode;
treeWalker.currentNode = node;
```

예제
--

```js
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  {
    acceptNode: function (node) {
      return NodeFilter.FILTER\_ACCEPT;
    },
  },
  false,
);
root = treeWalker.currentNode; // 첫번째 엘리먼트인 루트 엘리먼트!
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-treewalker-currentnode① |

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

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

같이 보기
-----

* `TreeWalker` 인터페이스


AbortSignal.aborted - Web API

AbortSignal.aborted
===================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`aborted`** 읽기 전용 프로퍼티는 신호가 통신하는 DOM 요청이 취소되었는지(`true`) 그렇지 않은지(`false`)를 나타내는 `Boolean`을 반환한다.

구문
--

```js
var isAborted = abortSignal.aborted;
```

### 값

`Boolean`예제
--

다음 스니펫에서는 새로운 `AbortController` 객체를 생성하고 `AbortSignal`를 얻는다(`signal` 프로퍼티에서 가능). 그 다음 `aborted` 프로퍼티를 사용해 신호가 취소되었는지 확인하고 콘솔로 적절한 로그를 전송한다.

```js
var controller = new AbortController();
var signal = controller.signal;

// ...

signal.aborted
  ? console.log("Request has been aborted")
  : console.log("Request not aborted");
```

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-aborted① |

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

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

See also
--------

* Fetch API


AudioNode.numberOfInputs - Web API

AudioNode.numberOfInputs
========================

`AudioNode` 인터페이스의 `numberOfInputs` 속성은 해당 노드에 공급되는 입력의 수를 반환합니다. 소스 노드는 `numberOfInputs` 속성의 값이 0인 노드로 정의됩니다.

구문
--

```js
var numInputs = audioNode.numberOfInputs;
```

### 값

integer ≥ 0.

예제
--

```js
const audioCtx = new AudioContext();

const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();

oscillator.connect(gainNode).connect(audioCtx.destination);

console.log(oscillator.numberOfInputs); // 0
console.log(gainNode.numberOfInputs); // 1
console.log(audioCtx.destination.numberOfInputs); // 1
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-numberofinputs |

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

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

같이 보기
-----

* Web Audio
API 사용하기


AudioNode.disconnect() - Web API

AudioNode.disconnect()
======================

`AudioNode` 인터페이스의 **`disconnect()`** 메서드는 하나 이상의 노드를 메서드가 호출된 노드로부터 연결 해제할 수 있게 합니다.

구문
--

```js
AudioNode.disconnect();

AudioNode.disconnect(output);

AudioNode.disconnect(destination);

AudioNode.disconnect(destination, output);

AudioNode.disconnect(destination, output, input);
```

### 반환 값

`undefined`### 매개변수

`disconnect()` 메서드의 몇 가지 버전이 있는데, 각 버전은 매개변수의 다른 조합을 받아 어떤 노드를 어디에서 연결을 끊을지 제어합니다. 만약 매개변수가 제공되지 않았다면, 나가는 모든 연결들이 연결 해제됩니다.

`destination` Optional

연결을 끊을 노드 혹은 노드들을 명시하는 `AudioNode` 또는 `AudioParam`. 만약 이 값이 `AudioNode` 라면, 하나의 노드가 연결 해제되고, 만약 선택적인 다른 매개변수가 있다면 (`output` 그리고/또는 `input`), 어떤 입력 그리고/또는 출력이 연결 해제되어야 하는지를 추가적으로 제한합니다. 만약 이 값이 `AudioParam` 이라면, 이 `AudioParam` 으로 향하는 연결이 제거되고, 이 계산된 파라미터에 대한 노드의 기여는 한 번 변화가 발생하고 나면 계속 0이 됩니다.

`output` Optional

현재 `AudioNode` 로부터 어떤 출력이 연결 해제될지를 기술하는 인덱스. 인덱스 숫자는 출력 채널의 수에 따라 정의됩니다 (오디오 채널을 참고해 보세요).

`input` Optional

명시된 목적지 `AudioNode`로 가는 어떤 입력이 연결 해제될지를 기술하는 인덱스. 인덱스 숫자는 입력 채널의 수에 따라 정의됩니다 (오디오 채널을 참고해 보세요).

### 예외

`IndexSizeError` `DOMException` (en-US)

만약 `input` 혹은 `output` 으로 명시된 값이 유효하지 않다면 발생되며, 존재하지 않거나 허용되는 범위 밖에 있는 노드를 나타냅니다.

`InvalidAccessError` `DOMException` (en-US)

`disconnect()` 가 호출된 노드가 명시된 `destination` 노드에 연결되어있지 않다면 발생됩니다.

예제
--

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

gainNode.disconnect();
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-disconnect |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioNode.connect() - Web API

AudioNode.connect()
===================

`AudioNode` 인터페이스의 `connect()` 메서드는 노드의 출력 중 하나를 목표에 연결할 수 있게 하는데, 이 목표는 다른 `AudioNode` 일 수도 있고 (이렇게 함으로써 사운드 데이터를 명시된 노드로 향하게 합니다) `AudioParam` 일 수도 있습니다 (이 경우 노드의 출력 데이터가 자동적으로 시간에 따라 그 파라미터의 값을 변화시키기 위해 사용됩니다).

구문
--

```js
var destinationNode = AudioNode.connect(destination, outputIndex, inputIndex);

AudioNode.connect(destination, outputIndex);
```

### 매개변수

`destination`

연결할 `AudioNode` 또는 `AudioParam`.

`outputIndex` Optional

현재 `AudioNode`의 어떤 출력이 목적지에 연결될 지 명시하는 인덱스. 인덱스 숫자는 출력 채널의 수에 따라 정의됩니다 (오디오 채널을 참고해 보세요). 주어진 출력을 주어진 입력에 단 한 번 연결할 수 있는 반면 (반복된 시도는 무시됩니다), `connect()` 를 반복적으로 호출함으로써 다수의 입력에 하나의 출력을 연결할 수 있습니다. 이는 팬 아웃을 가능케 합니다. 기본값은 0입니다.

`inputIndex` Optional

현재 `AudioNode`를 목적지의 어떤 입력에 연결할지를 기술하는 인덱스. 기본값은 0입니다. 인덱스 숫자는 입력 채널의 수에 따라 정의됩니다 (오디오 채널을 참고해 보세요). 한 `AudioNode`를 다른 `AudioNode`에 연결해, 차례로 연결되어 첫번째 `AudioNode`로 돌아오는 사이클을 만드는 것은 가능합니다.

### 반환 값

만약 목적지가 노드라면, `connect()` 는 목적지 `AudioNode` 객체에 대한 참조를 반환하며, 다수의 `connect()` 호출을 연쇄할 수 있게 합니다. 몇몇 브라우저에서, 이 인터페이스의 오래된 구현은 `undefined`를 반환합니다.

만약 목적지가 `AudioParam` 이라면, `connect()` 는 `undefined` 를 반환합니다.

### 예외

`IndexSizeError` `DOMException` (en-US)

만약 `outputIndex` 혹은 `inputIndex` 로 명시된 값이 존재하는 입력 혹은 출력에 일치하지 않는다면 발생됩니다.

`InvalidAccessError` `DOMException` (en-US)

만약 목적지 노드가 소스 노드로서 같은 오디오 컨텍스트의 일부가 아니라면 발생됩니다.

`NotSupportedError` `DOMException` (en-US)

만약 명시된 연결이 (오디오가 같은 노드들을 반복적으로 순환하는) 사이클을 형성하고 결과 파형이 같은 오디오 프레임을 무기한으로 생성해 멈추는 일을 방지하기 위한 `DelayNode` (en-US) 객체가 사이클에 없다면 발생됩니다. 또한 만약 목적지가 `AudioParam`일 때 `inputIndex` 매개변수가 사용된 경우 발생됩니다.

예제
--

### 오디오 입력에 연결하기

`connect()` 메서드의 가장 분명한 용도는 이후의 프로세싱을 위해 하나의 노드로부터 다른 노드의 오디오 입력에 오디오 출력을 보내는 것입니다. 예를 들어, `MediaElementAudioSourceNode` (en-US)으로부터, 즉 `<audio>` (en-US)와 같은 HTML 미디어 요소로부터 스피커에 오디오를 보내기 전에 노이즈를 줄이기 위해 `BiquadFilterNode`를 사용하여 구현된 밴드 패스 필터를 통해 오디오를 전송할 수 있습니다.

아래의 예제는 오실레이터를 생성하고, 오실레이터를 gain 노드에 연결해, gain 노드가 오실레이터 노드의 볼륨을 제어하도록 합니다.

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
```

### AudioParam 예제

이 예제에서, 우리는 낮은 주파수 값을 가진 `OscillatorNode` (en-US)를 사용해 `GainNode` (en-US)의 gain 값을 변화시킬 것입니다. 이 기법은 **LFO**에 의해 제어되는 파라미터로 알려져 있습니다.

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

// 소리를 만들기 위해 일반적인 오실레이터를 생성합니다
var oscillator = audioCtx.createOscillator();

// LFO (Low-frequency oscillator, 저주파 오실레이터) 로써 사용되고,
// 파라미터를 제어할 두 번째 오실레이터를 생성합니다
var lfo = audioCtx.createOscillator();

// 두 번째 오실레이터의 주파수를 낮은 수로 설정합니다
lfo.frequency.value = 2.0; // 2Hz: 초당 두 번의 진동

// gain AudioParam이 LFO에 의해 제어될 gain을 생성합니다
var gain = audioCtx.createGain();

// LFO를 gain AudioParam에 연결합니다. 이는 LFO의 값이 어떠한 오디오도
// 생성하지 않지만, gain의 값을 대신 변화시킬 것임을 의미합니다
lfo.connect(gain.gain);

// 오디오를 생성할 오실레이터를 gain에 연결합니다
oscillator.connect(gain);

// gain을 목적지에 연결해 소리가 나오게 합니다
gain.connect(audioCtx.destination);

// 오디오를 생성할 오실레이터를 시작시킵니다
oscillator.start();

// gain 값을 조정할 오실레이터를 시작시킵니다
lfo.start();
```

#### AudioParam 사용 일람

`AudioNode` 출력을 하나 이상의 `AudioParam`에 연결하는 것은 가능하고, 하나 이상의 AudioNode 출력을 하나의 `AudioParam`에 다수의 `connect()` 호출과 함께 연결하는 것은 가능합니다. 그러므로 팬 인과 팬 아웃이 지원됩니다.

`AudioParam`은 자신에게 연결된 모든 `AudioNode` 출력으로부터 렌더링된 오디오 데이터를 취하고 그 데이터를 다운 믹싱함으로써 모노로 변환합니다 (만약 데이터가 이미 모노가 아니라면). 다음으로, `AudioParam`은 그 데이터를 그러한 다른 출력들과, 고유한 파라미터 값과 함께 섞을 것입니다. (고유한 파라미터 값이란 `AudioParam`이 보통 어떠한 오디오 연결 없이 가지는 값이며, 이는 이 파라미터에 예정된 모든 타임라인 변화를 포함합니다.)

그러므로, `AudioParam`의 값을 중심 주파수로 설정함으로써 `AudioParam`이 변화할 범위를 선택하는 것은 가능하고, `AudioParam` 변화의 범위를 조정하기 위해 오디오 소스와 `AudioParam` 사이에서 `GainNode` (en-US)를 사용하는 것은 가능합니다.

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-connect |
| Web Audio API # dom-audionode-connect-destinationparam-output |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioNode.channelCount - Web API

AudioNode.channelCount
======================

`AudioNode` 인터페이스의 **`channelCount`** 속성은 노드의 모든 입력에 대해 연결을 업믹싱하거나 다운믹싱할 때 얼마나 많은 채널이 사용될 지를 결정하기 위해 사용되는 integer를 나타냅니다.

`channelCount` 의 사용법과 정밀한 정의는 `AudioNode.channelCountMode`의 값에 달려 있습니다.

* 만약 `channelCountMode` 값이 `max` 라면, channelCount는 무시됩니다.
* 만약 `channelCountMode` 값이 `clamped-max` 라면, channelCount는 최대 값으로서 사용됩니다.
* 만약 `channelCountMode` 값이 `explicit` 이라면, channelCount는 정확한 값으로서 사용됩니다.
구문
--

```js
var oscillator = audioCtx.createOscillator();
var channels = oscillator.channelCount;
```

### 값

integer.

예제
--

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.channelCount;
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-channelcount |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioNode.numberOfOutputs - Web API

AudioNode.numberOfOutputs
=========================

`AudioNode` 인터페이스의 `numberOfOutputs` 속성은 노드에서 나오는 출력의 수를 반환합니다. 목적지 노드 (예: `AudioDestinationNode`) 는 이 특성에 대해 0의 값을 가집니다.

구문
--

```js
var numOutputs = audioNode.numberOfOutputs;
```

### 값

integer ≥ 0.

예제
--

```js
const audioCtx = new AudioContext();

const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();

oscillator.connect(gainNode).connect(audioCtx.destination);

console.log(oscillator.numberOfOutputs); // 1
console.log(gainNode.numberOfOutputs); // 1
console.log(audioCtx.destination.numberOfOutputs); // 0
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-numberofoutputs |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioNode.channelCountMode - Web API

AudioNode.channelCountMode
==========================

`AudioNode` 인터페이스의 `channelCountMode` 프로퍼티는 노드의 입력과 출력 사이에서 채널들이 반드시 일치되어야만 하는 방법을 기술하는 열거형 값을 나타냅니다.

`channelCountMode` 의 가능한 값과 그 의미는 다음과 같습니다.

| 값 | 설명 | 다음의 `AudioNode` 자식들은 이것이 기본값입니다 |
| --- | --- | --- |
| `max` | 채널의 수는 모든 연결의 최대 채널의 수와 같습니다. 이 경우, `channelCount`는 무시되고 오직 업믹싱이 일어납니다. | `GainNode` (en-US), `DelayNode` (en-US),
 `ScriptProcessorNode` (en-US),
 `ChannelMergerNode` (en-US),
 `BiquadFilterNode`,
 `WaveShaperNode` (en-US) |
| `clamped-max` | 채널의 수는 모든 연결의 최대 채널 수와 같은데, `channelCount`의 값에 고정됩니다. | `PannerNode` (en-US), `ConvolverNode` (en-US),
 `DynamicsCompressorNode` (en-US) |
| `explicit` | 채널의 수는 `channelCount`의 값에 의해 정의됩니다. | `AudioDestinationNode`,
 `AnalyserNode`,
 `ChannelSplitterNode` (en-US) |

**참고:** 명세서의 구 버전에서는, `ChannelSplitterNode` (en-US)의 기본값은 max였습니다.

구문
--

```js
var oscillator = audioCtx.createOscillator();
oscillator.channelCountMode = "explicit";
```

### 값

channelCountMode를 나타내는 열거형 값.

예제
--

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.channelCountMode = "explicit";
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-channelcountmode |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioNode.channelInterpretation - Web API

AudioNode.channelInterpretation
===============================

`AudioNode` 인터페이스의 **`channelInterpretation`** 프로퍼티는 입력/출력 채널의 수가 다를 때 입력 채널이 출력 채널에 매핑되는 방법을 기술하는 열거형 값을 나타냅니다. 예를 들어, 이 설정은 모노 입력이 어떻게 스테레오 또는 5.1 채널 출력으로 업믹스될 것인지를 정의하거나, 어떻게 쿼드 채널 입력이 스테레오 또는 모노 출력으로 다운믹스될 것인지를 정의합니다.

이 프로퍼티에는 두 가지 옵션이 있습니다. `speakers` 와 `discrete` 입니다. 이 옵션들은 Web Audio API의 기본 개념 > 업믹싱과 다운믹싱에 기록되어 있습니다.

구문
--

```js
var oscillator = audioCtx.createOscillator();
oscillator.channelInterpretation = "discrete";
```

### 값

이 값들은 Web Audio API의 기본 개념 > 업믹싱과 다운믹싱에 기록되어 있습니다.

요약하자면,

`speakers`

일반적인 스피커 입력과 출력 설정 (모노, 스테레오, quad, 5.1) 의 조합에 대한 "표준" 매핑의 집합을 사용합니다. 예를 들어, 이 설정으로 모노 채널 입력은 스테레오 출력의 양 채널 모두에 출력될 것입니다.

`discrete`

입력 채널은 출력 채널에 순서대로 매핑됩니다. 만약 출력하는 더 많은 입력이 있다면, 추가적인 입력은 탈락됩니다. 만약 입력이 더 적다면 사용되지 않는 출력은 소리나지 않습니다.

예제
--

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;

var audioCtx = new AudioContext();

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.channelInterpretation = "discrete";
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-channelinterpretation |

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

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

같이 보기
-----

* Web Audio API 사용하기


AudioNode.context - Web API

AudioNode.context
=================

`AudioNode` 인터페이스의 읽기 전용 `context` 속성은 연관된 `BaseAudioContext`를 반환하는데, BaseAudioContext는 이 노드가 관여하고 있는 프로세싱 그래프를 나타내는 객체입니다.

구문
--

```js
var aContext = anAudioNode.context;
```

### 값

이 `AudioNode` 를 생성하기 위해 사용된 `AudioContext` 또는 `OfflineAudioContext` 객체.

예제
--

```js
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.connect(gainNode).connect(audioCtx.destination);

console.log(oscillator.context); // AudioContext
console.log(oscillator.context === audioCtx); // true
```

명세서
---

| Specification |
| --- |
| Web Audio API # dom-audionode-context |

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

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

같이 보기
-----

* Web Audio
API 사용하기


ServiceWorker.onstatechange - Web API

ServiceWorker.onstatechange
===========================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

`statechange` 타입의 이벤트가 발생될 때마다 호출되는 `EventListener` 속성. 기본적으로 `ServiceWorker.state` (en-US)가 변경되는 시점에 발생한다.

Syntax
------

```js
ServiceWorker.onstatechange = function(statechangeevent) { ... }
ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
```

Examples
--------

이 코드 조각은 service worker registration-events sample (live demo) 으로부터 가져온 것이다. 이 코드는 `ServiceWorker.state` (en-US)의 모든 변경 사항을 수신하고 그 값을 반환한다.

```js
var serviceWorker;
if (registration.installing) {
  serviceWorker = registration.installing;
  document.querySelector("#kind").textContent = "installing";
} else if (registration.waiting) {
  serviceWorker = registration.waiting;
  document.querySelector("#kind").textContent = "waiting";
} else if (registration.active) {
  serviceWorker = registration.active;
  document.querySelector("#kind").textContent = "active";
}

if (serviceWorker) {
  logState(serviceWorker.state);
  serviceWorker.addEventListener("statechange", function (e) {
    logState(e.target.state);
  });
}
```

`statechange` 가 발생할 때, 서비스워커의 참조들이 변화할 수 있으므로 주의하라. 예시:

```js
navigator.serviceWorker.register(..).then(function(swr) {
  swr.installing.state == "installing"
  swr.installing.onstatechange = function() {
    swr.installing == null;
    // 이 시점에서, swr.waiting 또는 swr.active는 true일 것이다. 이것은 statechange 이벤트가 대기 상태이기 때문이며,
    // 그동안 잠재 상태의 워커가 waiting 상태가 될 수도 있으며 가능한 경우에는 즉시 activated 될 것이다.
  }
})
```

명세서
---

| Specification |
| --- |
| Service Workers # dom-serviceworker-onstatechange |

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

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


Location.reload() - Web API

Location.reload()
=================

**`Location.reload()`** 메서드는 새로고침 버튼처럼 현재 리소스를 다시 불러옵니다.

새로고침은 `SECURITY_ERROR` `DOMException` (en-US)과 함께 거부당할 수 있습니다. 이는 `location.reload()`를 호출한 스크립트의 출처와 `Location` 객체를 소유한 문서의 출처가 다를 때 발생합니다. 더 자세한 정보는 동일 출처 정책 문서를 참고하세요.

구문
--

```js
location.reload();
```

명세
--

| Specification |
| --- |
| HTML Standard # dom-location-reload-dev |

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

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

같이 보기
-----

* 메서드가 속한 `Location` 인터페이스.
* 비슷한 메서드: `Location.assign()` (en-US), `Location.replace()`.


location: replace() method - Web API

location: replace() method
==========================

`Location` 인터페이스의 **`replace()`** 메서드는 현재 리소스를 제공된 URL에 있는 리소스로 바꿔줍니다. `replace()`를 사용한 후에는 현재 페이지가 세션 `History`에 저장되지 않으므로 사용자가 뒤로가기 버튼을 사용하여 해당 페이지로 이동할 수 없다는 점에서 `assign()` (en-US) 메서드와 차이점이 있습니다.

보안 정책 위반으로 인해 할당을 수행할 수 없는 경우, `SECURITY_ERROR` 유형의 `DOMException` (en-US)이 발생합니다. 이것은 메서드를 호출하는 스크립트의 원본이 `Location` 객체에 의해 원래 설명된 페이지의 원본과 다를 때 발생합니다. 스크립트가 다른 도메인에 호스팅된 경우에 주로 발생합니다.

제공된 URL이 유효하지 않은 경우, `SYNTAX_ERROR` 유형의 `DOMException` (en-US)이 발생합니다.

문법
--

```js
replace(url)
```

### 매개변수

`url`

탐색할 페이지의 URL이 포함된 문자열

### 반환 값

없음 (`undefined`).

예제
--

```js
// 이 페이지를 대체하여 Location.reload 문서로 이동합니다.
window.location.replace(
  "https://developer.mozilla.org/en-US/docs/Web/API/Location.reload",
);
```

명세서
---

| Specification |
| --- |
| HTML Standard # dom-location-replace-dev |

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

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

같이 보기
-----

* 해당 메서드가 속한 `Location` 인터페이스
* 비슷한 메서드: `Location.assign()` (en-US)와 `Location.reload()`.


RTCPeerConnection.onicecandidate - Web API

RTCPeerConnection.onicecandidate
================================

`RTCPeerConnection` 속성의 **`onicecandidate`** 는 `RTCPeerConnection` (en-US) 인스턴스에서 `icecandidate` 이벤트 발생시에 호출 하려는 함수를 지정합니다. 이 이벤트는 로컬 ICE 에이전트가 signaling 서버를 통해 원격 피어에게 메세지를 전달 할 필요가 있을때 마다 발생합니다. 그리고 ICE 에이전트가 signaling에 사용되는 기술에 대한 구체사항을 모르더라도 원격 피어와의 네고시에이션을 수행하도록 도와줍니다. 어떤 메세징 기술을 선택하던간에, 이 메소드를 사용해서 원격 피어에 ICE candidate를 전달하는 과정을 간단하게 구현 할 수 있습니다.

Syntax
------

```js
RTCPeerConnection.onicecandidate = eventHandler;
```

### 값

`onicecandidate` 속성은 `icecandidate` 이벤트를 나타내는 `RTCPeerConnectionIceEvent` (en-US) 객체를 입력 값으로 받는 함수로 설정되어야합니다. 여기에 설정되는 함수는 ICE candidate를 signaling 서버를 통해 원격 피어에게 전달해야합니다. 이때, ICE candidate의 SDP는 이벤트의 `candidate` 속성에서 확인 할 수 있습니다. 만약 이벤트의 `candidate` 속성이 `null` 로 지정되어있다면, ICE 수집과정이 완료됩니다. 이 메세지는 원격 피어에 전달되지 않아야합니다. 이때, 연결의 `iceGatheringState` 또한 `complete`로 바뀌게 됩니다. ICE 수집 상태를 명시적으로 감시할 필요는 없습니다. 다만, signaling의 종료를 감지해야 한다면, ICE 네고시에이션이 complete 상태로 변한것을 알려주는 `icegatheringstatechange` 이벤트를 감시하면 됩니다.

예시
--

아래는 Signaling and video calling 문서의 코드를 기반으로 원격 피어에게 ICE candidate를 전달하는 `icecandidate` 이벤트에 대한 핸들러를 설정합니다.

```js
pc.onicecandidate = function (event) {
  if (event.candidate) {
    // event.candidate가 존재하면 원격 유저에게 candidate를 전달합니다.
  } else {
    // 모든 ICE candidate가 원격 유저에게 전달된 조건에서 실행됩니다.
    // candidate = null
  }
};
```

위에서 알 수 있듯이, 이벤트의 `candidate` 속성이 `null`이면 네고시에이션의 종료가 감지됩니다.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-onicecandidate |

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

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

참조
--

* `icecandidate` 이벤트 및 이벤트의 타입인 `RTCPeerConnectionIceEvent` (en-US).


RTCPeerConnection() - Web API

RTCPeerConnection()
===================

**`RTCPeerConnection()`** 생성자는 로컬 기기와 원격 피어 간의 연결을 나타내는 `RTCPeerConnection` (en-US) 객체를 새로 만들어 반환합니다.

구문
--

```js
pc = new RTCPeerConnection([configuration]);
```

### 매개변수

`configuration` Optional

새로운 연결을 설정하는 옵션 객체입니다.

`bundlePolicy` Optional

원격 피어가 SDP BUNDLE 표준과 호환되지 않을 때 어떻게 candidate의 네고시에이션을 처리 할 것인지를 정의합니다.

가능한 값은 다음 열거형 값 중 하나로, 기본 값은 `balanced`입니다.

`balanced`

 The ICE agent initially creates one `RTCDtlsTransport` (en-US)
 for each type of content added: audio, video, and data channels.
 If the remote endpoint is not BUNDLE-aware,
 then each of these DTLS transports handles all the communication for one type of data.

`max-compat`

 The ICE agent initially creates one `RTCDtlsTransport` (en-US) per media track
 and a separate one for data channels.
 If the remote endpoint is not BUNDLE-aware,
 everything is negotiated on these separate DTLS transports.

`max-bundle`

 The ICE agent initially creates only a single `RTCDtlsTransport` (en-US)
 to carry all of the `RTCPeerConnection` (en-US)'s data.
 If the remote endpoint is not BUNDLE-aware,
 then only a single track will be negotiated and the rest ignored.

`certificates` Optional

연결 인증에 사용할 `RTCCertificate` (en-US)를 담은 `Array`입니다. 지정하지 않을 경우 `RTCPeerConnection` (en-US) 인스턴스 각각에 대해 인증서가 자동으로 생성됩니다. 주어진 연결에 대해 하나의 인증서만 사용되지만, 다양한 알고리즘을 사용하는 여러 인증서를 제공하면 특정 상황에서의 연결 성공률을 높일 수 있습니다. 아래의 인증서 사용하기에서 더 많은 정보를 확인하세요.

**참고:** 이 옵션은 처음 지정한 이후 변경할 수 없습니다. 인증서를 설정한 후엔 모든 `RTCPeerConnection.setConfiguration()`이 무시됩니다.

`iceCandidatePoolSize` Optional

ICE candidate 풀의 크기를 지정하는 부호 없는 16비트 정수 값입니다. 기본 값은 0으로 candidate 를 미리 가져오지 않을 것임을 나타냅니다. 연결 시도 전부터 ICE 에이전트가 ICE candidate를 가져올 수 있도록 허용하면 `RTCPeerConnection.setLocalDescription()` 호출 시점에 이미 candidate를 조사할 수 있으므로 특정 상황에서 연결 속도가 빨라질 수 있습니다.

**참고:** ICE candidate 풀의 크기를 변경하면 ICE 수집이 시작할 수 있습니다.

`iceServers` Optional

ICE 에이전트가 사용할 수 있는 서버(보통 STUN/TURN)를 설명하는 `RTCIceServer` (en-US) 객체의 배열입니다. 지정하지 않을 경우 STUN/TURN 서버를 사용하지 않고 연결 시도를 하므로 연결이 로컬 피어로 제한됩니다.

`iceTransportPolicy` Optional

현재 ICE 트랜스포트 정책입니다. 지정하지 않을 경우 기본 값은 `all`로, 모든 candidate를 고려합니다. 가능한 값은 다음과 같습니다.

`"all"`

모든 ICE candidate를 고려합니다.

`"relay"`

IP 주소가 중개 중인, 예컨대 STUN 또는 TURN 서버를 통해 전송 중인 ICE candidate만 고려합니다.

`peerIdentity` Optional

`RTCPeerConnection` (en-US)의 대상 피어 아이덴티티를 나타내는 `DOMString`입니다. 기본 값은 `null`입니다. 이 값을 지정한 경우 `RTCPeerConnection`은 주어진 이름으로 인증에 성공해야 원격 피어로 연결을 시도합니다.

`rtcpMuxPolicy` Optional

non-multiplexed RTCP를 지원하기 위해 ICE 수집 중 사용할 RTCP mux 정책입니다. 가능한 값은 다음과 같습니다.

`negotiate`

 Instructs the ICE agent to gather both RTP and RTCP candidates.
 If the remote peer can multiplex RTCP,
 then RTCP candidates are multiplexed atop the corresponding RTP candidates.
 Otherwise, both the RTP and RTCP candidates are returned, separately.

`require`

 Tells the ICE agent to gather ICE candidates for only RTP,
 and to multiplex RTCP atop them.
 If the remote peer doesn't support RTCP multiplexing,
 then session negotiation fails.
 This is the default value.

### 반환 값

`configuration`이 지정된 경우 그에 맞게 구성한, 그렇지 않은 경우 기본값 구성을 이용한 `RTCPeerConnection` (en-US) 객체입니다.

### 인증서 사용하기

 When you wish to provide your own certificates for use by an
 `RTCPeerConnection` (en-US) instead of having the `RTCPeerConnection`
 generate them automatically, you do so by calling the static
 `RTCPeerConnection.generateCertificate()` function.

 The `certificates` property's value cannot be changed once it's first
 specified. If it's included in the configuration passed into a call to a connection's
 `setConfiguration()`, it is ignored.

 This attribute supports providing multiple certificates because even though a given
 DTLS connection uses only one certificate, providing multiple certificates allows
 support for multiple encryption algorithms. The implementation of
 `RTCPeerConnection` will choose which certificate to use based on the
 algorithms it and the remote peer support, as determined during DTLS handshake.

 If you don't provide certificates, new ones are generated automatically. One obvious
 benefit to providing your own is identity key continuity—if you use the same certificate
 for subsequent calls, the remote peer can tell you're the same caller. This also avoids
 the cost of generating new keys.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection |

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

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

참고
--

* Signaling and video calling
* WebRTC architecture overview (en-US)
* Lifetime of a WebRTC session (en-US)
* `RTCPeerConnection` (en-US)


RTCPeerConnection.ontrack - Web API

RTCPeerConnection.ontrack
=========================

`RTCPeerConnection` (en-US) 속성인 \*\*`ontrack`\*\*은 `RTCPeerConnection` (en-US)에 트랙이 등록됨을 알려주는 `track`가 발생하면 호출되는 함수를 지정하는 `event handler`입니다.

이 함수는 `RTCTrackEvent` (en-US) 타입의 이벤트 객체를 입력 인자로 받습니다. 해당 이벤트는 신규로 받아지는 `MediaStreamTrack`가 생성되고 연결의 리시버 세트에 추가된 `RTCRtpReceiver` (en-US)객체와 연관되면 전송됩니다.

Syntax
------

```js
RTCPeerConnection.ontrack = eventHandler;
```

### 값

`ontrack`을 함수로 지정해서 신규 트랙에 대해 설명하고 어떻게 사용 될지를 알려주는 `RTCTrackEvent` (en-US) 객체를 입력 인자로 받도록 하십시오. 이 정보에는 신규 트랙을 나타내는 `MediaStreamTrack` 객체, `RTCRtpReceiver` (en-US)와`RTCRtpTransceiver` (en-US), 그리고 트랙이 어느 스트림에 해당하는지를 알려주는 `MediaStream` (en-US)의 리스트 객체를 포함합니다.

예시
--

아래의 예시는 Signaling and video calling 문서에 나온 코드의 일부입니다. 이 코드는 들어오는 트랙을 `<video>`에 연결해서 해당 비디오를 보여줄 수 있도록 합니다.

```js
pc.ontrack = function (event) {
  document.getElementById("received\_video").srcObject = event.streams[0];
  document.getElementById("hangup-button").disabled = false;
};
```

첫 줄에 나온 `ontrack` 이벤트 핸들러는 들어오는 트랙의 첫 스트림을 가져다가 `srcObject` 속성에 지정합니다. 이렇게 함으로써 비디오의 스트림을 해당 요소에 연결하고, 유저에게 보여 줄 수 있게됩니다. 두 번째줄에서는 "통화 종료" 버튼을 활성화하여 유저가 통화를 종료 할 수 있도록 해줍니다.

명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # event-track |

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

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

참조
--

* The `track` event and its type, `RTCTrackEvent` (en-US).


RTCPeerConnection.getTransceivers() - Web API

RTCPeerConnection.getTransceivers()
===================================

`RTCPeerConnection` (en-US) 인터페이스의 **`getTransceivers()`** 메소드는 연결에서 데이터 전송 및 수신에 사용되는 `RTCRtpTransceiver` (en-US) 객체의 리스트를 반환합니다.

Syntax
------

```js
transceiverList = RTCPeerConnection.getTransceivers();
```

### 매개변수

없음.

### 반환 값

`RTCPeerConnection`에 대한 모든 미디어의 전송/수신을 관리하는 트랜시버를 나타내는 `RTCRtpTransceiver` (en-US) 객체의 배열입니다. 리스트의 순서는 트랜시버가 연결에 추가된 순서대로 정렬되어있습니다.

예시
--

아래 코드는 `RTCPeerConnection`와 연관된 모든 트랜시버를 중지시킵니다.

```js
pc.getTransceivers.forEach((transceiver) => {
  transceiver.stop();
});
```

명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-gettranseceivers |

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

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

참조
--

* WebRTC API
* Signaling and video calling
* `RTCPeerConnection.addTransceiver()` (en-US)
* `Array.forEach()`


RTCPeerConnection.restartIce() - Web API

RTCPeerConnection.restartIce()
==============================

WebRTC API의 `RTCPeerConnection` (en-US) 인터페이스에서는 **`restartIce()`** 메소드를 제공해서 연결의 양쪽에서 ICE candidate의 재수집 요청을 간단하게 할 수 있게 만들어줍니다.

`restartIce()`가 반환을 한 뒤에는, offer가 시그널링 메커니즘을 통해 전달되고, 원격 피어가 받은 offer를 description으로 설정을 하게 됩니다.이 과정이 완료되면, `createOffer()` (en-US)에 대한 다음 호출로 반환된 offer가 로컬 피어 (로컬로 설정이 된 경우)와 원격 피어에서 ICE 재시작을 발생시키도록 설정됩니다.

`restartIce()`는 `RTCPeerConnection`에 대한 `negotiationneeded` (en-US) 이벤트를 발생시켜서 어플리케이션이 신호 채널을 통해서 협상을 수행하도록 합니다.

만약 협상이 롤백 현상이나 수신받은 offer가 이미 협상 중으로 인해 실패하게되면, `RTCPeerConnection` (en-US)가 ICE 재시작 요청을 했다는 것을 자동으로 기억합니다. 다음번에 연결의 `signalingState` (en-US)가 `stable`로 바뀌게되면, 연결 인터페이스가 `negotiationneeded` (en-US) 이벤트를 발생시킵니다. 이 과정은 ICE 재시작 과정이 온전히 완료될 때까지 반복됩니다.

Syntax
------

```js
RTCPeerConnection.restartIce();
```

### 매개변수

없음.

### 반환 값

`undefined`.

`createOffer()` (en-US)를 사용해서 만들어진 다음 offer가 신호 메커니즘을 통해 원격 유저에게 전달이 되면, ICE 재시작을 시작하도록 만듭니다. ICE를 재시작하게되면 기본적으로 ICE가 초기화되고, 새로운 증명서를 사용해서 신규 candidate를 생성합니다. 기존에 존재하던 미디어 전송/수신은 이 과정동안에는 방해받지 않습니다.

ICE 재시작의 작동원리를 좀 더 자세히 알고 싶다면, ICE restart (en-US)와 RFC 5245, 섹션 9.1.1.1: ICE specification를 참고하십시오.

예시
--

아래의 예제는 `iceconnectionstatechange` (en-US) 이벤트에 대한 핸들러입니다. 이 핸들러는 ICE를 재시작하여 `failed` 상태로의 전환을 관리합니다.

```js
pc.addEventListener("iceconnectionstatechange", (event) => {
  if (pc.iceConnectionState === "failed") {
    /\* possibly reconfigure the connection in some way here \*/
    /\* then request ICE restart \*/
    pc.restartIce();
  }
});
```

위의 코드를 사용하여 ICE 협상 중 `failed` 상태로 전환되면 코드가 정상적으로 재협상 되어야 하기 때문에 `negotiationneeded` (en-US) 이벤트가 발생합니다. 그러나, `restartIce()`를 호출했기 때문에 `negotiationneeded`에 대한 핸들러에서 발생하는 `createOffer()` (en-US) 호출은 일반적으로 수행되는 재협상이 아니라 ICE 재시작을 발생시킵니다.

명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-restartice |

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

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

참조
--

* WebRTC API
* Lifetime of a WebRTC session (en-US)
* Signaling and video calling


RTCPeerConnection.getConfiguration() - Web API

RTCPeerConnection.getConfiguration()
====================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.getConfiguration()`** 메소드는 호출 된 `RTCPeerConnection` (en-US)의 현재 설정을 알려주는 `RTCConfiguration` 객체를 반환합니다.

여기서 반환되는 설정 값 은 가장 최근에 적용했던 `setConfiguration()` 혹은 `setConfiguration()`가 호출 되지 않았다면, `RTCPeerConnection`가 구성되면서 생긴 설정입니다. 이 설정은 연결에 의해 사용되는 ICE 서버의 리스트, 전송 정책에 관한 정보, 그리고 식별 정보를 포함합니다.

Syntax
------

```js
var configuration = RTCPeerConnection.getConfiguration();
```

### 매개변수

이 메소드는 입력 변수를 받지 않습니다.

### 반환 값

`RTCPeerConnection` (en-US)의 현재 설정을 알려주는 `RTCConfiguration` 객체입니다.

예시
--

아래의 예제는 활성화된 연결에서 이미 사용 중인 인증서가 없다면, 신규 인증서를 추가하는 작업입니다.

```js
let configuration = myPeerConnection.getConfiguration();

if (
  configuration.certificates != undefined &&
  !configuration.certificates.length
) {
  RTCPeerConnection.generateCertificate({
    name: "RSASSA-PKCS1-v1\_5",
    hash: "SHA-256",
    modulusLength: 2048,
    publicExponent: new Uint8Array([1, 0, 1]),
  }).then(function (cert) {
    configuration.certificates = [cert];
    myPeerConnection.setConfiguration(configuration);
  });
}
```

위의 예제에서는 `RTCPeerConnection` (en-US)의 현재 설정을 가져 온 다음에, 인증서가 존재하는지 확인하기 위해 (1) 설정에 `certificates`값이 포함되어 있는지, (2) 길이가 0인지를 확인합니다.

만약 인증서가 존재하지 않으면, `RTCPeerConnection.generateCertificate()`가 호출되어 신규 인증서를 만들어냅니다. 여기에 fulfillment 핸들러를 제공해서 새로 만들어진 인증서를 포함하는 배열을 현재 설정에 추가하고, `setConfiguration()`에 전달해서 연결에 인증서를 추가합니다.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-getconfiguration |

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

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

참조
--

* `RTCPeerConnection.setConfiguration()`
* `RTCConfiguration`
* `RTCPeerConnection` (en-US)


RTCPeerConnection.createAnswer() - Web API

RTCPeerConnection.createAnswer()
================================

`RTCPeerConnection` (en-US) 인터페이스의 **`createAnswer()`** 메소드는 WebRTC 연결 중 발생하는 offer/answer 네고시에이션에서 원격 유저로부터 받은 offer에 대한 SDP answer를 생성합니다. 이 answer는 세션이 이미 부착된 미디어, 브라우저에서 지원하는 코덱 및 옵션, 그리고 이미 수집된 ICE candidate에 대한 정보를 담고 잇습니다. Answer는 반환 된 `Promise`에 전달되고, 그 다음에는 네고시에이션 과정을 계속 진행하기 위해서 offer의 소스에게 전달되야합니다.

Syntax
------

```js
aPromise = RTCPeerConnection.createAnswer([options]);

RTCPeerConnection.createAnswer(successCallback, failureCallback[, options]);
```

### 매개 변수

`options` Optional

Answer를 커스터마이즈 할 수 있는 옵션을 설정하는 객체입니다. 설정 가능한 옵션은 `RTCAnswerOptions` (en-US) 딕셔너리에 기반합니다.

### 더 이상 사용되지 않는 매개 변수

이전 버전의 문서에서는 이 함수를 콜백 기반으로 사용하도록 되어있습니다. 콜백 기반 함수는 이제 더 이상 사용되지 않으며, **사용하지 않는 것을 권장**합니다. 이미 사용 중이라면, `Promise` 버전인 `createAnswer()`를 사용하도록 코드를 업데이트 하십시오. 이전 버전의 코드를 업데이트 하는 것을 쉽게 하기 위해 고안된 `createAnswer()`의 특정 변수에 대해 아래에서 설명합니다.

`successCallback`
지원이 중단되었습니다

신규 생성된 answer를 설명하는 단일 `RTCSessionDescription` (en-US) 객체에 전달되는 `RTCSessionDescriptionCallback` 입니다.

`failureCallback`
지원이 중단되었습니다

왜 answer를 생성하는 요청이 실패했는지를 설명해주는 단일 `DOMException` (en-US) 객체에 전달되는 `RTCPeerConnectionErrorCallback` 입니다.

`options` Optional

Answer를 위해 요청된 옵션을 제공하는 `RTCOfferOptions` (en-US) 객체입니다.

### 예외처리

`NotReadableError`

아이덴티티 제공자가 아이덴티티 주장을 제공 할 수 없음을 알려줍니다.

`OperationError`

SDP 생성이 어떤 이유로 실패했음을 알려줍니다. 이는 일반적인 failure catch-all exception 입니다.

### 반환 값

다른 유저에게 전달되는 SDP answer를 가진 `RTCSessionDescriptionInit` 딕셔너리에 준수하는 객체와 함께 호출되는 fulfillment 핸들러인 `Promise` 입니다.

예시
--

아래는 Signaling and video calling 문서에서 나오는 코드의 일부입니다. 이 코드는 시그널링 채널을 통해 다른 유저에게 offer는 전달하는 메세지를 다루는 핸들러에서 나옵니다.

**참고:** 주의 할 점은 이것이 시그널링 과정의 일부이며, 전송계층 구현에 대한 세부사항은 전적으로 개발자에게 달려있다는 것 입니다. 여기서는 WebSocket (en-US) 연결을 사용해서 다른 유저에게 "video-answer" 값이 있는 `type` 필드 및 offer를 보낸 장치에게 전달 할 answer를 담은 JSON 메세지를 보냅니다. 프로미스 fulfillment 핸들러의 다른 모든 항목들과 함께 `sendToServer()`함수로 전달되는 객체의 내용을 어떻게 할 지는 개발자의 디자인에 달려잇습니다.

```js
pc.createAnswer()
  .then(function (answer) {
    return pc.setLocalDescription(answer);
  })
  .then(function () {
    // Send the answer to the remote peer through the signaling server.
  })
  .catch(handleGetUserMediaError);
```

위의 예제는 `RTCPeerConnection` (en-US)가 신규 answer를 만들고 반환하도록 요청합니다. 프로미스 핸들러에 반환된 answer는 `setLocalDescription()` 호출에 의해 연결의 로컬 엔드에 대한 description으로 설정됩니다.

이 과정이 성공하면, answer는 적당한 아무 프로토콜을 사용해서 시그널링 서버에 전달됩니다. 그리고 `Promise.catch()` (en-US)는 에러를 잡아내고 처리하기 위해 사용됩니다.

Handling the invitation를 확인해서 전체 코드를 확인해보십시오. 이 문서를 보면 시그널링 과정 및 answer가 어떻게 작동하는지를 이해 할 수 있습니다.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-createanswer |

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

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


RTCPeerConnection.currentRemoteDescription - Web API

RTCPeerConnection.currentRemoteDescription
==========================================

읽기 속성인 `RTCPeerConnection.currentRemoteDescription`은 마지막 `RTCPeerConnection` (en-US) 이후 가장 최근에 원격 유저와의 네고시에이션 및 연결을 성공적으로 마친 연결의 원격 엔드 포인트를 알려주는 `RTCSessionDescription` (en-US) 객체를 반환합니다. 추가적으로 이 속성은 description에 의해 표현되는 마지막 offer 및 answer가 처음 시작되면 ICE 에이전트에 의해 생성이 되었을 수도 있는 모든 ICE candidate들의 리스트를 포함합니다.

`currentRemoteDescription`를 바꾸기 위해서는, `RTCPeerConnection.setRemoteDescription()` (en-US)를 호출해서 이 값이 설정되도록 만들어주는 연속된 이벤트를 활성화하십시오. 왜 바꾸는 것이 바로 적용이 안되는지 및 어떻게 작동하는지 더 자세히 알고 싶다면, Pending and current descriptions (en-US) 를 참조하십시오.

**참고:** `RTCPeerConnection.remoteDescription` (en-US)와 다르게, 이 값은 연결의 로컬 엔드 포인트에 대한 실제 현재 상태를 보여줍니다. `remoteDescription`은 연결이 현재 어느 상태로 바뀌는지에 대한 설명도 명시 할 수 있습니다.

Syntax
------

```js
sessionDescription = RTCPeerConnection.currentRemoteDescription;
```

### 반환 값

설정이 되어있다면, 연결의 원격 엔드포인트에 대한 현재 설명을 반환합니다. 설정되어있지않으면, 이 값은 `null`입니다.

예시
--

아래 예제는 `currentRemoteDescription` 를 확인하고 객체의 `type` 및 `sdp` 필드를 경고로 띄워줍니다.

```js
const pc = new RTCPeerConnection();
// ...
const sd = pc.currentRemoteDescription;
if (sd) {
  alert(`Local session: type='${sd.type}'; sdp description='${sd.sdp}'`);
} else {
  alert("No local session yet.");
}
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-currentremotedesc |

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

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

참조
--

* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.remoteDescription` (en-US)
* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.remoteDescription` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.currentRemoteDescription`
* WebRTC


RTCPeerConnection.localDescription - Web API

RTCPeerConnection.localDescription
==================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

읽기 속성인 `RTCPeerConnection.localDescription`는 연결의 로컬 엔드에 대한 세션을 설명하는 `RTCSessionDescription` (en-US)를 반환합니다. 아직 설정이 안되어있다면, **null** 입니다.

Syntax
------

```js
const sessionDescription = peerConnection.localDescription;
```

기본적으로 반환 값은 해당 속성이 `null`이 아닐 때에만 `RTCPeerConnection.pendingLocalDescription` (en-US)의 값입니다. 그렇지 않은 경우에는 `RTCPeerConnection.currentLocalDescription`의 값이 반환됩니다. 이 알고리즘 및 사용하는 이유에 대한 자세한 설명은 Pending and current descriptions (en-US)를 참조하십시오.

예시
--

아래의 예시에서는 `localDescription`를 확인하고, `RTCSessionDescription` (en-US) 객체의 타입과 sdp필드를 담고있는 경고를 띄웁니다.

```js
const pc = new RTCPeerConnection();
// ...
const sd = pc.localDescription;
if (sd) {
  alert(`Local session: type='${sd.type}'; sdp description='${sd.sdp}'`);
} else {
  alert("No local session yet.");
}
```

명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-localdescription |

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

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

참조
--

* `RTCPeerConnection.setLocalDescription()`, `RTCPeerConnection.pendingLocalDescription` (en-US), `RTCPeerConnection.currentLocalDescription`
* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.remoteDescription` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.currentRemoteDescription`
* WebRTC (en-US)


RTCPeerConnection.close() - Web API

RTCPeerConnection.close()
=========================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.close()`** 메소드로 피어 연결을 종료합니다.

Syntax
------

```js
RTCPeerConnection.close();
```

*이 메소드는 입력 패러미터가 없으며, 반환 값도 없습니다.*

이 메소드를 호출하게되면, 모든 진행 중인 ICE 프로세싱 및 활성화된 스트림을 종료하고, `RTCPeerConnection`의 ICE 에이전트를 종료합니다. 이 방법으로 ICE 에이전트에 의해 사용되는 리소스들 (TURN 허가 포함) 을 해제시킵니다. 모든 `RTCRtpSender` (en-US) 객체들은 이 메소드가 반환되면 정지됩니다. (아직 종료 중인 과정에 있을 수도 있습니다만, 사실상 정지됩니다.)

이 메소드가 반환되면, `RTCPeerConnection.signalingState` (en-US)에 의해 반환된 signaling 상태가 `closed`로 됩니다.

같은 원격 유저와의 새로운 연결 생성을 시도하기전에 이전에 존재하던 `RTCPeerConnection` (en-US)의 모든 참조 값들을 `delete`하십시오. 삭제되지 않은 참조 값들이 브라우저에서 오류를 초래 할 수 있습니다.

예시
--

```js
var pc = new RTCPeerConnection();
var dc = pc.createDataChannel("my channel");

dc.onmessage = function (event) {
  console.log("received: " + event.data);
  pc.close(); // 첫 메세지를 받으면, 연결을 종료
};

dc.onopen = function () {
  console.log("datachannel open");
};

dc.onclose = function () {
  console.log("datachannel close");
};
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-close |

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

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

참조
--

* WebRTC (en-US)
* `RTCPeerConnection` (en-US)
* `RTCPeerConnection.signalingState` (en-US)


RTCPeerConnection.canTrickleIceCandidates - Web API

RTCPeerConnection.canTrickleIceCandidates
=========================================

읽기 속성인 **`RTCPeerConnection` (en-US)** 속성의 **`canTrickleIceCandidates`** 는 원격유저가 trickled ICE candidates를 승인 할 수 있는지의 여부를 알려주는 `Boolean`을 반환합니다.

**ICE trickling** 은 초기 offer 혹은 answer를 다른 유저에게 이미 전달을 했음에도 계속해서 candidate를 보내는 과정을 뜻합니다.

이 속성은 `RTCPeerConnection.setRemoteDescription()` (en-US)가 호출된 후에만 설정됩니다. Signaling 프로토콜이 trickling 지원을 감지하는 방법을 제공해서 이 속성에 의존 할 필요가 없이 하는 것이 가장 좋은 방법입니다. WebRTC 브라우저는 항상 trickle ICE를 지원하게 되어있습니다. 하지만 몇몇 경우에 trickling이 지원이 되지 않거나 애초에 지원하는지를 알 수 없다면, 이 속성의 값이 이상한지 확인하고, 또한 초기 offer를 생성하고 전달하기 이전에 `iceGatheringState`의 값이 `"completed"`로 바뀌기전까지 기다릴 수 있습니다. 이러한 방식으로 offer에 모든 candidate들이 포함되도록 만들 수 있습니다.

Syntax
------

```js
var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
```

### 값

`Boolean`는 원격 유저가 trickled ICE candidate를 수용 할 수 있으면 `true` 값이고, 그렇지 않으면 `false` 값 입니다. 이미 원격 유저가 생성되었으면, 이 값은 `null` 입니다.

**참고:** **참조:** 이 속성의 값은 로컬 피어가 `RTCPeerConnection.setRemoteDescription()` (en-US)를 호출하게 되면 결정됩니다.

여기에서 제공된 정보를 사용해서 ICE agent가 원격 유저가 trickled ICE candidate를 지원하는지에 대한 여부를 결정해줍니다.

예시
--

```js
var pc = new RTCPeerConnection();
// The following code might be used to handle an offer from a peer when
// it isn't known whether it supports trickle ICE.
pc.setRemoteDescription(remoteOffer)
  .then(\_ => pc.createAnswer())
  .then(answer => pc.setLocalDescription(answer))
  .then(\_ =>
    if (pc.canTrickleIceCandidates) {
      return pc.localDescription;
    }
    return new Promise(r => {
      pc.addEventListener('icegatheringstatechange', e => {
        if (e.target.iceGatheringState === 'complete') {
          r(pc.localDescription);
        }
      });
    });
  })
  .then(answer => sendAnswerToPeer(answer)) // signaling message
  .catch(e => handleError(e));

pc.addEventListener('icecandidate', e => {
  if (pc.canTrickleIceCandidates) {
    sendCandidateToPeer(e.candidate); // signaling message
  }
});
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-cantrickleicecandidates |

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

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

참조
--

* WebRTC (en-US)
* `RTCPeerConnection.addIceCandidate()`
* Lifetime of a WebRTC session (en-US)


RTCPeerConnection.generateCertificate() - Web API

RTCPeerConnection.generateCertificate()
=======================================

`RTCPeerConnection` (en-US) 인터페이스의 **`generateCertificate()`** 메소드는 X.509 인증서와 해당하는 개인 키를 생성하고 저장합니다. 그리고 접근이 가능한 `RTCCertificate` (en-US)를 반환합니다.

Syntax
------

```js
var cert = RTCPeerConnection.generateCertificate(keygenAlgorithm);
```

### 매개변수

`keygenAlgorithm`

키를 생성하는데 사용하는 알고리즘을 식별하는 `DOMString`입니다.

**참고:** `RTCPeerConnection.generateCertificate()` 은 정적인 메소드로, 따라서 인스턴스가 아닌 `RTCPeerConnection` 인터페이스에서 항상 호출됩니다.

### 반환 값

`RTCCertificate` (en-US) 객체에 대한 참조 값입니다.

### 예제

```js
RTCPeerConnection.generateCertificate({
  name: "RSASSA-PKCS1-v1\_5",
  hash: "SHA-256",
  modulusLength: 2048,
  publicExponent: new Uint8Array([1, 0, 1]),
}).then(function (cert) {
  var pc = new RTCPeerConnection({ certificates: [cert] });
});
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-generatecertificate |

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

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

참조
--

* Using Service Workers (en-US)
* `Cache`
* `WorkerGlobalScope.caches` (en-US)


RTCPeerConnection.setLocalDescription() - Web API

RTCPeerConnection.setLocalDescription()
=======================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.setLocalDescription()`** 메소드는 연결 인터페이스와 관련이 있는 로컬 설명 (local description)을 변경합니다. 로컬 설명은 미디어 형식을 포함하는 연결의 로컬 엔드에 대한 속성을 명시합니다.

이 메소드는 세션 설명 (session description)을 단일 매개변수로 가지며, 설명이 비동기적으로 변하게되면 fulfilled되는 `Promise`를 반환합니다.

연결이 이미 되어있는데 `setLocalDescription()`가 호출된다면, 이는 재협상이 진행 중이라는 뜻입니다 (아마도 네트워크 환경이 바뀐 것에 대응하기 위함일 것입니다). 두명의 피어가 설정 값에 모두 동의해야지만 설명이 교환되기 때문에, `setLocalDescription()`의 호출로 전송된 설명은 즉시 사용되지 못합니다. 대신 협상이 완료되는 순간까지는 기존 연결 설정대로 작동 하게 됩니다. 그러다가 협상이 완료된 다음에서야 신규 설정이 사용됩니다.

Syntax
------

```js
aPromise = RTCPeerConnection.setLocalDescription(sessionDescription);

pc.setLocalDescription(sessionDescription, successCallback, errorCallback);
```

### 매개 변수

`sessionDescription`

연결의 로컬 엔드에 적용시킬 설정 값을 지정하는 `RTCSessionDescriptionInit` 혹은 `RTCSessionDescription` (en-US)입니다.

#### 세션 설명 매개 변수에 대한 설명

`sessionDescription` 매개 변수는 일단 기술적으로는 `RTCSessionDescriptionInit`의 타입입니다. 하지만, `RTCSessionDescription` (en-US)가 `RTCSessionDescriptionInit`와 구별이 불가능하도록 직렬화 (serialize)하기 때문에, `RTCSessionDescription`를 전달 할 수도 있습니다. 이 말은 코드가 다음과 같이 간단해질 수 있다는 뜻입니다:

```js
myPeerConnection.createOffer().then(function (offer) {
  return myPeerConnection.setLocalDescription(new RTCSessionDescription(offer));
});
```

위 코드를 아래와 같이 간단하게 사용이 가능해집니다:

```js
myPeerConnection.createOffer().then(myPeerConnection.setLocalDescription);
```

이러한 이유로, `RTCSessionDescription()` (en-US) 생성자는 더 이상 사용되지 않습니다.

### 반환 값

`RTCPeerConnection.localDescription`의 값이 성공적으로 바뀌거나 혹은 변환이 불가능한 경우 거절되면 fulfill 되는 `Promise`입니다. 거절되는 예로는 명시한 설명이 연결에 존재하는 하나 혹은 양쪽 모두의 피어들과 호환이 불가능하면 발생하기도 합니다. 참고로 프로미스의 fulfillment 핸들러는 입력 매개 변수를 받지 않습니다.

**참고:** 설명을 바꾸는 과정은 변경이 실패해도 연결 상태를 잃지 않게 보장하도록 WebRTC 레이어에 의해서 처리되는 중간 단계를 거칩니다. 이 과정에 대한 자세한 설명은 Pending and current descriptions (en-US)를 참조하십시오.

### 지원이 중단된 매개 변수

이전 버전의 문서에서는 콜백 기반의 함수를 찾을 수 있습니다. 콜백 함수는 지원이 중단되었고, 추후에 삭제 될 예정이기 때문에 **사용하지 않도록 강력히 권장**하고 있습니다. 이미 콜백 함수를 사용 중이라면, `Promise` 기반인 `setLocalDescription()`를 대신 사용하도록 업데이트 해야합니다. 기존 코드 업데이트에 도움을 주기 위해, 아래에서는 이전 버전의 `setLocalDescription()`에 대한 매개 변수를 설명합니다.

`successCallback`
지원이 중단되었습니다

설명 값이 성공적으로 설정되면 입력 매개 변수 없이 호출되는 JavaScript `Function`입니다. 여기서, offer가 시그널링 서버를 통해서 원격 유저에게 전송 될 수 있습니다.

`errorCallback`
지원이 중단되었습니다

설명 값이 설정이 불가능할 때에 호출되어 `RTCPeerConnectionErrorCallback` 서명을 확인하는 함수입니다. 여기에는 요청이 왜 실패했는지를 설명하는 `DOMException` (en-US) 객체를 전달합니다.

지원이 중단된 위의 메소드는 실제 설정이 바뀌기 전에 바로 반환합니다. 성공하면 `successCallback`가 호출되고, 실패하면 `errorCallback`가 호출됩니다.

### 지원이 중단된 예외처리

지원이 중단된 콜백버전의 `setLocalDescription()`를 사용하게되면 아래와 같은 예외들이 발 생 할 수도 있습니다:

`InvalidStateError`
지원이 중단되었습니다

연결의 `signalingState` (en-US)가 `"closed"` 상태고, 이는 연결이 현재 열린 상태가 아니여서 협상이 발생할 수 없다는 뜻입니다.

`InvalidSessionDescriptionError`
지원이 중단되었습니다

`sessionDescription`에 의해 명시된 `RTCSessionDescription` (en-US) 매개 변수가 유효하지 않음을 알려줍니다.

예시
--

아래의 예시에서는, `negotiationneeded` 이벤트에 대한 핸들러를 구현하였습니다:

```js
function handleNegotiationNeededEvent() {
  pc.createOffer()
    .then(function (offer) {
      return pc.setLocalDescription(offer);
    })
    .then(function () {
      // Send the offer to the remote peer using the signaling server
    })
    .catch(reportError);
}
```

이 함수는 `createOffer()` (en-US)를 호출하여 offer를 생성하면서 시작됩니다. 이 과정이 성공하면, `setLocalDescription()`를 호출합니다. 프로미스에 대한 fulfillment 핸들러는 시그널링 서버를 사용해서 다른 유저에게 신규 생성된 offer를 전송할 수 있게 됩니다.

명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-setlocaldescription |

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

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

참조
--

* WebRTC API


RTCPeerConnection: icegatheringstatechange event - Web API

RTCPeerConnection: icegatheringstatechange event
================================================

**`icegatheringstatechange`** 이벤트는 ICE candidate 수집 과정이 변경되면, `RTCPeerConnection` (en-US)의 이벤트 핸들러인 `onicegatheringstatechange`로 전달됩니다. 이는 연결의 `iceGatheringState` 속성이 변경되었다는 것을 뜻합니다.

ICE가 처음 연결 candidate들을 수집하게되면 값이 `new`에서 `gathering`으로 바뀌게 되고, 이는 연결에 대한 candidate 설정들을 수집하는 과정 중에 있다는 뜻입니다. 값이 complete가 되면, RTCPeerConnection을 구성하는 모든 트랜스포트들이 ICE candidate 수집을 완료한 상태입니다.

| Bubbles | No |
| --- | --- |
| 취소가능여부 | No |
| 인터페이스 | `Event` |
| 이벤트 핸들러 | `onicegatheringstatechange` |

**참고:** ICE candidate 수집 과정이 완료되었는지는 `icegatheringstatechange`이벤트와 `iceGatheringState`의 값이 `complete`로 바뀌는 것을 확인하면 알 수 있습니다. 하지만, 더 쉬운 방법으로는 `icecandidate` 이벤트에 대한 핸들러가 `candidate` 속성의 값이 null로 변하는 시점을 체크하도록 할 수 있습니다. 이 속성이 `null` 값으로 바뀌었다는 것은 즉 모든 candidate 수집이 완료되었다는 뜻입니다.

예시
--

아래 예제는 `icegatheringstatechange` 이벤트에대한 핸들러를 생성합니다.

```js
pc.onicegatheringstatechange = (ev) => {
  let connection = ev.target;

  switch (connection.iceGatheringState) {
    case "gathering":
      /\* candidate 수집 과정 시작 \*/
      break;
    case "complete":
      /\* candidate 수집 완료 \*/
      break;
  }
};
```

아래처럼 `addEventListener()`을 사용해서 `icegatheringstatechange` 이벤트에 대한 변경을 감지하는 리스너를 추가 할 수 있습니다.

```js
pc.addEventListener(
  "icegatheringstatechange",
  (ev) => {
    let connection = ev.target;

    switch (connection.iceGatheringState) {
      case "gathering":
        /\* candidate 수집 과정 시작 \*/
        break;
      case "complete":
        /\* candidate 수집 완료 \*/
        break;
    }
  },
  false,
);
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-onicegatheringstatechange |

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

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

참조
--

* WebRTC API
* Signaling and video calling
* WebRTC connectivity (en-US)
* Lifetime of a WebRTC session (en-US)


RTCPeerConnection.ondatachannel - Web API

RTCPeerConnection.ondatachannel
===============================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.ondatachannel`** 속성은 `RTCPeerConnection` (en-US)에서 발생하는 `datachannel` 이벤트에 의해 호출되는 `event handler`입니다. 이 속성에는 함수를 정의하게됩니다. `RTCDataChannelEvent`의 한 종류인 이 이벤트는 원격 유저가 `createDataChannel()`를 호출해서 연결에 `RTCDataChannel` (en-US)가 추가되었을 때, 전달됩니다.

이 이벤트를 수신하게되는 시점에서는 `RTCDataChannel` (en-US)가 아직 열리지 않았을 수 있습니다. 사용하기 전에 꼭 신규 `RTCDataChannel`에 `"open"`이벤트가 발생하는 것을 확인하십시오.

Syntax
------

```js
RTCPeerConnection.ondatachannel = function;
```

### 값

이 속성에 지정하는 함수는 단일 패러미터를 입력 인자로 받습니다. `channel` 속성에 생성된 `RTCDataChannel` (en-US)를 제공하는 `RTCDataChannelEvent` 입니다.

예시
--

```js
pc.ondatachannel = function (ev) {
  console.log("Data channel is created!");
  ev.channel.onopen = function () {
    console.log("Data channel is open and ready to be used.");
  };
};
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-ondatachannel |

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

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

참조
--

* The `datachannel` event and its type, `RTCDataChannelEvent`.
* `RTCPeerConnection.createDataChannel()`
* A simple RTCDataChannel sample (en-US)


RTCPeerConnection.currentLocalDescription - Web API

RTCPeerConnection.currentLocalDescription
=========================================

읽기 속성인 **`RTCPeerConnection.currentLocalDescription`** 은 가장 최근에 `RTCPeerConnection` (en-US)가 성공적으로 네고시에이션을 마치고 원격 피어와 연결된, 연결인터페이스의 로컬 엔드를 설명하는 `RTCSessionDescription` (en-US) 객체를 반환합니다. 이외에도 설명에 의해 offer 혹은 answer가 처음으로 인스턴스화 되면 ICE 에이전트에 의해 이미 생성됬을수도 있는 ICE candidate 목록이 포함되어 있습니다.

`currentLocalDescription`을 바꾸기 위해서는, 이 값을 설정하도록 연쇄 이벤트를 작동시키는 `RTCPeerConnection.setLocalDescription()`를 호출하십시오. 이 연쇄 이벤트가 어떻게 값을 바꾸고, 왜 즉시 값이 바뀌지 않는지에 대해 궁금하다면, Pending and current descriptions (en-US)를 살펴보십시오.

**참고:** `RTCPeerConnection.localDescription`와 다르게, `currentLocalDescription`는 연결 인터페이스의 로컬 엔드에 대한 현재 상태를 나타내는 값 입니다. `localDescription`은 연결 인터페이스가 현재 어떤 상태로 전환 중인지를 설명하는 값을 명시 할 수 있습니다.

Syntax
------

```js
sessionDescription = RTCPeerConnection.currentLocalDescription;
```

### 반환 값

연결이 설정된 경우, 연결의 로컬 엔드에 대한 가장 최신 설명입니다. 성공적으로 연결이 설정이 되지 않았다면, 반환 값은 `null` 입니다.

예시
--

이 예시는 `currentLocalDescription`을 확인하고, `RTCSessionDescription` (en-US) 객체의 `type` 및 `sdp` 필드를 담고 있는 경고 메세지를 출력합니다.

```js
var pc = new RTCPeerConnection();
…
var sd = pc.currentLocalDescription;
if (sd) {
  alert("Local session: type='" +
        sd.type + "'; sdp description='" +
        sd.sdp + "'");
}
else {
  alert("No local session yet.");
}
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-currentlocaldesc |

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

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

**참고:** `currentLocalDescription`와 `pendingLocalDescription` (en-US)기능은 최근에 추가 되었습니다. 따라서, 이 기능을 지원하지 않는 브라우저에서는 `localDescription`를 사용하십시오.

참조
--

* `RTCPeerConnection.setLocalDescription()`, `RTCPeerConnection.pendingLocalDescription` (en-US), `RTCPeerConnection.localDescription`
* `RTCPeerConnection.setRemoteDescription()` (en-US), `RTCPeerConnection.remoteDescription` (en-US), `RTCPeerConnection.pendingRemoteDescription` (en-US), `RTCPeerConnection.currentRemoteDescription`
* WebRTC


RTCPeerConnection.onconnectionstatechange - Web API

RTCPeerConnection.onconnectionstatechange
=========================================

**`RTCPeerConnection.onconnectionstatechange`** 속성에 `RTCPeerConnection` (en-US) 인스턴스에서 발생하는 `connectionstatechange` 이벤트를 처리하기 위해 호출되는 `event handler`를 정의하게됩니다. 이 이벤트는 연결의 상태 집합체가 변할 때마다 발생합니다. 이 상태 집합체는 연결에 의해 사용되는 각각의 네트워크 전송 상태들의 묶음입니다.

Syntax
------

```js
RTCPeerConnection.onconnectionstatechange = eventHandler;
```

### 값

`RTCPeerConnection` (en-US)에서 `connectionstatechange` 이벤트가 생길 때, 브라우저에 의해 호출되는 함수입니다. 이 함수는 `Event` 타입의 객체인 단일 패러미터를 입력인자로 받습니다. 해당 이벤트 객체는 특별한 정보를 담고 있지는 않습니다. 새로운 상태를 확인하려면 피어 연결의 `connectionState`에 해당하는 값을 살펴보십시오.

예시
--

```js
pc.onconnectionstatechange = function (event) {
  switch (pc.connectionState) {
    case "connected":
      // The connection has become fully connected
      break;
    case "disconnected":
    case "failed":
      // One or more transports has terminated unexpectedly or in an error
      break;
    case "closed":
      // The connection has been closed
      break;
  }
};
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-onconnectionstatechange |

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

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

참조
--

* `connectionstatechange` 이벤트와 이 이벤트의 타입인 `Event`을 참조하십시오.


RTCPeerConnection.setConfiguration() - Web API

RTCPeerConnection.setConfiguration()
====================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.setConfiguration()`** 메소드는 `RTCConfiguration`객체에 명시한 값을 가지고 `RTCPeerConnection` (en-US)의 현재 설정을 지정합니다. 이 메소드를 사용해서 연결에서 사용되는 ICE 서버와 전송 정책을 변경 할 수 있습니다.

가장 보편적으로 쓰이는 방법은 사용하려는 ICE 서버 값으로 교체해주는것 입니다. (엄청 자주 사용되는 케이스는 아닐 것입니다) 이 방법을 수행하는 두 가지 시나리오는 아래와 같습니다:

* `RTCPeerConnection` (en-US)가 ICE 서버를 명시하지 않고 시작된 경우. 예를 들어, `RTCPeerConnection()` 생성자를 매개변수 없이 호출하게되면, 개발자가 직접 `setConfiguration()`를 호출해서 ICE 협상 시작 전에 ICE 서버를 추가해줘야 합니다.
* 연결의 재협상이 필요하거나, 어떤 이유로 인해서 다른 종류의 ICE 서버를 사용해야하는 경우. 예를 들어, 사용자가 새로운 지역으로 이동을 했기 때문에 지역 ICE 서버를 바꿔야하는 경우입니다. 이런 경우에는, `setConfiguration()`를 호출해서 신규 지역 ICE 서버로 바꿔주고, ICE restart (en-US)을 시작하게됩니다.

**참고:** 연결이 이미 설정이 되어있다면, 식별 정보는 변경 할 수 없습니다.

Syntax
------

```js
RTCPeerConnection.setConfiguration(configuration);
```

### 매개변수

`configuration`

설정을 할 수 있는 옵션들을 제공해주는 `RTCConfiguration` 객체입니다. 변경사항은 계속해서 추가되지 않습니다. 대신에, 신규 값이 기존의 값은 완전히 대체하게 됩니다.

### 예외처리

`InvalidAccessError`

`configuration.iceServers`에 정의한 하나 혹은 여러개의 URL이 TURN 서버 입니다. 하지만, 로그인을 위한 정보가 완전히 제공되지 않아서 발생하는 에러입니 (`RTCIceServer.username` (en-US) 혹은 `RTCIceServer.credentials`의 값이 없다는 뜻). 이로인해 서버에 로그인을 성공적으로 할 수 없게 됩니다.

`InvalidModificationError`

`configuration`에서 변경되는 식별 정보를 포함하고 있지만, 연결을 구성하면서 이미 식별 정보를 지정했기 때문에 발생하는 에러입니다. 이 에러는 `configuration.peerIdentity` 혹은 `configuration.certificates`가 설정이 되어있고, 이 값들이 현재 설정 값과 다르기 때문에 발생합니다.

`InvalidStateError`

`RTCPeerConnection` (en-US)이 닫혀있어서 발생하는 에러입니다.

`SyntaxError`

`configuration.iceServers`에 제공된 하나 혹은 여러개의 URL 리스트가 유효하지 않아서 발생하는 에러입니다.

예시
--

아래의 예시에서는 ICE 재시작이 필요한 것을 확인하고, 다른 ICE 서버를 사용해서 협상이 이루어지도록 합니다.

```js
var restartConfig = {
  iceServers: [
    {
      urls: "turn:asia.myturnserver.net",
      username: "allie@oopcode.com",
      credential: "topsecretpassword",
    },
  ],
};

myPeerConnection.setConfiguration(restartConfig);

myPeerConnection
  .createOffer({ iceRestart: true })
  .then(function (offer) {
    return myPeerConnection.setLocalDescription(offer);
  })
  .then(function () {
    // send the offer to the other peer using the signaling server
  })
  .catch(reportError);
```

먼저, 신규 `RTCConfiguration`가 신규 ICE 서버와 인증 정보를 명시한 `restartConfig`를 가지도록 생성됩니다. 그리고 설정한 `RTCConfiguration`가 `setConfiguration()`에 전달됩니다. `iceRestart` 옵션의 값을 `true`로 지정하고, `createOffer()` (en-US)을 호출해서 ICE 협상이 재시작됩니다. 이후에, 반환받은 offer를 local description으로 설정하고, 다른 피어에게 offer를 전달하는 것과 같이 일반적으로 진행되도록 처리합니다.

명세서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-setconfiguration |

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

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

참조
--

* `RTCPeerConnection.getConfiguration()`
* `RTCConfiguration`
* `RTCPeerConnection` (en-US)


RTCPeerConnection.setIdentityProvider() - Web API

RTCPeerConnection.setIdentityProvider()
=======================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.setIdentityProvider()`** 메소드는 이름, 통신에 사용된 프로토콜 (옵션), 유저 이름 (옵션)으로 구성된 세 가지 매개변수에 식별 제공자 (Identity Provider, IdP)를 지정합니다. IdP는 주장 (assertion)이 필요한 순간에만 사용 될 것입니다.

`signalingState` (en-US)가 `"closed"`로 지정되어있다면, `InvalidStateError` 에러가 발생합니다.

Syntax
------

```js
pc.setIdentityProvider(domainname [, protocol] [, username]);
```

*이 메소드는 반환 값이 존재하지 않습니다.*

### 매개변수

*domainname*

IdP가 존재하는 도메인 이름을 나타내는 `DOMString`입니다.

*protocol* Optional

IdP와 통신하기위해 사용된 프로토콜을 나타내는 `DOMString`입니다. 디폴트 값은 `"default"`로 설정되어있고, IdP가 감청하게되는 URL를 결정하는데에 사용됩니다.

*username* Optional

IdP와 연관된 유저 이름을 나타내는 `DOMString`입니다.

예시
--

```js
var pc = new PeerConnection();

pc.setIdentityAssertion("developer.mozilla.org");
```

사양서
---

| Specification |
| --- |
| Identity for WebRTC 1.0 # dom-rtcpeerconnection-setidentityprovider |

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

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

참조
--

* WebRTC (en-US)


RTCPeerConnection.iceGatheringState - Web API

RTCPeerConnection.iceGatheringState
===================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

읽기 속성인 **`RTCPeerConnection.iceGatheringState`** 는 연결 인터페이스의 ICE 수집 상태를 알려주는 `RTCIceGatheringState`타입의 Enum을 반환합니다. 이 속성을 활용하면, ICE candidate 수집 과정이 언제 종료되는지 감지 할 수 있습니다.

`icegatheringstatechange`타입의 이벤트 감시를 통해 이 속성 값이 언제 변하는지를 확인 할 수 있습니다.

Syntax
------

```js
var state = RTCPeerConnection.iceGatheringState;
```

### 값

반환되는 값은 `RTCIceGatheringState`타입의 Enum입니다.

### RTCIceGatheringState enum섹션 (en-US)

`RTCPeerConnection.iceGatheringState` 속성을 사용하게되면 반환되는 `RTCIceGatheringState` enum은 현재의 ICE 수집 상태를 반영하여 알려주는 문자열 상수입니다. `icegatheringstatechange` 타입의 이벤트를 감시해서 이 값이 언제 변하는지 확인 할 수 있습니다.

| 상수명 | 설명 |
| --- | --- |
| `"new"` | 피어 연결이 새로 생성되었지만, 아직 네트워킹은 시작되지 않은 상태 |
| `"gathering"` | ICE 에이전트가 연결을 위한 ICE candidate를 수집하는 과정에 있음을 알려주는 상태 |
| `"complete"` | ICE 에이전트가 candidate 수집을 완료한 상태. 새로운 인터페이스가 추가되거나, 신규 ICE 서버가 추가와 같이 신규 ICE candidate를 수집해야하는 상황이 오면, 상태가 `complete`에서 `gathering`으로 다시 바뀝니다. |

예시
--

```js
var pc = new RTCPeerConnection();
var state = pc.iceGatheringState;
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-ice-gathering-state |

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

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

참조
--

* `icegatheringstatechange`
* WebRTC (en-US)


RTCPeerConnection.getIdentityAssertion() - Web API

RTCPeerConnection.getIdentityAssertion()
========================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.getIdentityAssertion()`** 메소드는 식별 주장의 수집을 시작합니다. 이 메소드는 `signalingState` (en-US)가 `"closed"` 상태가 아닐 때에만 유효합니다.

이 메소드는 즉시 반환하게됩니다. 식별 주장이 생성 될 수 없다면, 객체에 `idpassertionerror`가 전달됩니다.

이는 자동으로 수행되기 때문에, 어플리케이션에서 `RTCPeerConnection`을 직접 다룰 일은 없습니다.명시적인 호출로 필요한 것이 무엇인지 정도만 알 수 있습니다.

Syntax
------

```js
pc.getIdentityAssertion();
```

*이 메소드에는 매개변수 혹은 반환 값이 없습니다.*

예시
--

```js
var pc = new PeerConnection();

pc.getIdentityAssertion(); // Not mandatory, but we know that we will need it in the future.
```

명세
--

| Specification |
| --- |
| Identity for WebRTC 1.0 # dom-rtcpeerconnection-getidentityassertion |

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

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

참조
--

* WebRTC (en-US)


RTCPeerConnection.createDataChannel() - Web API

RTCPeerConnection.createDataChannel()
=====================================

`RTCPeerConnection` (en-US) 인터페이스의 **`createDataChannel()`** 메소드는 어떤 형식의 데이터든 송신 할 수 있도록 원격 유저와 연결하는 신규 채널을 생성합니다.이 방법은 이미지, 파일 전송, 문자 채팅, 게임 패킷 업데이트 등과 같은 백채널 컨텐츠에 유용하게 사용 가능합니다.

연결 인터페이스에 신규 채널이 처음 추가되면, 재협상 과정이 `negotiationneeded` 이벤트를 전달하여 시작됩니다.

Syntax
------

```js
dataChannel = RTCPeerConnection.createDataChannel(label[, options]);
```

### 매개변수

`label`

사람이 읽을 수 있는 채널 이름입니다. 이름의 문자열은 65,535 바이트 보다 작아야합니다.

`options` Optional

`RTCDataChannelInit` dictionary가 데이터 채널에 대한 설정 옵션들을 제공합니다.

### RTCDataChannelInit 딕셔너리

`RTCDataChannelInit` 딕셔너리는 개발자의 필요에 따라 데이터 채널을 설정 할 때 객체로 전달되는 옵션 매개변수로 전달되는 객체에 포함 될 수 있는 다음의 필드들을 제공합니다:

`ordered` Optional

이 옵션은 `RTCDataChannel` (en-US)에 전달된 메세지가 보내진 순서대로 상대방에게 도착해야하는지 (`true`) 아니면 순서가 달라도 허용 (`false`)이 되는지를 결정합니다. **기본 값: `true`.**

**`maxPacketLifeTime` Optional**

불안정한 모드에서 메세지를 전송 할 때 최대 몇 초 동안 전송을 시도 할 것인지를 결정하는 옵션입니다. 이 값은 16bit의 부호가 없는 정수형이지만, 각 유저 에이전트는 적절하다고 판단되는 최대 값으로 지정 할 수 있습니다. (**주의**: **`maxPacketLifeTime`** 혹은 **`maxRetransmits`** 옵션 둘 중 하나만 사용해야함.) **기본 값: `null`.**

`maxRetransmits` Optional

불안정한 모드에서 메세지 전송이 실패하면 최대 몇 번을 재시도 할 것인지를 결정하는 옵션입니다. 이 값은 16bit의 부호가 없는 정수형이지만, 각 유저 에이전트는 적절하다고 판단되는 최대 값으로 지정 할 수 있습니다. (**주의**: **`maxPacketLifeTime`** 혹은 **`maxRetransmits`** 옵션 둘 중 하나만 사용해야함.) **기본 값: `null`.**

`protocol` Optional

`RTCDataChannel` (en-US)에 사용되는 서브 프로토콜의 이름입니다. 존재하지 않으면 이 옵션은 빈 문자열 (`""`)입니다. **기본 값: 빈 문자열, `""`.** 이 문자열은 65,535 바이트 보다 작아야합니다.

`negotiated` Optional

기본 값일 경우 (`false`), 데이터채널은 밴드의 대역 내에서 협상됩니다. 이 때, 한 쪽은 `createDataChannel`를 호출하고, 다른 쪽에서는 `RTCDataChannelEvent` 이벤트를 `ondatachannel` `EventHandler`를 사용해서 감청합니다. 반대로 `true` 일 경우, 밴드의 대역 범위를 벗어나도 재협상이 가능해집니다. 이 때에는 양쪽에서 합의된 id를 가진 `createDataChannel`을 호출하게됩니다. **기본 값: `false`.**

`id` Optional

채널에 대한 16bit 숫자형 ID입니다. 허용되는 값은 0에서 65534 사이입니다. 이 값을 지정하지 않으면, 유저 에이전트가 알아서 ID를 지정해줍니다.

**참고:** `RTCDataChannelInit` 딕셔너리를 사용해서 설정이 가능한 옵션들은 `RTCDataChannel` (en-US) 인터페이스에서 설정이 가능한 특성들의 서브 셋을 뜻합니다.

### 반환 값

지정한 `label`을 가지고, `options`에 지정한 옵션들을 사용하여 설정된 신규 `RTCDataChannel` (en-US) 객체입니다. 각 매개변수들을 지정하지 않으면, 기본 값으로 설정되어 생성됩니다.

### 예외처리

`InvalidStateError`

`RTCPeerConnection` (en-US)가 닫혀있음을 뜻합니다.

`TypeError`

이 에러는 여러 상황에서 발생이 가능합니다:\* label 혹은 프로토콜 문자열이 너무 길어서 발생합니다. 해당 문자열은 65,535바이트보다 작아야합니다.

* `id`가 65535여서 발생합니다. 이 값은 유효한 부호가 없는 16bit 이지만, `id` 값으로 허용되는 범위를 벗어나게됩니다. (0-65534 까지만 허용)

`SyntaxError`

`maxPacketLifeTime` 와 `maxRetransmits` 옵션에 모두 값이 지정되면 발생합니다. 둘 중 하나에만 non-`null` 값을 지정해야 합니다.

`ResourceInUse`

`id` 값이 지정되었지만, 다른 `RTCDataChannel` (en-US)에서 이미 같은 이름을 사용 중이면 발생합니다.

`OperationError`

지정한 `id`가 이미 사용 중이거나, `id`가 지정되지 않았다면 모든 ID들이 사용 중이기 때문에 WebRTC 레이어에서 자동으로 `id` 생성이 불가능 할 때 발생합니다.

예시
--

아래의 예제에서는 어떻게 데이터 채널을 생성하고, 생성 할 때 메세지를 전송하고 수신하는 이벤트인 `open`와 `message`에대한 핸들러를 설정합니다. (onnegotiationneeded는 이미 설정이 되었다고 가정하고 간소화한 예입니다.)

```js
// Offerer side

var pc = new RTCPeerConnection(options);
var channel = pc.createDataChannel("chat");
channel.onopen = function (event) {
  channel.send("Hi you!");
};
channel.onmessage = function (event) {
  console.log(event.data);
};
```

```js
// Answerer side

var pc = new RTCPeerConnection(options);
pc.ondatachannel = function (event) {
  var channel = event.channel;
  channel.onopen = function (event) {
    channel.send("Hi back!");
  };
  channel.onmessage = function (event) {
    console.log(event.data);
  };
};
```

다른 방법으로는 양쪽에서 합의한 id를 사용하여 보다 대칭적인 대역 밴드 외 협상이 가능합니다. (id는 0입니다):

```js
// Both sides

var pc = new RTCPeerConnection(options);
var channel = pc.createDataChannel("chat", { negotiated: true, id: 0 });
channel.onopen = function (event) {
  channel.send("Hi!");
};
channel.onmessage = function (event) {
  console.log(event.data);
};
```

연결 및 채널이 구성되는 예를 더 자세히 알고 싶다면, A simple RTCDataChannel sample (en-US)를 참조하십시오.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-createdatachannel |

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

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

참조
--

* `RTCDataChannel` (en-US)
* A simple RTCDataChannel sample (en-US)
* `RTCPeerConnection` (en-US)


RTCPeerConnection.removeTrack() - Web API

RTCPeerConnection.removeTrack()
===============================

**`RTCPeerConnection.removeTrack()`** 메소드는 `RTCPeerConnection.getSenders()`에 의해 보고된 발신자 목록에서 해당 `RTCRtpSender` (en-US)를 실제로 제거하지 않은채, 지정한 트랙에서 미디어 전송을 중단하도록 연결의 로컬엔드에 알려줍니다. 해당 트랙이 이미 중단되었거나, 연결의 발신자 목록에 존재하지 않으면, 이 메소드는 아무 영향이 없습니다.

연결이 이미 협상된 경우 (`signalingState` (en-US)가 `"stable"`로 설정된 경우), 재협상이 필요하다고 표시를 하게됩니다. 따라서, 원격 유저는 해당 협상이 발생하기 전까지 아무런 변화를 감지 할 수 없습니다. `negotiationneeded` 이벤트가 `RTCPeerConnection` (en-US)에 전송되고, 로컬엔드에게 해당 협상이 반드시 발생해야 한다고 알려주게됩니다.

Syntax
------

```js
pc.removeTrack(sender);
```

### 매개변수

`mediaTrack`

연결에서 해당하는 발신자를 제거하도록 알려주는 `RTCRtpSender` (en-US).

### 반환 값

`undefined`.

### 예외처리

`InvalidStateError`

연결이 열린 상태가 아닙니다.

예시
--

아래의 예시는 연결에 비디오 트랙을 추가하고, 닫기 버튼을 감청하여 유저가 버튼을 클릭하면 해당 미디어를 제거하도록 합니다.

```js
var pc, sender;
navigator.getUserMedia({ video: true }, function (stream) {
  pc = new RTCPeerConnection();
  var track = stream.getVideoTracks()[0];
  sender = pc.addTrack(track, stream);
});

document.getElementById("closeButton").addEventListener(
  "click",
  function (event) {
    pc.removeTrack(sender);
    pc.close();
  },
  false,
);
```

사양서
---

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-removetrack |

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

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

참조
--

* WebRTC API


RTCPeerConnection.getReceivers() - Web API

RTCPeerConnection.getReceivers()
================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`RTCPeerConnection.getReceivers()`** 메소드는 `RTCRtpReceiver` (en-US) 객체의 배열을 반환합니다. 이 배열의 각 요소들은 RTP 리시버를 나타냅니다. 각각의 RTP 리시버는 `RTCPeerConnection` (en-US)에 대한 `MediaStreamTrack`의 데이터를 수신하고 디코딩 합니다.

Syntax
------

```js
var receivers[] = RTCPeerConnection.getReceivers();
```

### 반환 값

연결에 대한 각 트랙마다 한 개씩 `RTCRtpReceiver` (en-US) 객체의 배열을 반환합니다. R연결에 대한 RTP 리시버가 없으면, 배열은 빈 상태입니다.

`RTCReceiver` 인스턴스에서 반환되는 순서는 명세서에 정의되어있지 않고, `getSenders()`호출을 사용해서 다음 배열의 요소로 바꿀 수 있습니다.

예시
--

tbd

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-getreceivers |

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

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

참조
--

* WebRTC
* `RTCRtpSender` (en-US)


RTCPeerConnection.getSenders() - Web API

RTCPeerConnection.getSenders()
==============================

`RTCPeerConnection` (en-US)의 **`getSenders()`** 메소드는 `RTCRtpSender` (en-US) 객체의 배열을 반환합니다. 배열의 각 객체는 하나의 트랙의 데이터의 송신을 담당하는 RTP sender를 나타냅니다. Sender 객체는 트랙 데이터의 인코딩과 송신을 확인하고, 조작 할 수 있는 메소드와 속성들을 제공합니다.

Syntax
------

```js
var senders = RTCPeerConnection.getSenders();
```

### 반환 값

연결의 각 트랙마다 한 개의 `RTCRtpSender` (en-US) 객체 배열을 반환합니다. 연결의 RTP sender가 존재하지 않으면, 배열은 빈 상태입니다.

`RTCRtpSender`s 의 반환 값 순서는 정의되어있지 않고, `getSenders()` 호출을 통해서 다음 배열 요소로 바꿀 수 있습니다.

예시
--

tbd

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-getsenders |

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

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

참조
--

* WebRTC
* `RTCRtpSender` (en-US)


RTCPeerConnection.addTrack() - Web API

RTCPeerConnection.addTrack()
============================

`RTCPeerConnection` (en-US)의 메소드인 \*\*`addTrack()`\*\*은 다른 유저에게 전송될 트랙들의 묶음에 신규 미디어 트랙을 추가합니다.

**참고:** **참조:** 연결 인터페이스에 트랙을 추가하게되면, `negotiationneeded` 이벤트를 발생시켜 renegotiation을 하게 만듭니다. 자세한 사항은 Starting negotiation 를 참조하십시오.

Syntax
------

```js
rtpSender = RTCPeerConnection.addTrack(track, stream...);
```

### 매개변수

`track`

피어 연결에 추가될 미디어 트랙을 나타내는 `MediaStreamTrack` 객체입니다.

`stream...` Optional

트랙이 추가 되어야하는 하나 혹은 여러개의 로컬 `MediaStream` (en-US) 객체입니다.

지정된 `track` 는 꼭 지정된 `stream`s의 일부가 아니여도 됩니다. `stream`s은 단지 연결을 받는 쪽에서 트랙을 그룹으로 묶고 동기화하는 방법입니다. 연결의 로컬 쪽에 존재하는 동일한 stream에 추가된 트랙들은 원격 쪽에서 같은 stream에 존재하게됩니다.

### 반환 값

`RTCRtpSender` (en-US) 객체는 미디어 데이터를 전송하기위해 사용됩니다.

**참고:** **참조:** 모든 RTCRtpSender는 `RTCRtpTransceiver` (en-US)를 구성하기 위해서 `RTCRtpReceiver` (en-US)와 함께 짝을 이룹니다. 관련이 있는 리시버는 원격 유저가 리시버에 하나 혹은 여러개의 스트림을 추가하지 않는 이상 mute 상태입니다. mute 상태에서는 패킷을 전달 할 수 없습니다.

### 예외처리

`InvalidAccessError`

지정한 트랙 (혹은 모든 스트림)이 이미 `RTCPeerConnection` (en-US)의 일부임을 알려줍니다.

`InvalidStateError`

`RTCPeerConnection` (en-US)가 이미 종료되었음을 알려줍니다.

사용법
---

### 여러개의 스트림에 트랙 추가하기

`addTrack()` 메소드는 `track`과 `streams`을 매개변수로 받습니다. `track` 매개변수를 정의한 다음에, 하나 혹은 여러개의 `MediaStream` (en-US) 객체를 지정해서 트랙을 어디에 추가 할지 지정이 가능합니다. 이때, 스트림이 아니라 트랙만 다른 유저에게 전달됩니다. 스트림은 각 유저별로 특정되어있기 때문에, 하나 혹은 여러개의 스트림을 지정한다는 것은 트랙을 받는 유저가 연결의 다른 쪽에 해당하는 스트림을 자동으로 생성할 것이라는 뜻입니다. 그리고나서 받은 트랙을 자동으로 해당 스트림에 추가하게 됩니다.

#### 스트림이 없는 트랙

스트림을 명시하지 않으면, 해당 트랙은 **streamless** 상태입니다. 트랙을 어느 스트림에 추가 할지는 원격유저가 결정하지만, 이대로 사용해도 문제는 없습니다. **streamless** 트랙은 `addTrack()`을 가장 손쉽게 사용하는 방법으로, 하나의 스트림만 필요한 아주 간단한 어플케이션을 만드는데 사용됩니다. 예를 들자면,오디오와 비디오 트랙이 존재하는 단일 스트림을 원격 유저와 공유하고 싶은 경우, 어떤 스트림에 무슨 트랙이 있는지 관리 할 필요 없이 트랜시버 (transceiver)가 처리하도록 맡길 수 있습니다.

아래 예시는 `getUserMedia()` (en-US)를 사용해서 유저의 카메라와 마이크에서 스트림을 가져오는 함수입니다. 그리고 각각의 트랙에 대한 스트림을 지정하지 않고, 스트림에서 피어 연결로 각 트랙을 추가합니다:

```js
// 비동기 함수 정의
async openCall(pc) {
  // getUserMedia는 비동기적으로 처리됨
  const gumStream = await navigator.mediaDevices.getUserMedia(
                          {video: true, audio: true});
  for (const track of gumStream.getTracks()) {
    // 스트림을 따로 지정하지 않고, 트랙을 추가
    pc.addTrack(track);
  }
}
```

위 함수의 결과로 트랙 묶음이 스트림 없이 원격 유저에게 전달됩니다. 모든 트랙들이 동일한 스트림에 추가된다 하더라도, 원격 유저의 `track`이벤트 핸들러가 각 트랙을 어느 스트림에 추가 할지를 결정합니다. `ontrack` 핸들러는 아래와 같이 작성 될 수 있습니다:

```js
let inboundStream = null;

pc.ontrack = (ev) => {
  if (ev.streams && ev.streams[0]) {
    videoElem.srcObject = ev.streams[0];
  } else {
    if (!inboundStream) {
      inboundStream = new MediaStream();
      videoElem.srcObject = inboundStream;
    }
    inboundStream.addTrack(ev.track);
  }
};
```

여기서 `track` 이벤트 핸들러는 스트림을 명시한 경우, 이 이벤트에서 명시한 첫 번째 스트림에 트랙을 추가합니다. 그렇지 않은 경우에는 `ontrack`이 처음 호출되는 순간에 신규 스트림이 생성되고 비디오 엘리먼트에 부착된 다음에서야 트랙이 신규 스트림에 추가됩니다. 이때부터 신규 랙이 해당 스트림에 추가됩니다.

또한, 각각의 트랙을 받을 때 마다, 신규 스트림을 만들 수 있습니다:

```js
pc.ontrack = (ev) => {
  if (ev.streams && ev.streams[0]) {
    videoElem.srcObject = ev.streams[0];
  } else {
    let inboundStream = new MediaStream(track);
    videoElem.srcObject = inboundStream;
  }
};
```

#### 특정 스트림에 트랙 연동하기

스트림을 명시하고 `RTCPeerConnection` (en-US)가 스트림을 만들 수 있도록 허용하면, WebRTC 인프라에 의해 스트림의 트랙들이 자동으로 연동됩니다. 이는 트랜시버의 `direction` (en-US)를 변경하거나, `removeTrack()`를 사용해서 트랙을 멈추는 것도 포함합니다.

예를 들어, 아래의 함수는 어플리케이션이 `RTCPeerConnection` (en-US)를 통해 미디어 장치의 카메라 및 마이크 입력을 원격 유저에게 스트리밍을 시작하도록 사용 될 수 있습니다:

```js
async openCall(pc) {
  const gumStream = await navigator.mediaDevices.getUserMedia(
                          {video: true, audio: true});
  for (const track of gumStream.getTracks()) {
    pc.addTrack(track, gumStream);
  }
}
```

아래와 같이, 원격 유저는 `track` 이벤트 핸들러를 사용 할 수 있습니다:

```js
pc.ontrack = ({streams: [stream]} => videoElem.srcObject = stream;
```

위의 코든 연결 인터페이스에 이미 추가 되었던 트랙을 가지고 있는 현재 스트림에 비디오 엘리먼트 설정합니다.

### 재사용되는 senders

이 메소드는 신규 `RTCRtpSender` 를 반환하거나, 아직 데이터를 송신하지 않은 이미 존재하던 호환 가능한 sender를 특정 조건아래 반환합니다. 호환성 및 재사용성이 있는 `RTCRtpSender` 인스턴스는 아래의 조건들을 만족해야합니다:

* sender와 이미 연동된 트랙이 없어야합니다.
* sender와 연동된 `RTCRtpTransceiver` (en-US)가 `MediaStreamTrack`를 명시하는 `track` (en-US) 속성을 가지고 있습니다. 여기서 `MediaStreamTrack`의 `kind`는 `RTCPeerConnection.addTrack()`의 호출에서 발생하는 `track` 매개변수의 `kind`와 같습니다. 이 방법으로 트랜시버가 오디오랑 비디오를 동시에 처리하지 않고, 각각 처리하도록 보장 할 수 있습니다.
* `RTCRtpTransceiver`의 `stopped` (en-US) 속성이 `false` 입니다.
* `RTCRtpSender`가 데이터를 한 번도 보낸적이 없는 것으로 간주됩니다. 만약 트랜시버의 `currentDirection` (en-US)가 한 번이라도 `"sendrecv"` 혹은 `"sendonly"`였다면, sender는 재사용이 불가능합니다.

위의 조건들을 모두 만족하게되면, sender가 재사용되어 이미 존재하던 `RTCRtpSender` 및 `RTCRtpTransceiver` 에 아래와 같은 변경사항이 적용됩니다:

* `RTCRtpSender`의 `track` (en-US)가 지정된 트랙으로 설정됩니다.
* 이 메소드의 `stream...`에 전달된 스트림 리스트에 sender에 부착되어있던 스트림들이 설정됩니다.
* 부착된 `RTCRtpTransceiver` (en-US)의 `currentDirection`이 업데이트된 전송 정보를 포함합니다. 현재 값이 `"recvonly"`였다면, `"sendrecv"`로 변하게되고, 현재 값이 `"inactive"`면, `"sendonly"`로 변하게됩니다.
### 신규 senders

재사용가능한 sender가 없으면, 신규 sender가 생성됩니다. 신규로 생성되면, 꼭 있어야하는 관련된 객체들도 생성됩니다. 이 과정에서 다음과 같은 변화가 발생합니다:

* 신규 `RTCRtpSender`가 지정된 `track` 및 `stream`(s)과 함께 만들어집니다.
* 신규`RTCRtpReceiver` (en-US)가 `track` (en-US) 속성으로 `MediaStreamTrack` 가지도록 함께 만들어집니다. 이때, 트랙은 `addTrack()` 호출에서 매개변수로 지정된 트랙이 아닙니다. 이 트랙의 `kind`는 입력 매개변수로 제공된 트랙의 `kind`와 일치하도록 설정됩니다.
* 신규 `RTCRtpTransceiver` (en-US)가 생성되고, 신규 sender 및 receiver에 부착됩니다.
* 신규 transceiver의 `direction` (en-US)는 `"sendrecv"`로 설정됩니다.
* 신규 transceiver는 `RTCPeerConnection`의 transceiver 세트에 추가됩니다.
예시
--

아래의 코드는 Signaling and video calling 문서에서 가져온 코드입니다. 이 코드는 `handleVideoOfferMsg()`메소드에서 제공되는 것으로, offer 메세지가 원격 유저에서 수신되면 호출됩니다.

```js
var mediaConstraints = {
  audio: true, // We want an audio track
  video: true, // ...and we want a video track
};

var desc = new RTCSessionDescription(sdp);

pc.setRemoteDescription(desc)
  .then(function () {
    return navigator.mediaDevices.getUserMedia(mediaConstraints);
  })
  .then(function (stream) {
    previewElement.srcObject = stream;

    stream.getTracks().forEach((track) => pc.addTrack(track, stream));
  });
```

위의 코드는 SDP를 원격 유저로부터 수신 받아서 신규 `RTCSessionDescription` (en-US)를 만들고 `setRemoteDescription()` (en-US)로 전달합니다. `pc.setRemoteDescription(desc)`의 실행이 성공하게되면, `MediaDevices.getUserMedia()` (en-US)를 사용해서 로컬 유저의 웹캠과 마이크에 대한접근 권한을 얻습니다. 앞의 과정이 성공하게되면, 스트림은 `<video>` 엘리먼트를 위한 소스로 지정됩니다. 이 스트림은 `previewElement`변수를 통해 참조가 가능해집니다.

마지막으로 피어 연결을 통헤 caller에게 로컬 비디오 전달을 시작합니다. 이 과정은 `MediaStream.getTracks()` (en-US)에 의해 반환된 리스트를 iterate하고, 이들을 구성하는 `stream`과 함께 `addTrack()`에 전달되어 스트림에 각각의 트랙들을 추가합니다.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcpeerconnection-addtrack |

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

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

참조
--

* WebRTC (en-US)
* Introduction to the Real-time Transport Protocol (RTP) (en-US)
* `RTCPeerConnection.ontrack`
* `track`


RTCPeerConnection.connectionState - Web API

RTCPeerConnection.connectionState
=================================

`RTCPeerConnection` (en-US) 인터페이스의 읽기 속성인 **`connectionState`** 는 피어 연결의 현재 상태를 알려줍니다. 이 속성은 `RTCPeerConnectionState` `enum` 값 중 하나를 문자열로 반환해줍니다.

만약 이 속성의 값이 바뀌게되면, `RTCPeerConnection` (en-US) 인스턴스로 `connectionstatechange` 이벤트가 전송됩니다.

Syntax
------

```js
var connectionState = RTCPeerConnection.connectionState;
```

### 값

연결의 현재 상태를 `RTCPeerConnectionState` enum의 값 중 하나로 표시합니다.

### RTCPeerConnectionState enum

`RTCPeerConnectionState` enum은 `RTCPeerConnection`이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 (`RTCIceTransport` (en-US) 혹은 `RTCDtlsTransport` (en-US)의 타입)의 상태 집합을 나타냅니다.

| 상수명 | 설명 |
| --- | --- |
| `"new"` | 연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 `"new"` 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: `"connecting"`, `"checking"`, `"failed"`, 혹은 `"disconnected"`, 혹은 모든 연결의 전송이 끝났다는 `"closed"`상태. |
| `"connecting"` | 하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 `RTCIceConnectionState`가 `"checking"` 혹은 `"connected"`이며, 그 어떤 전송도 `"failed"`상태가 아니여야합니다. **<<< Make this a link once I know where that will be documented** |
| `"connected"` | 연결에 의해 사용되는 모든 ICE 전송이 사용 중 (`"connected"` 혹은 `"completed"`)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 `"connected"` 혹은 `"completed"`입니다. |
| `"disconnected"` | 연결에 대한 최소 한 개의 ICE 전송이 `"disconnected"`상태이고, 그 외의 다른 전송 상태는 `"failed"`, `"connecting"`, 혹은 `"checking"`이 아님을 알려주는 값. |
| `"failed"` | 연결에 대한 하나 혹은 여러개의 ICE 전송이 `"failed"`상태임을 알려주는 값. |
| `"closed"` | `RTCPeerConnection` 개통되지 않음을 알려주는 값.2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 `RTCPeerConnectionState` enum 안에 존재했었습니다. 따라서, `signalingState` (en-US)의 값을 통해 찾을 수 있습니다. |

예시
--

```js
var pc = new RTCPeerConnection(configuration);

/\* ... \*/

var connectionState = pc.connectionState;
```

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-connection-state |

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

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

참조
--

* Lifetime of a WebRTC session (en-US)
* `RTCPeerConnection` (en-US)
* `connectionstatechange`
* WebRTC (en-US)


RTCPeerConnection.addIceCandidate() - Web API

RTCPeerConnection.addIceCandidate()
===================================

`RTCPeerConnection` (en-US)을 사용하는 웹이나 앱이 신규 ICE candidate를 signaling 채널을 통해 원격 유저로부터 수신하게되면, \*\*`RTCPeerConnection.addIceCandidate()`\*\*를 호출해서 브라우저의 ICE 에이전트에게 새로 수신한 candidate를 전달합니다. 이 메소드는 `RTCPeerConnection`의 원격 설명 (remote description)에 연결의 원격쪽 상태를 설명해주는 신규 원격 candidate를 추가합니다.

`addIceCandidate()` 호출시 `candidate` 매개변수가 존재하지 않거나 값이 `null`인 경우에, 추가된 ICE candidate는 "candidate 종료"를 알려줍니다. 지정한 객체의`candidate` 값이 존재하지 않거나, 빈 문자열 (`""`)인 경우에도 원격 candidate들이 모두 전달되었음을 알려줍니다.

"candidate 종료" 알림은 a-line 값의 `end-of-candidates`를 가진 candidate와 함께 원격 유저에 송신됩니다.

네고시에이션 중에 앱이 위의 방법처럼 ICE 에이전트에 전달할 다수의 candidate를 수신 받을 수 있고, 이는 가능한 연결 방법들의 리스트를 만들 수 있도록 도와줍니다. 자세한 내용은 WebRTC connectivity (en-US)와 Signaling and video calling를 참고하십시오.

Syntax
------

```js
aPromise = pc.addIceCandidate(candidate);

addIceCandidate(candidate, successCallback, failureCallback);
```

### 매개변수

`candidate` Optional

`RTCIceCandidateInit` (en-US) 딕셔너리 혹은 `RTCIceCandidate` 객체에 해당하는 객체입니다. 이 객체의 내용은 signaling 채널을 통해 수신 받은 메세지로 구성되어야합니다. 메세지는 이미 로컬 ICE 에이전트에 전달 될 준비가 된 새로 수신받은 ICE candidate를 설명합니다.`candidate` 객체가 지정되어있지 않거나, `null` 이라면, "candidate 종료" 신호가 `end-of-candidates` a-line을 사용해서 원격 유저에게 전달됩니다. a-line의 형식은 아래와 같습니다: a=end-of-candidates

### 더 이상 사용되지 않는 변수 (Deprecated)

이전 버전의 문서에서는 이 함수를 콜백 기반으로 사용하도록 되어있습니다. 콜백 기반 함수는 이제 더 이상 사용되지 않으며, 사용하지 않는 것을 권장합니다. 이미 사용 중이라면, `Promise` 버전인 `addIceCandidate()`를 사용하도록 코드를 업데이트 하십시오. 이전 버전의 코드를 업데이트 하는 것을 쉽게 하기 위해 고안된 `addIceCandidate()`의 특정 변수에 대해 아래에서 설명합니다.

`successCallback`
지원이 중단되었습니다

ICE candidate가 성공적으로 추가되었을 때에 호출되는 함수입니다. 이 함수는 입력 변수가 없으며, 아무런 값도 반환하지 않도록 되어있습니다.

`failureCallback`
지원이 중단되었습니다

ICE candidate 추가 시도가 실패하면 호출되는 함수입니다. 실패에 대한 이유를 설명하는 객체인 `DOMException` (en-US)을 입력 변수로 받습니다.

### 반환 값

`Promise`는 candidate가 ICE 에이전트에 의해 원격 유저의 설명 (description)에 성공적으로 추가되면 fulfilled 됩니다. 프로미스는 입력 변수가 없습니다.

### 예외 처리

ICE candidate 추가 시도 중 에러가 발생하면, 이 메소드에서 반환되는 `Promise`는 거절됩니다. 그리고 거절 핸들러로 전달되는 지정된 `DOMException` (en-US) 객체안에 존재하는 `name` (en-US) 속성으로 아래의 에러 중 하나를 반환하게 됩니다.

`TypeError`

명시한 candidate의 `sdpMid` (en-US) 및`sdpMLineIndex` (en-US)가 모두 `null` 입니다.

`InvalidStateError`

현재 `RTCPeerConnection`은 어떠한 원격 유저와도 연결이 되어있지 않습니다. `remoteDescription` (en-US) 값이 `null`입니다.

`OperationError`

이 에러는 여러가지 이유 때문에 발생합니다:\* 지정된 `sdpMid` (en-US) 값이 non-`null`이고, `remoteDescription` (en-US)안에 존재하는 어떠한 미디어 description의 미디어 ID와도 일치하지 않음

* 지정된 `sdpMLineIndex` (en-US)의 값이 원격 설명 (description)에 포함된 미디어의 숫자와 같거나 큼
* 지정된 `ufrag` (en-US)가 어떠한 원격 설명 (description) 안의 `ufrag` 필드와 일치하지 않음
* `candidate` 문자열에 존재하는 하나 혹은 여러개의 값들이 올바르지 않거나, 파싱 될 수 없음
* 어떠한 이유에서던 candidate를 추가하려는 시도가 실패

예시
--

아래의 코드는 임의의 signaling 채널을 통해 어떻게 ICE candidate를 알리는지를 보여줍니다.

```js
// 본 예제는 다른 유저가 아래와 같은 signaling 채널을 사용한다고 가정합니다:
//
// pc.onicecandidate = event => {
// if (event.candidate) {
// signalingChannel.send(JSON.stringify({ice: event.candidate})); // "ice" is arbitrary
// } else {
// // All ICE candidates have been sent
// }
// }

signalingChannel.onmessage = (receivedString) => {
  const message = JSON.parse(receivedString);
  if (message.ice) {
    // A typical value of ice here might look something like this:
    //
    // {candidate: "candidate:0 1 UDP 2122154243 192.168.1.9 53421 typ host", sdpMid: "0", ...}
    //
    // Pass the whole thing to addIceCandidate:

    pc.addIceCandidate(message.ice).catch((e) => {
      console.log("Failure during addIceCandidate(): " + e.name);
    });
  } else {
    // handle other things you might be signaling, like sdp
  }
};
```

원격 유저에 의해 이러한 방식으로 신호를 전달한 마지막 candiate는 "candidate 종료"를 나타내는 특수한 candidate가 됩니다. "candidate 종료"를 수동으로 설정하려면 다음과 같이 하면 됩니다:

```js
pc.addIceCandidate({ candidate: "" });
```

하지만, 대부분의 경우 `RTCPeerConnection` (en-US)가 적절한 이벤트를 보내서 처리해주기 때문에 이를 수동으로 확인해야 할 필요는 없습니다.

명세
--

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-peerconnection-addicecandidate |

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

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

참조
--

* WebRTC API
* Signaling and video calling
* WebRTC architecture overview (en-US)
* WebRTC connectivity (en-US)
* Lifetime of a WebRTC session (en-US)


window.screen.onorientationchange - Web API

window.screen.onorientationchange
=================================

**실험적:** **이 기능은 실험적인 기능입니다.**
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

Summary
-------

`orientationchange` 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.

Syntax
------

```js
screen.onorientationchange = funcRef;
```

`funcRef` 는 함수로의 참조 이다.

명세서
---

#### No specification found

No specification data found for `api.Screen.orientationchange_event`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* `orientationchange`
* Managing screen orientation (en-US)


Screen.lockOrientation - Web API

Screen.lockOrientation
======================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

`lockOrientation` 함수는 지정된 방향으로 화면을 고정시킨다.

**참고:** 이 함수는 오직 설치된 웹앱 또는 full-screen mode 의 웹페이지에서만 동작한다..

Syntax
------

```js
var locked = window.screen.lockOrientation(orientation);
```

### Parameters

*orientation*

화면을 고정 시킬 방향. 문자열 또는 문자열의 배열이다. 여러 문자열을 지정하면 지정한 방향으로만 회전된다.

다음의 문자열들은 당신이 지정할 수 있는 방향들을 나타낸다.

`portrait-primary`

기본 세로 모드 일 때 화면의 방향을 나타낸다. 화면은 화면이 정상위치 (normal position)가 세로이고 세로로 고정 되어 있으면 기본 세로 모드 (primary portrait mode) 로 간주 된다. 만약 장치의 정상위치 (normal position)가 가로 모드 이면 장치가 시계방향으로 90° 돌렸을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`portrait-secondary`

보조 세로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치에서 180° 로 고정 되어 있을 때 보조 세로 모드로 간주된다. 만약 정상위치가 가로 인 경우 장치가 반시계 방향으로 90° 회전 했을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`landscape-primary`

기본 가로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치 (normal position)가 가로이고 가로로 고정 되어 있으면 기본 가로 모드 (primary landscape mode) 로 간주된다. 만약 장치의 정상위치 (normal position)가 세로이면 장치가 시계방향으로 90° 돌렸을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`landscape-secondary`

보조 가로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치에서 180° 로 고정 되어 있을 때 보조 가로 모드 (secondary landscape mode) 로 간주된다. 또는 정상위치가 세로 인 경우 장치가 반시계 방향으로 90° 회전 했을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.

`portrait`

`portrait-primary` 와 `portrait-secondary 둘 다 이다.`

`landscape`

`landscape-primary` 와 `landscape-secondary 둘 다 이다.`

**참고:** 한번에 여러개의 고정 값을 가질 수 있다. 만약 한방향으로만 설정 하면 화면의 방향은 unlock 하기 전 까지는 절대로 변하지 않는다. 그렇지 않다면 (여러값을 가진 다면) 지정 된 방향들로 화면의 방향이 변할 것이다.

### Return value

성공적으로 고정 되었을 경우 `true` 를 반환한다. 고정 될 수 없다면 `false` 를 반환한다.

Example
-------

```js
if (window.screen.mozLockOrientation("landscape-primary")) {
  // orientation was locked
} else {
  // orientation lock failed
}
```

명세서
---

#### No specification found

No specification data found for `api.Screen.lockOrientation`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* `window.screen.orientation`
* `window.screen.unlockOrientation()`
* `window.screen.onorientationchange`
* Managing screen orientation (en-US)


window.screen.unlockOrientation - Web API

window.screen.unlockOrientation
===============================

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**`Screen.unlockOrientation()`** 함수는 이전의 page나 앱을 통해 지정한 화면 고정 값들을 모두 제거 한다.

**참고:** 이 함수는 설치된 웹앱 또는 full-screen mode 의 웹 페이지들에서 동작한다..

Syntax
------

```js
var unlocked = window.screen.unlockOrientation();
```

### Return value

성공적으로 unlocked 된 경우 `true` 를 반환하며, 만약 방향이 unlock 될 수 없다면 `false` 를 반환한다.

Example
-------

```js
if (window.screen.unlockOrientation()) {
  // orientation was unlocked
} else {
  // orientation unlock failed
}
```

명세서
---

#### No specification found

No specification data found for `api.Screen.unlockOrientation`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* `window.screen.orientation`
* `window.screen.lockOrientation()`
* `window.screen.onorientationchange`
* Managing screen orientation (en-US)