diff options
Diffstat (limited to 'files/ko/web/api/rtcpeerconnection')
31 files changed, 2896 insertions, 0 deletions
diff --git a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html new file mode 100644 index 0000000000..9062abc861 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html @@ -0,0 +1,148 @@ +--- +title: RTCPeerConnection.addIceCandidate() +slug: Web/API/RTCPeerConnection/addIceCandidate +translation_of: Web/API/RTCPeerConnection/addIceCandidate +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">{{domxref("RTCPeerConnection")}}을 사용하는 웹이나 앱이 신규 ICE candidate를 signaling 채널을 통해 원격 유저로부터 수신하게되면, <code><strong>RTCPeerConnection.addIceCandidate()</strong></code>를 호출해서 브라우저의 {{Glossary("ICE")}} 에이전트에게 새로 수신한 candidate를 전달합니다.</span> 이 메소드는 <code>RTCPeerConnection</code>의 원격 설명 (remote description)에 연결의 원격쪽 상태를 설명해주는 신규 원격 candidate를 추가합니다. </p> + +<p><code>addIceCandidate()</code> 호출시 <code>candidate</code> 매개변수가 존재하지 않거나 값이 <code>null</code>인 경우에, 추가된 ICE candidate는 "candidate 종료"를 알려줍니다. 지정한 객체의{{domxref("RTCIceCandidate.candidate", "candidate")}} 값이 존재하지 않거나, 빈 문자열 (<code>""</code>)인 경우에도 원격 candidate들이 모두 전달되었음을 알려줍니다. </p> + +<p>"candidate 종료" 알림은 a-line 값의 <code>end-of-candidates</code>를 가진 candidate와 함께 원격 유저에 송신됩니다.</p> + +<p>네고시에이션 중에 앱이 위의 방법처럼 ICE 에이전트에 전달할 다수의 candidate를 수신 받을 수 있고, 이는 가능한 연결 방법들의 리스트를 만들 수 있도록 도와줍니다. 자세한 내용은 <a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a>와 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>를 참고하십시오.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>aPromise </em>= <em>pc</em>.addIceCandidate(<em>candidate</em>); + +addIceCandidate(<em>candidate</em>, <em>successCallback</em>, <em>failureCallback</em>); {{deprecated_inline}} +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>candidate</code> {{optional_inline}}</dt> + <dd> + <p>{{domxref("RTCIceCandidateInit")}} 딕셔너리 혹은 {{domxref("RTCIceCandidate")}} 객체에 해당하는 객체입니다. 이 객체의 내용은 signaling 채널을 통해 수신 받은 메세지로 구성되어야합니다. 메세지는 이미 로컬 ICE 에이전트에 전달 될 준비가 된 새로 수신받은 ICE candidate를 설명합니다.</p> + + <p><code>candidate </code>객체가 지정되어있지 않거나, <code>null</code>이라면, "candidate 종료" 신호가 <code>end-of-candidates</code> a-line을 사용해서 원격 유저에게 전달됩니다. a-line의 형식은 아래와 같습니다:</p> + + <pre>a=end-of-candidates</pre> + </dd> +</dl> + +<h3 id="더_이상_사용되지_않는_변수_(Deprecated)">더 이상 사용되지 않는 변수 (Deprecated)</h3> + +<p>이전 버전의 문서에서는 이 함수를 콜백 기반으로 사용하도록 되어있습니다. 콜백 기반 함수는 이제 더 이상 사용되지 않으며, 사용하지 않는 것을 권장합니다. 이미 사용 중이라면, {{jsxref("Promise")}} 버전인 <code>addIceCandidate()</code>를 사용하도록 코드를 업데이트 하십시오. 이전 버전의 코드를 업데이트 하는 것을 쉽게 하기 위해 고안된 <code>addIceCandidate()</code>의 특정 변수에 대해 아래에서 설명합니다.</p> + +<dl> + <dt><code>successCallback</code> {{deprecated_inline}}</dt> + <dd>ICE candidate가 성공적으로 추가되었을 때에 호출되는 함수입니다. 이 함수는 입력 변수가 없으며, 아무런 값도 반환하지 않도록 되어있습니다. </dd> + <dt><code>failureCallback</code> {{deprecated_inline}}</dt> + <dd>ICE candidate 추가 시도가 실패하면 호출되는 함수입니다. 실패에 대한 이유를 설명하는 객체인 {{domxref("DOMException")}}을 입력 변수로 받습니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>{{jsxref("Promise")}}는 candidate가 ICE 에이전트에 의해 원격 유저의 설명 (description)에 성공적으로 추가되면 fulfilled 됩니다. 프로미스는 입력 변수가 없습니다.</p> + +<h3 id="예외_처리">예외 처리</h3> + +<p>ICE candidate 추가 시도 중 에러가 발생하면, 이 메소드에서 반환되는 {{jsxref("Promise")}}는 거절됩니다. 그리고 거절 핸들러로 전달되는 지정된 {{domxref("DOMException")}} 객체안에 존재하는 {{domxref("DOMException.name", "name")}} 속성으로 아래의 에러 중 하나를 반환하게 됩니다.</p> + +<dl> + <dt><code>TypeError</code></dt> + <dd>명시한 candidate의 {{domxref("RTCIceCandidate.sdpMid", "sdpMid")}} 및{{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}}가 모두 <code>null</code> 입니다.</dd> + <dt><code>InvalidStateError</code></dt> + <dd>현재 <code>RTCPeerConnection</code>은 어떠한 원격 유저와도 연결이 되어있지 않습니다. {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} 값이 <code>null</code>입니다.</dd> + <dt><code>OperationError</code></dt> + <dd>이 에러는 여러가지 이유 때문에 발생합니다: + <ul> + <li>지정된 {{domxref("RTCIceCandidate.sdpMid", "sdpMid")}} 값이 non-<code>null</code>이고, {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}}안에 존재하는 어떠한 미디어 description의 미디어 ID와도 일치하지 않음</li> + <li>지정된 {{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}}의 값이 원격 설명 (description)에 포함된 미디어의 숫자와 같거나 큼</li> + <li>지정된 {{domxref("RTCIceCandidate.usernameFragment", "ufrag")}}가 어떠한 원격 설명 (description) 안의 <code>ufrag</code> 필드와 일치하지 않음</li> + <li>{{domxref("RTCIceCandidate", "candidate")}} 문자열에 존재하는 하나 혹은 여러개의 값들이 올바르지 않거나, 파싱 될 수 없음</li> + <li>어떠한 이유에서던 candidate를 추가하려는 시도가 실패<span style="display: none;"> </span></li> + </ul> + </dd> +</dl> + +<h2 id="예시">예시</h2> + +<p>아래의 코드는 임의의 signaling 채널을 통해 어떻게 ICE candidate를 알리는지를 보여줍니다.</p> + +<pre class="brush: 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 + } +}</pre> + +<p>원격 유저에 의해 이러한 방식으로 신호를 전달한 마지막 candiate는 "candidate 종료"를 나타내는 특수한 candidate가 됩니다. "candidate 종료"를 수동으로 설정하려면 다음과 같이 하면 됩니다:</p> + +<pre class="brush: js">pc.addIceCandidate({candidate:''}); +</pre> + +<p>하지만, 대부분의 경우 {{domxref("RTCPeerConnection")}}가 적절한 이벤트를 보내서 처리해주기 때문에 이를 수동으로 확인해야 할 필요는 없습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-addIceCandidate-Promise-void--RTCIceCandidateInit-RTCIceCandidate-candidate', 'RTCPeerConnection.addIceCandidate()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + <tr> + <td>{{SpecName("WebRTC 1.0", "#widl-RTCPeerConnection-addIceCandidate-void-RTCIceCandidateInit-RTCIceCandidate-candidate-VoidFunction-successCallback-RTCPeerConnectionErrorCallback-failureCallback", "RTCPeerConnection.addIceCandidate()")}} {{deprecated_inline}}</td> + <td>{{Spec2("WebRTC 1.0")}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.addIceCandidate")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">WebRTC architecture overview</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/addtrack/index.html b/files/ko/web/api/rtcpeerconnection/addtrack/index.html new file mode 100644 index 0000000000..50a493a188 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/addtrack/index.html @@ -0,0 +1,208 @@ +--- +title: RTCPeerConnection.addTrack() +slug: Web/API/RTCPeerConnection/addTrack +translation_of: Web/API/RTCPeerConnection/addTrack +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">{{domxref("RTCPeerConnection")}}의 메소드인 <strong><code>addTrack()</code></strong>은 다른 유저에게 전송될 트랙들의 묶음에 신규 미디어 트랙을 추가합니다.</span></p> + +<div class="note"> +<p><strong>참조:</strong> 연결 인터페이스에 트랙을 추가하게되면, {{event("negotiationneeded")}} 이벤트를 발생시켜 renegotiation을 하게 만듭니다. 자세한 사항은 {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling", "Starting negotiation")}} 를 참조하십시오.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>rtpSender</em> = RTC<em>PeerConnection</em>.addTrack(<em>track</em>, <em>stream...</em>);</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>track</code></dt> + <dd>피어 연결에 추가될 미디어 트랙을 나타내는 {{domxref("MediaStreamTrack")}} 객체입니다.</dd> + <dt><code>stream...</code> {{optional_inline}}</dt> + <dd>트랙이 추가 되어야하는 하나 혹은 여러개의 로컬 {{domxref("MediaStream")}} 객체입니다.</dd> +</dl> + +<p>지정된 <code>track</code> 는 꼭 지정된 <code>stream</code>s의 일부가 아니여도 됩니다. <code>stream</code>s은 단지 연결을 받는 쪽에서 트랙을 그룹으로 묶고 동기화하는 방법입니다. 연결의 로컬 쪽에 존재하는 동일한 stream에 추가된 트랙들은 원격 쪽에서 같은 stream에 존재하게됩니다. </p> + +<h3 id="반환_값">반환 값</h3> + +<p>{{domxref("RTCRtpSender")}} 객체는 미디어 데이터를 전송하기위해 사용됩니다. </p> + +<div class="note"> +<p><strong>참조:</strong> 모든 RTCRtpSender는 {{domxref("RTCRtpTransceiver")}}를 구성하기 위해서 {{domxref("RTCRtpReceiver")}}와 함께 짝을 이룹니다. 관련이 있는 리시버는 원격 유저가 리시버에 하나 혹은 여러개의 스트림을 추가하지 않는 이상 mute 상태입니다. mute 상태에서는 패킷을 전달 할 수 없습니다. </p> +</div> + +<h3 id="예외처리">예외처리</h3> + +<dl> + <dt><code>InvalidAccessError</code></dt> + <dd>지정한 트랙 (혹은 모든 스트림)이 이미 {{domxref("RTCPeerConnection")}}의 일부임을 알려줍니다.</dd> + <dt><code>InvalidStateError</code></dt> + <dd>{{domxref("RTCPeerConnection")}}가 이미 종료되었음을 알려줍니다.</dd> +</dl> + +<h2 id="사용법">사용법</h2> + +<h3 id="여러개의_스트림에_트랙_추가하기">여러개의 스트림에 트랙 추가하기</h3> + +<p><code>addTrack()</code> 메소드는 <code>track</code>과 <code>streams</code>을 매개변수로 받습니다. <code>track</code> 매개변수를 정의한 다음에, 하나 혹은 여러개의 {{domxref("MediaStream")}} 객체를 지정해서 트랙을 어디에 추가 할지 지정이 가능합니다. 이때, 스트림이 아니라 트랙만 다른 유저에게 전달됩니다. 스트림은 각 유저별로 특정되어있기 때문에, 하나 혹은 여러개의 스트림을 지정한다는 것은 트랙을 받는 유저가 연결의 다른 쪽에 해당하는 스트림을 자동으로 생성할 것이라는 뜻입니다. 그리고나서 받은 트랙을 자동으로 해당 스트림에 추가하게 됩니다. </p> + +<h4 id="스트림이_없는_트랙">스트림이 없는 트랙</h4> + +<p>스트림을 명시하지 않으면, 해당 트랙은 <strong>streamless </strong>상태입니다. 트랙을 어느 스트림에 추가 할지는 원격유저가 결정하지만, 이대로 사용해도 문제는 없습니다. <strong>streamless</strong> 트랙은 <code>addTrack()</code>을 가장 손쉽게 사용하는 방법으로, 하나의 스트림만 필요한 아주 간단한 어플케이션을 만드는데 사용됩니다. 예를 들자면,오디오와 비디오 트랙이 존재하는 단일 스트림을 원격 유저와 공유하고 싶은 경우, 어떤 스트림에 무슨 트랙이 있는지 관리 할 필요 없이 트랜시버 (transceiver)가 처리하도록 맡길 수 있습니다. </p> + +<p>아래 예시는 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}를 사용해서 유저의 카메라와 마이크에서 스트림을 가져오는 함수입니다. 그리고 각각의 트랙에 대한 스트림을 지정하지 않고, 스트림에서 피어 연결로 각 트랙을 추가합니다: </p> + +<pre class="brush: js">// 비동기 함수 정의 +async openCall(pc) { + // getUserMedia는 비동기적으로 처리됨 + const gumStream = await navigator.mediaDevices.getUserMedia( + {video: true, audio: true}); + for (const track of gumStream.getTracks()) { + // 스트림을 따로 지정하지 않고, 트랙을 추가 + pc.addTrack(track); + } +}</pre> + +<p>위 함수의 결과로 트랙 묶음이 스트림 없이 원격 유저에게 전달됩니다. 모든 트랙들이 동일한 스트림에 추가된다 하더라도, 원격 유저의 {{event("track")}}이벤트 핸들러가 각 트랙을 어느 스트림에 추가 할지를 결정합니다. {{domxref("RTCPeerConnection.ontrack", "ontrack")}} 핸들러는 아래와 같이 작성 될 수 있습니다:</p> + +<pre class="brush: 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); + } +}</pre> + +<p>여기서 <code>track</code> 이벤트 핸들러는 스트림을 명시한 경우, 이 이벤트에서 명시한 첫 번째 스트림에 트랙을 추가합니다. 그렇지 않은 경우에는 <code>ontrack</code>이 처음 호출되는 순간에 신규 스트림이 생성되고 비디오 엘리먼트에 부착된 다음에서야 트랙이 신규 스트림에 추가됩니다. 이때부터 신규 랙이 해당 스트림에 추가됩니다.</p> + +<p>또한, 각각의 트랙을 받을 때 마다, 신규 스트림을 만들 수 있습니다:</p> + +<pre class="brush: js">pc.ontrack = ev => { + if (ev.streams && ev.streams[0]) { + videoElem.srcObject = ev.streams[0]; + } else { + let inboundStream = new MediaStream(track); + videoElem.srcObject = inboundStream; + } +}</pre> + +<h4 id="특정_스트림에_트랙_연동하기">특정 스트림에 트랙 연동하기</h4> + +<p>스트림을 명시하고 {{domxref("RTCPeerConnection")}}가 스트림을 만들 수 있도록 허용하면, WebRTC 인프라에 의해 스트림의 트랙들이 자동으로 연동됩니다. 이는 트랜시버의 {{domxref("RTCRtpTransceiver.direction", "direction")}}를 변경하거나, {{domxref("RTCPeerConnection.removeTrack", "removeTrack()")}}를 사용해서 트랙을 멈추는 것도 포함합니다.</p> + +<p>예를 들어, 아래의 함수는 어플리케이션이 {{domxref("RTCPeerConnection")}}를 통해 미디어 장치의 카메라 및 마이크 입력을 원격 유저에게 스트리밍을 시작하도록 사용 될 수 있습니다:</p> + +<pre class="brush: js">async openCall(pc) { + const gumStream = await navigator.mediaDevices.getUserMedia( + {video: true, audio: true}); + for (const track of gumStream.getTracks()) { + pc.addTrack(track, gumStream); + } +}</pre> + +<p>아래와 같이, 원격 유저는 {{event("track")}} 이벤트 핸들러를 사용 할 수 있습니다:</p> + +<pre class="brush: js">pc.ontrack = ({streams: [stream]} => videoElem.srcObject = stream;</pre> + +<p>위의 코든 연결 인터페이스에 이미 추가 되었던 트랙을 가지고 있는 현재 스트림에 비디오 엘리먼트 설정합니다.</p> + +<h3 id="재사용되는_senders">재사용되는 senders</h3> + +<p>이 메소드는 신규 <code>RTCRtpSender</code> 를 반환하거나, 아직 데이터를 송신하지 않은 이미 존재하던 호환 가능한 sender를 특정 조건아래 반환합니다. 호환성 및 재사용성이 있는 <code>RTCRtpSender</code> 인스턴스는 아래의 조건들을 만족해야합니다:</p> + +<ul> + <li>sender와 이미 연동된 트랙이 없어야합니다.</li> + <li>sender와 연동된 {{domxref("RTCRtpTransceiver")}}가 {{domxref("MediaStreamTrack")}}를 명시하는 {{domxref("RTCRtpReceiver.track", "track")}} 속성을 가지고 있습니다. 여기서 {{domxref("MediaStreamTrack")}}의 {{domxref("MediaStreamTrack.kind", "kind")}}는 <code>RTCPeerConnection.addTrack()</code>의 호출에서 발생하는 <code>track</code> 매개변수의 <code>kind</code>와 같습니다. 이 방법으로 트랜시버가 오디오랑 비디오를 동시에 처리하지 않고, 각각 처리하도록 보장 할 수 있습니다. </li> + <li><code>RTCRtpTransceiver</code>의 {{domxref("RTCRtpTransceiver.stopped", "stopped")}} 속성이 <code>false</code> 입니다.</li> + <li><code>RTCRtpSender</code>가 데이터를 한 번도 보낸적이 없는 것으로 간주됩니다. 만약 트랜시버의 {{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}}가 한 번이라도 <code>"sendrecv"</code> 혹은 <code>"sendonly"</code>였다면, sender는 재사용이 불가능합니다.</li> +</ul> + +<p>위의 조건들을 모두 만족하게되면, sender가 재사용되어 이미 존재하던 <code>RTCRtpSender</code> 및 <code>RTCRtpTransceiver</code> 에 아래와 같은 변경사항이 적용됩니다: </p> + +<ul> + <li><code>RTCRtpSender</code>의 {{domxref("RTCRtpSender.track", "track")}}가 지정된 트랙으로 설정됩니다.</li> + <li>이 메소드의 <code>stream...</code>에 전달된 스트림 리스트에 sender에 부착되어있던 스트림들이 설정됩니다.</li> + <li>부착된 {{domxref("RTCRtpTransceiver")}}의 <code>currentDirection</code>이 업데이트된 전송 정보를 포함합니다. 현재 값이 <code>"recvonly"</code>였다면, <code>"sendrecv"</code>로 변하게되고, 현재 값이 <code>"inactive"</code>면, <code>"sendonly"</code>로 변하게됩니다. </li> +</ul> + +<h3 id="신규_senders">신규 senders</h3> + +<p>재사용가능한 sender가 없으면, 신규 sender가 생성됩니다. 신규로 생성되면, 꼭 있어야하는 관련된 객체들도 생성됩니다. 이 과정에서 다음과 같은 변화가 발생합니다:</p> + +<ul> + <li>신규 <code>RTCRtpSender</code>가 지정된 <code>track</code> 및 <code>stream</code>(s)과 함께 만들어집니다.</li> + <li>신규{{domxref("RTCRtpReceiver")}}가 {{domxref("RTCRtpReceiver.track", "track")}} 속성으로 {{domxref("MediaStreamTrack")}} 가지도록 함께 만들어집니다. 이때, 트랙은 <code>addTrack()</code> 호출에서 매개변수로 지정된 트랙이 아닙니다. 이 트랙의 {{domxref("MediaStreamTrack.kind", "kind")}}는 입력 매개변수로 제공된 트랙의 <code>kind</code>와 일치하도록 설정됩니다.</li> + <li>신규 {{domxref("RTCRtpTransceiver")}}가 생성되고, 신규 sender 및 receiver에 부착됩니다.</li> + <li>신규 transceiver의 {{domxref("RTCRtpTransceiver.direction", "direction")}}는 <code>"sendrecv"</code>로 설정됩니다.</li> + <li>신규 transceiver는 <code>RTCPeerConnection</code>의 transceiver 세트에 추가됩니다.</li> +</ul> + +<dl> +</dl> + +<h2 id="예시">예시</h2> + +<p>아래의 코드는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서에서 가져온 코드입니다. 이 코드는 <code>handleVideoOfferMsg()</code>메소드에서 제공되는 것으로, offer 메세지가 원격 유저에서 수신되면 호출됩니다.</p> + +<pre class="brush: 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)); +})</pre> + +<p>위의 코드는 SDP를 원격 유저로부터 수신 받아서 신규 {{domxref("RTCSessionDescription")}}를 만들고 {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}로 전달합니다. <code>pc.setRemoteDescription(desc)</code>의 실행이 성공하게되면, {{domxref("MediaDevices.getUserMedia()")}}를 사용해서 로컬 유저의 웹캠과 마이크에 대한접근 권한을 얻습니다. 앞의 과정이 성공하게되면, 스트림은 {{HTMLElement("video")}} 엘리먼트를 위한 소스로 지정됩니다. 이 스트림은 <code>previewElement</code>변수를 통해 참조가 가능해집니다.</p> + +<p>마지막으로 피어 연결을 통헤 caller에게 로컬 비디오 전달을 시작합니다. 이 과정은 {{domxref("MediaStream.getTracks()")}}에 의해 반환된 리스트를 iterate하고, 이들을 구성하는 <code>stream</code>과 함께 <code>addTrack()</code>에 전달되어 스트림에 각각의 트랙들을 추가합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-addtrack', 'RTCPeerConnection.addTrack()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.addTrack")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Intro_to_RTP">Introduction to the Real-time Transport Protocol (RTP)</a></li> + <li>{{domxref("RTCPeerConnection.ontrack")}}</li> + <li>{{event("track")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html new file mode 100644 index 0000000000..e9dbc9f893 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -0,0 +1,87 @@ +--- +title: RTCPeerConnection.canTrickleIceCandidates +slug: Web/API/RTCPeerConnection/canTrickleIceCandidates +translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">읽기 속성인 <strong>{{domxref("RTCPeerConnection")}}</strong> 속성의 <code><strong>canTrickleIceCandidates</strong></code>는 원격유저가 <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">trickled ICE candidates</a>를 승인 할 수 있는지의 여부를 알려주는 {{jsxref("Boolean")}}을 반환합니다.</span></p> + +<p><strong>ICE trickling</strong> 은 초기 offer 혹은 answer를 다른 유저에게 이미 전달을 했음에도 계속해서 candidate를 보내는 과정을 뜻합니다.</p> + +<p>이 속성은 {{domxref("RTCPeerConnection.setRemoteDescription()")}}가 호출된 후에만 설정됩니다. Signaling 프로토콜이 trickling 지원을 감지하는 방법을 제공해서 이 속성에 의존 할 필요가 없이 하는 것이 가장 좋은 방법입니다. WebRTC 브라우저는 항상 trickle ICE를 지원하게 되어있습니다. 하지만 몇몇 경우에 trickling이 지원이 되지 않거나 애초에 지원하는지를 알 수 없다면, 이 속성의 값이 이상한지 확인하고, 또한 초기 offer를 생성하고 전달하기 이전에 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}의 값이 <code>"completed"</code>로 바뀌기전까지 기다릴 수 있습니다. 이러한 방식으로 offer에 모든 candidate들이 포함되도록 만들 수 있습니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre> + +<h3 id="값">값</h3> + +<p>{{jsxref("Boolean")}}는 원격 유저가 trickled ICE candidate를 수용 할 수 있으면 <code>true </code>값이고, 그렇지 않으면 <code>false </code>값 입니다. 이미 원격 유저가 생성되었으면, 이 값은 <code>null</code> 입니다.</p> + +<div class="note"> +<p><strong>참조:</strong> 이 속성의 값은 로컬 피어가 {{domxref("RTCPeerConnection.setRemoteDescription()")}}를 호출하게 되면 결정됩니다. 여기에서 제공된 정보를 사용해서 ICE agent가 원격 유저가 trickled ICE candidate를 지원하는지에 대한 여부를 결정해줍니다.</p> +</div> + +<h2 id="예시">예시</h2> + +<pre class="brush: 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 + } +}); +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-canTrickleIceCandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li>{{domxref("RTCPeerConnection.addIceCandidate()")}}</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/close/index.html b/files/ko/web/api/rtcpeerconnection/close/index.html new file mode 100644 index 0000000000..763beca7d4 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/close/index.html @@ -0,0 +1,72 @@ +--- +title: RTCPeerConnection.close() +slug: Web/API/RTCPeerConnection/close +translation_of: Web/API/RTCPeerConnection/close +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><code><strong>RTCPeerConnection.close()</strong></code> 메소드로 피어 연결을 종료합니다. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.close(); +</pre> + +<p><em>이 메소드는 입력 패러미터가 없으며, 반환 값도 없습니다.</em></p> + +<p>이 메소드를 호출하게되면, 모든 진행 중인 ICE 프로세싱 및 활성화된 스트림을 종료하고, <code>RTCPeerConnection</code>의 ICE 에이전트를 종료합니다. 이 방법으로 ICE 에이전트에 의해 사용되는 리소스들 (TURN 허가 포함) 을 해제시킵니다. 모든 {{domxref("RTCRtpSender")}} 객체들은 이 메소드가 반환되면 정지됩니다. (아직 종료 중인 과정에 있을 수도 있습니다만, 사실상 정지됩니다.)</p> + +<p>이 메소드가 반환되면, {{domxref("RTCPeerConnection.signalingState")}}에 의해 반환된 signaling 상태가 <code>closed</code>로 됩니다.</p> + +<p>같은 원격 유저와의 새로운 연결 생성을 시도하기전에 이전에 존재하던 {{domxref("RTCPeerConnection")}}의 모든 참조 값들을 <code>delete</code>하십시오. 삭제되지 않은 참조 값들이 브라우저에서 오류를 초래 할 수 있습니다.</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: 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"); +};</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-close-void', 'RTCPeerConnection.close()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.close")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> + <li>{{domxref("RTCPeerConnection")}}</li> + <li>{{domxref("RTCPeerConnection.signalingState")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/connectionstate/index.html b/files/ko/web/api/rtcpeerconnection/connectionstate/index.html new file mode 100644 index 0000000000..a675cef4cb --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/connectionstate/index.html @@ -0,0 +1,111 @@ +--- +title: RTCPeerConnection.connectionState +slug: Web/API/RTCPeerConnection/connectionState +translation_of: Web/API/RTCPeerConnection/connectionState +--- +<p>{{APIRef("WebRTC")}}</p> + +<p>{{domxref("RTCPeerConnection")}} 인터페이스의 읽기 속성인 <strong><code>connectionState</code></strong>는 피어 연결의 현재 상태를 알려줍니다. 이 속성은 <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code> enum 값 중 하나를 문자열로 반환해줍니다.</p> + +<p>만약 이 속성의 값이 바뀌게되면, {{domxref("RTCPeerConnection")}} 인스턴스로 {{event("connectionstatechange")}} 이벤트가 전송됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre> + +<h3 id="값">값</h3> + +<p>연결의 현재 상태를 <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code> enum의 값 중 하나로 표시합니다.</p> + + + +<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3> + +<p><code>RTCPeerConnectionState</code> enum은 <code>RTCPeerConnection</code>이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 ({{domxref("RTCIceTransport")}} 혹은 {{domxref("RTCDtlsTransport")}}의 타입)의 상태 집합을 나타냅니다. </p> + +<table> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"new"</code></td> + <td> + <p>연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 <code>"new"</code> 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, 혹은 <code>"disconnected"</code>, 혹은 모든 연결의 전송이 끝났다는 <code>"closed"</code>상태.</p> + </td> + </tr> + <tr> + <td><code>"connecting"</code></td> + <td>하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 <code>RTCIceConnectionState</code>가 <code>"checking"</code> 혹은 <code>"connected"</code>이며, 그 어떤 전송도 <code>"failed"</code>상태가 아니여야합니다. <strong><<< Make this a link once I know where that will be documented</strong></td> + </tr> + <tr> + <td><code>"connected"</code></td> + <td>연결에 의해 사용되는 모든 ICE 전송이 사용 중 (<code>"connected"</code> 혹은 <code>"completed"</code>)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 <code>"connected"</code> 혹은 <code>"completed"</code>입니다.</td> + </tr> + <tr> + <td><code>"disconnected"</code></td> + <td>연결에 대한 최소 한 개의 ICE 전송이 <code>"disconnected"</code>상태이고, 그 외의 다른 전송 상태는 <code>"failed"</code>, <code>"connecting"</code>, 혹은 <code>"checking"</code>이 아님을 알려주는 값. </td> + </tr> + <tr> + <td><code>"failed"</code></td> + <td> + <p>연결에 대한 하나 혹은 여러개의 ICE 전송이 <code>"failed"</code>상태임을 알려주는 값.</p> + </td> + </tr> + <tr> + <td><code>"closed"</code></td> + <td> + <p><code>RTCPeerConnection</code> 개통되지 않음을 알려주는 값.</p> + + <p>2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> 안에 존재했었습니다. 따라서, {{domxref("RTCPeerConnection.signalingState", "signalingState")}}의 값을 통해 찾을 수 있습니다. </p> + </td> + </tr> + </tbody> +</table> + + + +<h2 id="예시">예시</h2> + +<pre class="brush: js">var pc = new RTCPeerConnection(configuration); + +/* ... */ + +var connectionState = pc.connectionState;</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-connectionState', 'RTCPeerConnection.connectionState') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.connectionState")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> + <li>{{domxref("RTCPeerConnection")}}</li> + <li>{{event("connectionstatechange")}}</li> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/createanswer/index.html b/files/ko/web/api/rtcpeerconnection/createanswer/index.html new file mode 100644 index 0000000000..a57adb7be1 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/createanswer/index.html @@ -0,0 +1,96 @@ +--- +title: RTCPeerConnection.createAnswer() +slug: Web/API/RTCPeerConnection/createAnswer +translation_of: Web/API/RTCPeerConnection/createAnswer +--- +<p>{{APIRef("WebRTC")}}</p> + +<p>{{domxref("RTCPeerConnection")}} 인터페이스의 <strong><code>createAnswer()</code></strong> 메소드는 WebRTC 연결 중 발생하는 offer/answer 네고시에이션에서 원격 유저로부터 받은 offer에 대한 {{Glossary("SDP")}} answer를 생성합니다. 이 answer는 세션이 이미 부착된 미디어, 브라우저에서 지원하는 코덱 및 옵션, 그리고 이미 수집된 {{Glossary("ICE")}} candidate에 대한 정보를 담고 잇습니다. Answer는 반환 된 {{jsxref("Promise")}}에 전달되고, 그 다음에는 네고시에이션 과정을 계속 진행하기 위해서 offer의 소스에게 전달되야합니다. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>aPromise</em> = <em>RTCPeerConnection</em>.createAnswer([<em>options</em>]); + +<em>RTCPeerConnection</em>.createAnswer(<em>successCallback</em>, <em>failureCallback</em>[, <em>options</em>]); {{deprecated_inline}}</pre> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Answer를 커스터마이즈 할 수 있는 옵션을 설정하는 객체입니다. 설정 가능한 옵션은 {{domxref("RTCAnswerOptions")}} 딕셔너리에 기반합니다.</dd> +</dl> + +<h3 id="더_이상_사용되지_않는_매개_변수">더 이상 사용되지 않는 매개 변수</h3> + +<p>이전 버전의 문서에서는 이 함수를 콜백 기반으로 사용하도록 되어있습니다. 콜백 기반 함수는 이제 더 이상 사용되지 않으며, <strong>사용하지 않는 것을 권장</strong>합니다. 이미 사용 중이라면, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="Promise 개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다."><code>Promise</code></a> 버전인 <code>createAnswer()</code>를 사용하도록 코드를 업데이트 하십시오. 이전 버전의 코드를 업데이트 하는 것을 쉽게 하기 위해 고안된 <code>createAnswer()</code>의 특정 변수에 대해 아래에서 설명합니다.</p> + +<dl> +</dl> + +<dl> + <dt><code>successCallback</code> {{deprecated_inline}}</dt> + <dd>신규 생성된 answer를 설명하는 단일 {{domxref("RTCSessionDescription")}} 객체에 전달되는 {{domxref("RTCSessionDescriptionCallback")}} 입니다.</dd> + <dt><code>failureCallback</code> {{deprecated_inline}}</dt> + <dd>왜 answer를 생성하는 요청이 실패했는지를 설명해주는 단일 {{domxref("DOMException")}} 객체에 전달되는 {{domxref("RTCPeerConnectionErrorCallback")}} 입니다.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Answer를 위해 요청된 옵션을 제공하는 {{domxref("RTCOfferOptions")}} 객체입니다. </dd> +</dl> + +<h3 id="예외처리">예외처리</h3> + +<dl> + <dt><code>NotReadableError</code></dt> + <dd>아이덴티티 제공자가 아이덴티티 주장을 제공 할 수 없음을 알려줍니다.</dd> + <dt><code>OperationError</code></dt> + <dd>SDP 생성이 어떤 이유로 실패했음을 알려줍니다. 이는 일반적인 failure catch-all exception 입니다.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p>다른 유저에게 전달되는 SDP answer를 가진 {{domxref("RTCSessionDescriptionInit")}} 딕셔너리에 준수하는 객체와 함께 호출되는 fulfillment 핸들러인 {{jsxref("Promise")}} 입니다.</p> + +<h2 id="예시">예시</h2> + +<p>아래는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서에서 나오는 코드의 일부입니다. 이 코드는 시그널링 채널을 통해 다른 유저에게 offer는 전달하는 메세지를 다루는 핸들러에서 나옵니다.</p> + +<div class="note"> +<p>주의 할 점은 이것이 시그널링 과정의 일부이며, 전송계층 구현에 대한 세부사항은 전적으로 개발자에게 달려있다는 것 입니다. 여기서는 <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a> 연결을 사용해서 다른 유저에게 "video-answer" 값이 있는 <code>type</code> 필드 및 offer를 보낸 장치에게 전달 할 answer를 담은 {{Glossary("JSON")}} 메세지를 보냅니다. 프로미스 fulfillment 핸들러의 다른 모든 항목들과 함께 <code>sendToServer()</code>함수로 전달되는 객체의 내용을 어떻게 할 지는 개발자의 디자인에 달려잇습니다.</p> +</div> + +<pre class="brush: 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); +</pre> + +<p>위의 예제는 {{domxref("RTCPeerConnection")}}가 신규 answer를 만들고 반환하도록 요청합니다. 프로미스 핸들러에 반환된 answer는 {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} 호출에 의해 연결의 로컬 엔드에 대한 description으로 설정됩니다.</p> + +<p>이 과정이 성공하면, answer는 적당한 아무 프로토콜을 사용해서 시그널링 서버에 전달됩니다. 그리고 {{jsxref("Promise.catch()")}}는 에러를 잡아내고 처리하기 위해 사용됩니다.</p> + +<p>{{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling", "Handling the invitation")}}를 확인해서 전체 코드를 확인해보십시오. 이 문서를 보면 시그널링 과정 및 answer가 어떻게 작동하는지를 이해 할 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-createanswer', 'createAnswer()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.createAnswer")}}</p> diff --git a/files/ko/web/api/rtcpeerconnection/createdatachannel/index.html b/files/ko/web/api/rtcpeerconnection/createdatachannel/index.html new file mode 100644 index 0000000000..c348421377 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/createdatachannel/index.html @@ -0,0 +1,146 @@ +--- +title: RTCPeerConnection.createDataChannel() +slug: Web/API/RTCPeerConnection/createDataChannel +translation_of: Web/API/RTCPeerConnection/createDataChannel +--- +<p>{{APIRef("WebRTC")}}</p> + +<p><span class="seoSummary">{{domxref("RTCPeerConnection")}} 인터페이스의 <strong><code>createDataChannel()</code></strong> 메소드는 어떤 형식의 데이터든 송신 할 수 있도록 원격 유저와 연결하는 신규 채널을 생성합니다.</span>이 방법은 이미지, 파일 전송, 문자 채팅, 게임 패킷 업데이트 등과 같은 백채널 컨텐츠에 유용하게 사용 가능합니다.</p> + +<p>연결 인터페이스에 신규 채널이 처음 추가되면, 재협상 과정이 {{event("negotiationneeded")}} 이벤트를 전달하여 시작됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>dataChannel</em> = <em>RTCPeerConnection</em>.createDataChannel(<em>label</em>[, <em>options</em>]);</pre> + +<h3 class="syntaxbox" id="매개변수">매개변수</h3> + +<dl> + <dt><code>label</code></dt> + <dd>사람이 읽을 수 있는 채널 이름입니다. 이름의 문자열은 65,535 바이트 보다 작아야합니다.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd><a href="#RTCDataChannelInit_dictionary"><code>RTCDataChannelInit</code> dictionary</a>가 데이터 채널에 대한 설정 옵션들을 제공합니다. </dd> +</dl> + +<h3 id="RTCDataChannelInit_딕셔너리">RTCDataChannelInit 딕셔너리</h3> + +<p><code>RTCDataChannelInit</code> 딕셔너리는 개발자의 필요에 따라 데이터 채널을 설정 할 때 객체로 전달되는 옵션 매개변수로 전달되는 객체에 포함 될 수 있는 다음의 필드들을 제공합니다:</p> + +<dl> + <dt><code>ordered</code> {{optional_inline}}</dt> + <dd>이 옵션은 {{domxref("RTCDataChannel")}}에 전달된 메세지가 보내진 순서대로 상대방에게 도착해야하는지 (<code>true</code>) 아니면 순서가 달라도 허용 (<code>false</code>)이 되는지를 결정합니다. <strong>기본 값: <code>true</code>.</strong></dd> + <dt><strong><code>maxPacketLifeTime</code> {{optional_inline}}</strong></dt> + <dd>불안정한 모드에서 메세지를 전송 할 때 최대 몇 초 동안 전송을 시도 할 것인지를 결정하는 옵션입니다. 이 값은 16bit의 부호가 없는 정수형이지만, 각 유저 에이전트는 적절하다고 판단되는 최대 값으로 지정 할 수 있습니다. (<strong>주의</strong>: <strong><code>maxPacketLifeTime</code></strong> 혹은 <strong><code>maxRetransmits</code> </strong>옵션 둘 중 하나만 사용해야함.) <strong>기본 값: <code>null</code>.</strong></dd> + <dt><code>maxRetransmits</code> {{optional_inline}}</dt> + <dd>불안정한 모드에서 메세지 전송이 실패하면 최대 몇 번을 재시도 할 것인지를 결정하는 옵션입니다. 이 값은 16bit의 부호가 없는 정수형이지만, 각 유저 에이전트는 적절하다고 판단되는 최대 값으로 지정 할 수 있습니다. (<strong>주의</strong>: <strong><code>maxPacketLifeTime</code></strong> 혹은 <strong><code>maxRetransmits</code> </strong>옵션 둘 중 하나만 사용해야함.) <strong>기본 값: <code>null</code>.</strong></dd> + <dt><code>protocol</code> {{optional_inline}}</dt> + <dd>{{domxref("RTCDataChannel")}}에 사용되는 서브 프로토콜의 이름입니다. 존재하지 않으면 이 옵션은 빈 문자열 (<code>""</code>)입니다. <strong>기본 값: 빈 문자열, <code>""</code>.</strong> 이 문자열은 65,535 바이트 보다 작아야합니다.</dd> + <dt><code>negotiated</code> {{optional_inline}}</dt> + <dd>기본 값일 경우 (<code>false</code>), 데이터채널은 밴드의 대역 내에서 협상됩니다. 이 때, 한 쪽은 <code>createDataChannel</code>를 호출하고, 다른 쪽에서는 {{domxref("RTCDataChannelEvent")}} 이벤트를 <code>ondatachannel</code> <code>EventHandler</code>를 사용해서 감청합니다. 반대로 <code>true</code> 일 경우, 밴드의 대역 범위를 벗어나도 재협상이 가능해집니다. 이 때에는 양쪽에서 합의된 id를 가진 <code>createDataChannel</code>을 호출하게됩니다. <strong>기본 값: <code>false</code>. </strong></dd> + <dt><code>id</code> {{optional_inline}}</dt> + <dd>채널에 대한 16bit 숫자형 ID입니다. 허용되는 값은 0에서 65534 사이입니다. 이 값을 지정하지 않으면, 유저 에이전트가 알아서 ID를 지정해줍니다.</dd> +</dl> + +<div class="note"> +<p><code>RTCDataChannelInit</code> 딕셔너리를 사용해서 설정이 가능한 옵션들은 {{domxref("RTCDataChannel")}} 인터페이스에서 설정이 가능한 특성들의 서브 셋을 뜻합니다.</p> +</div> + +<h3 id="반환_값">반환 값</h3> + +<p>지정한 <code>label</code>을 가지고, <code>options</code>에 지정한 옵션들을 사용하여 설정된 신규 {{domxref("RTCDataChannel")}} 객체입니다. 각 매개변수들을 지정하지 않으면, 기본 값으로 설정되어 생성됩니다.</p> + +<h3 id="예외처리">예외처리</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>{{domxref("RTCPeerConnection")}}가 닫혀있음을 뜻합니다.</dd> + <dt><code>TypeError</code></dt> + <dd>이 에러는 여러 상황에서 발생이 가능합니다: + <ul> + <li>label 혹은 프로토콜 문자열이 너무 길어서 발생합니다. 해당 문자열은 65,535바이트보다 작아야합니다. </li> + <li><code>id</code>가 65535여서 발생합니다. 이 값은 유효한 부호가 없는 16bit 이지만, <code>id</code> 값으로 허용되는 범위를 벗어나게됩니다. (0-65534 까지만 허용)</li> + </ul> + </dd> + <dt><code>SyntaxError</code></dt> + <dd><code>maxPacketLifeTime</code> 와 <code>maxRetransmits</code> 옵션에 모두 값이 지정되면 발생합니다. 둘 중 하나에만 non-<code>null</code> 값을 지정해야 합니다.</dd> + <dt><code>ResourceInUse</code></dt> + <dd><code>id</code> 값이 지정되었지만, 다른 {{domxref("RTCDataChannel")}}에서 이미 같은 이름을 사용 중이면 발생합니다.</dd> + <dt><code>OperationError</code></dt> + <dd>지정한 <code>id</code>가 이미 사용 중이거나, <code>id</code>가 지정되지 않았다면 모든 ID들이 사용 중이기 때문에 WebRTC 레이어에서 자동으로 <code>id</code> 생성이 불가능 할 때 발생합니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<p>아래의 예제에서는 어떻게 데이터 채널을 생성하고, 생성 할 때 메세지를 전송하고 수신하는 이벤트인 {{event("open")}}와 {{event("message")}}에대한 핸들러를 설정합니다. (onnegotiationneeded는 이미 설정이 되었다고 가정하고 간소화한 예입니다.)</p> + +<pre class="brush: 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); +}</pre> + +<pre class="brush: 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); + } +}</pre> + +<p>다른 방법으로는 양쪽에서 합의한 id를 사용하여 보다 대칭적인 대역 밴드 외 협상이 가능합니다. (id는 0입니다):</p> + +<pre class="brush: 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); +}</pre> + +<p>연결 및 채널이 구성되는 예를 더 자세히 알고 싶다면, <a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a>를 참조하십시오.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-createDataChannel-RTCDataChannel-DOMString-label-RTCDataChannelInit-dataChannelDict', 'createDataChannel()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.RTCPeerConnection.createDataChannel")}}</p> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{domxref("RTCDataChannel")}}</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li> + <li>{{domxref("RTCPeerConnection")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html new file mode 100644 index 0000000000..45b79a88f4 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html @@ -0,0 +1,76 @@ +--- +title: RTCPeerConnection.currentLocalDescription +slug: Web/API/RTCPeerConnection/currentLocalDescription +translation_of: Web/API/RTCPeerConnection/currentLocalDescription +--- +<p>{{WebRTCSidebar}}</p> + +<p>읽기 속성인 <code><strong>RTCPeerConnection.currentLocalDescription</strong></code>은 가장 최근에 {{domxref("RTCPeerConnection")}}가 성공적으로 네고시에이션을 마치고 원격 피어와 연결된, 연결인터페이스의 로컬 엔드를 설명하는 {{domxref("RTCSessionDescription")}} 객체를 반환합니다. 이외에도 설명에 의해 offer 혹은 answer가 처음으로 인스턴스화 되면 ICE 에이전트에 의해 이미 생성됬을수도 있는 ICE candidate 목록이 포함되어 있습니다.</p> + +<p><code>currentLocalDescription</code>을 바꾸기 위해서는, 이 값을 설정하도록 연쇄 이벤트를 작동시키는 {{domxref("RTCPeerConnection.setLocalDescription()")}}를 호출하십시오. 이 연쇄 이벤트가 어떻게 값을 바꾸고, 왜 즉시 값이 바뀌지 않는지에 대해 궁금하다면, {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 살펴보십시오.</p> + +<div class="note"> +<p>{{domxref("RTCPeerConnection.localDescription")}}와 다르게, <code>currentLocalDescription</code>는 연결 인터페이스의 로컬 엔드에 대한 현재 상태를 나타내는 값 입니다. <code>localDescription</code>은 연결 인터페이스가 현재 어떤 상태로 전환 중인지를 설명하는 값을 명시 할 수 있습니다.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>연결이 설정된 경우, 연결의 로컬 엔드에 대한 가장 최신 설명입니다. 성공적으로 연결이 설정이 되지 않았다면, 반환 값은 <code>null</code> 입니다.</p> + +<h2 id="예시">예시</h2> + +<p>이 예시는 <code>currentLocalDescription</code>을 확인하고, {{domxref("RTCSessionDescription")}} 객체의 <code>type</code> 및 <code>sdp</code> 필드를 담고 있는 경고 메세지를 출력합니다.</p> + +<pre class="brush: 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."); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-currentLocalDescription', 'RTCPeerConnection.currentLocalDescription') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.currentLocalDescription")}}</p> + +<div class="note"> +<p><code>currentLocalDescription</code>와 {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}}기능은 최근에 추가 되었습니다. 따라서, 이 기능을 지원하지 않는 브라우저에서는 {{domxref("RTCPeerConnection.localDescription", "localDescription")}}를 사용하십시오.</p> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{domxref("RTCPeerConnection.setLocalDescription()")}}, {{domxref("RTCPeerConnection.pendingLocalDescription")}}, {{domxref("RTCPeerConnection.localDescription")}}</li> + <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html new file mode 100644 index 0000000000..8b767ac446 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html @@ -0,0 +1,72 @@ +--- +title: RTCPeerConnection.currentRemoteDescription +slug: Web/API/RTCPeerConnection/currentRemoteDescription +translation_of: Web/API/RTCPeerConnection/currentRemoteDescription +--- +<p>{{WebRTCSidebar}}</p> + +<p>읽기 속성인 <code><strong>RTCPeerConnection.currentRemoteDescription</strong></code>은 마지막 {{domxref("RTCPeerConnection")}} 이후 가장 최근에 원격 유저와의 네고시에이션 및 연결을 성공적으로 마친 연결의 원격 엔드 포인트를 알려주는 {{domxref("RTCSessionDescription")}} 객체를 반환합니다. 추가적으로 이 속성은 description에 의해 표현되는 마지막 offer 및 answer가 처음 시작되면 ICE 에이전트에 의해 생성이 되었을 수도 있는 모든 ICE candidate들의 리스트를 포함합니다.</p> + +<p><code>currentRemoteDescription</code>를 바꾸기 위해서는, {{domxref("RTCPeerConnection.setRemoteDescription()")}}를 호출해서 이 값이 설정되도록 만들어주는 연속된 이벤트를 활성화하십시오. 왜 바꾸는 것이 바로 적용이 안되는지 및 어떻게 작동하는지 더 자세히 알고 싶다면, {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 참조하십시오.</p> + +<div class="note"> +<p>{{domxref("RTCPeerConnection.remoteDescription")}}와 다르게, 이 값은 연결의 로컬 엔드 포인트에 대한 실제 현재 상태를 보여줍니다. <code>remoteDescription</code>은 연결이 현재 어느 상태로 바뀌는지에 대한 설명도 명시 할 수 있습니다.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>설정이 되어있다면, 연결의 원격 엔드포인트에 대한 현재 설명을 반환합니다. 설정되어있지않으면, 이 값은 <code>null</code>입니다. </p> + +<h2 id="예시">예시</h2> + +<p>아래 예제는 <code>currentRemoteDescription</code> 를 확인하고 객체의 <code>type</code> 및 <code>sdp</code> 필드를 경고로 띄워줍니다.</p> + +<pre class="brush: js">var pc = new RTCPeerConnection(); +… +var sd = pc.currentRemoteDescription; +if (sd) { + alert("Local session: type='" + + sd.type + "'; sdp description='" + + sd.sdp + "'"); +} +else { + alert("No local session yet."); +} +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-currentRemoteDescription', 'RTCPeerConnection.currentRemoteDescription') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.currentRemoteDescription")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.remoteDescription")}}</li> + <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/generatecertificate/index.html b/files/ko/web/api/rtcpeerconnection/generatecertificate/index.html new file mode 100644 index 0000000000..d516a3435f --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/generatecertificate/index.html @@ -0,0 +1,69 @@ +--- +title: RTCPeerConnection.generateCertificate() +slug: Web/API/RTCPeerConnection/generateCertificate +translation_of: Web/API/RTCPeerConnection/generateCertificate +--- +<p>{{APIRef("WebRTC")}}</p> + +<p>{{domxref("RTCPeerConnection")}} 인터페이스의 <strong><code>generateCertificate()</code></strong> 메소드는 X.509 인증서와 해당하는 개인 키를 생성하고 저장합니다. 그리고 접근이 가능한 {{domxref("RTCCertificate")}}를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>cert</em> = RTCPeerConnection.generateCertificate(<em>keygenAlgorithm</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>keygenAlgorithm</code></dt> + <dd>키를 생성하는데 사용하는 알고리즘을 식별하는 {{domxref("DOMString")}}입니다.</dd> +</dl> + +<div class="note"> +<p><code>RTCPeerConnection.generateCertificate()</code> 은 정적인 메소드로, 따라서 인스턴스가 아닌 <code>RTCPeerConnection</code> 인터페이스에서 항상 호출됩니다.</p> +</div> + +<h3 id="반환_값">반환 값</h3> + +<p>{{domxref("RTCCertificate")}} 객체에 대한 참조 값입니다.</p> + +<h3 id="예제">예제</h3> + +<pre class="brush: 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]}); +});</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-generateCertificate-Promise-RTCCertificate--AlgorithmIdentifier-keygenAlgorithm', 'generateCertificate()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.generateCertificate")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> + <li>{{domxref("Cache")}}</li> + <li>{{domxref("WorkerGlobalScope.caches")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/getconfiguration/index.html b/files/ko/web/api/rtcpeerconnection/getconfiguration/index.html new file mode 100644 index 0000000000..c2d278cf1a --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/getconfiguration/index.html @@ -0,0 +1,78 @@ +--- +title: RTCPeerConnection.getConfiguration() +slug: Web/API/RTCPeerConnection/getConfiguration +translation_of: Web/API/RTCPeerConnection/getConfiguration +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><strong><code>RTCPeerConnection.getConfiguration()</code></strong> 메소드는 호출 된 {{domxref("RTCPeerConnection")}}의 현재 설정을 알려주는 {{domxref("RTCConfiguration")}} 객체를 반환합니다.</p> + +<p>여기서 반환되는 설정 값 은 가장 최근에 적용했던 {{domxref("RTCPeerConnection.setConfiguration","setConfiguration()")}} 혹은 <code>setConfiguration()</code>가 호출 되지 않았다면, <code>RTCPeerConnection</code>가 구성되면서 생긴 설정입니다. 이 설정은 연결에 의해 사용되는 ICE 서버의 리스트, 전송 정책에 관한 정보, 그리고 식별 정보를 포함합니다. </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>configuration</em> = <em>RTCPeerConnection</em>.getConfiguration();</pre> + +<h3 class="syntaxbox" id="매개변수">매개변수</h3> + +<p>이 메소드는 입력 변수를 받지 않습니다.</p> + +<h3 id="반환_값">반환 값</h3> + +<p>{{domxref("RTCPeerConnection")}}의 현재 설정을 알려주는 {{domxref("RTCConfiguration")}} 객체입니다.</p> + +<h2 id="예시">예시</h2> + +<p>아래의 예제는 활성화된 연결에서 이미 사용 중인 인증서가 없다면, 신규 인증서를 추가하는 작업입니다.</p> + +<pre class="brush: 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); + }); +} +</pre> + +<p>위의 예제에서는 {{domxref("RTCPeerConnection")}}의 현재 설정을 가져 온 다음에, 인증서가 존재하는지 확인하기 위해 (1) 설정에 <code>certificates</code>값이 포함되어 있는지, (2) 길이가 0인지를 확인합니다.</p> + +<p>만약 인증서가 존재하지 않으면, {{domxref("RTCPeerConnection.generateCertificate()")}}가 호출되어 신규 인증서를 만들어냅니다. 여기에 fulfillment 핸들러를 제공해서 새로 만들어진 인증서를 포함하는 배열을 현재 설정에 추가하고, {{domxref("RTCPeerConnect.setConfiguration", "setConfiguration()")}}에 전달해서 연결에 인증서를 추가합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-getConfiguration-RTCConfiguration', 'getConfiguration()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.RTCPeerConnection.getConfiguration")}}</p> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{domxref("RTCPeerConnection.setConfiguration()")}}</li> + <li>{{domxref("RTCConfiguration")}}</li> + <li>{{domxref("RTCPeerConnection")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html b/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html new file mode 100644 index 0000000000..e5c826c811 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html @@ -0,0 +1,60 @@ +--- +title: RTCPeerConnection.getIdentityAssertion() +slug: Web/API/RTCPeerConnection/getIdentityAssertion +translation_of: Web/API/RTCPeerConnection/getIdentityAssertion +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><code><strong>RTCPeerConnection.getIdentityAssertion()</strong></code> 메소드는 식별 주장의 수집을 시작합니다. 이 메소드는 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"closed"</code> 상태가 아닐 때에만 유효합니다.</p> + +<p>이 메소드는 즉시 반환하게됩니다. 식별 주장이 생성 될 수 없다면, 객체에 {{event("idpassertionerror")}}가 전달됩니다. </p> + +<p>이는 자동으로 수행되기 때문에, 어플리케이션에서 <code>RTCPeerConnection</code>을 직접 다룰 일은 없습니다.명시적인 호출로 필요한 것이 무엇인지 정도만 알 수 있습니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>pc</em>.getIdentityAssertion();</code> +</pre> + +<dl> +</dl> + +<p><em>이 메소드에는 매개변수 혹은 반환 값이 없습니다. </em></p> + +<h2 id="Example" name="Example">예시</h2> + +<pre class="brush: js">var pc = new PeerConnection(); + +pc.getIdentityAssertion(); // Not mandatory, but we know that we will need it in the future. +</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-getIdentityAssertion-void', 'RTCPeerConnection.getIdentityAssertion()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.getIdentityAssertion")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/getreceivers/index.html b/files/ko/web/api/rtcpeerconnection/getreceivers/index.html new file mode 100644 index 0000000000..4f2802a7ac --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/getreceivers/index.html @@ -0,0 +1,55 @@ +--- +title: RTCPeerConnection.getReceivers() +slug: Web/API/RTCPeerConnection/getReceivers +translation_of: Web/API/RTCPeerConnection/getReceivers +--- +<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div> + +<p><code><strong>RTCPeerConnection.getReceivers()</strong></code> 메소드는 {{domxref("RTCRtpReceiver")}} 객체의 배열을 반환합니다. 이 배열의 각 요소들은 RTP 리시버를 나타냅니다. 각각의 RTP 리시버는 {{domxref("RTCPeerConnection")}}에 대한 {{domxref("MediaStreamTrack")}}의 데이터를 수신하고 디코딩 합니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>receivers</em>[] = <em>RTCPeerConnection</em>.getReceivers(); +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>연결에 대한 각 트랙마다 한 개씩 {{domxref("RTCRtpReceiver")}} 객체의 배열을 반환합니다. R연결에 대한 RTP 리시버가 없으면, 배열은 빈 상태입니다.</p> + +<p><code>RTCReceiver</code> 인스턴스에서 반환되는 순서는 명세서에 정의되어있지 않고, <code>getSenders()</code>호출을 사용해서 다음 배열의 요소로 바꿀 수 있습니다.</p> + +<h2 id="Example" name="Example">예시</h2> + +<p>tbd</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-getsenders', 'RTCPeerConnection.getSenders()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.getReceivers")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC_API">WebRTC</a></li> + <li>{{domxref("RTCRtpSender")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/getsenders/index.html b/files/ko/web/api/rtcpeerconnection/getsenders/index.html new file mode 100644 index 0000000000..ca05cf45dd --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/getsenders/index.html @@ -0,0 +1,55 @@ +--- +title: RTCPeerConnection.getSenders() +slug: Web/API/RTCPeerConnection/getSenders +translation_of: Web/API/RTCPeerConnection/getSenders +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">{{domxref("RTCPeerConnection")}}의 <code><strong>getSenders()</strong></code> 메소드는 {{domxref("RTCRtpSender")}} 객체의 배열을 반환합니다. 배열의 각 객체는 하나의 트랙의 데이터의 송신을 담당하는 RTP sender를 나타냅니다.</span> Sender 객체는 트랙 데이터의 인코딩과 송신을 확인하고, 조작 할 수 있는 메소드와 속성들을 제공합니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>senders</em> = <em>RTCPeerConnection</em>.getSenders(); +</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>연결의 각 트랙마다 한 개의 {{domxref("RTCRtpSender")}} 객체 배열을 반환합니다. 연결의 RTP sender가 존재하지 않으면, 배열은 빈 상태입니다.</p> + +<p><code>RTCRtpSender</code>s 의 반환 값 순서는 정의되어있지 않고, <code>getSenders()</code> 호출을 통해서 다음 배열 요소로 바꿀 수 있습니다.</p> + +<h2 id="Example" name="Example">예시</h2> + +<p>tbd</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-getsenders', 'RTCPeerConnection.getSenders()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.getSenders")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC_API">WebRTC</a></li> + <li>{{domxref("RTCRtpSender")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/gettransceivers/index.html b/files/ko/web/api/rtcpeerconnection/gettransceivers/index.html new file mode 100644 index 0000000000..98d79ccbc5 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/gettransceivers/index.html @@ -0,0 +1,63 @@ +--- +title: RTCPeerConnection.getTransceivers() +slug: Web/API/RTCPeerConnection/getTransceivers +translation_of: Web/API/RTCPeerConnection/getTransceivers +--- +<p>{{APIRef("WebRTC")}}</p> + +<p>{{domxref("RTCPeerConnection")}} 인터페이스의 <code><strong>getTransceivers()</strong></code> 메소드는 연결에서 데이터 전송 및 수신에 사용되는 {{domxref("RTCRtpTransceiver")}} 객체의 리스트를 반환합니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>transceiverList</em> = RTC<em>PeerConnection</em>.getTransceivers();</pre> + +<h3 id="매개변수">매개변수</h3> + +<p>없음.</p> + +<h3 id="반환_값">반환 값</h3> + +<p><code>RTCPeerConnection</code>에 대한 모든 미디어의 전송/수신을 관리하는 트랜시버를 나타내는 {{domxref("RTCRtpTransceiver")}} 객체의 배열입니다. 리스트의 순서는 트랜시버가 연결에 추가된 순서대로 정렬되어있습니다.</p> + +<h2 id="예시">예시</h2> + +<p>아래 코드는 <code>RTCPeerConnection</code>와 연관된 모든 트랜시버를 중지시킵니다.</p> + +<pre class="brush: js">pc.getTransceivers.forEach(transceiver => { + transceiver.stop(); +}); +</pre> + +<h2 id="설명서">설명서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">설명서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName("WebRTC 1.0", "#dom-rtcpeerconnection-gettransceivers", "RTCPeerConnection.getTransceivers()")}}</td> + <td>{{Spec2("WebRTC 1.0")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.RTCPeerConnection.getTransceivers")}}</p> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li> + <li>{{domxref("RTCPeerConnection.addTransceiver()")}}</li> + <li>{{jsxref("Array.forEach()")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html b/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html new file mode 100644 index 0000000000..9d7a094688 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html @@ -0,0 +1,85 @@ +--- +title: RTCPeerConnection.iceGatheringState +slug: Web/API/RTCPeerConnection/iceGatheringState +translation_of: Web/API/RTCPeerConnection/iceGatheringState +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p>읽기 속성인 <code><strong>RTCPeerConnection.iceGatheringState</strong></code>는 연결 인터페이스의 ICE 수집 상태를 알려주는 <code>RTCIceGatheringState</code>타입의 Enum을 반환합니다. 이 속성을 활용하면, ICE candidate 수집 과정이 언제 종료되는지 감지 할 수 있습니다. </p> + +<p><code><a href="/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event">icegatheringstatechange</a></code>타입의 이벤트 감시를 통해 이 속성 값이 언제 변하는지를 확인 할 수 있습니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"> var state = <em>RTCPeerConnection</em>.iceGatheringState;</pre> + +<h3 id="값">값</h3> + +<p>반환되는 값은 <code>RTCIceGatheringState</code>타입의 Enum입니다. </p> + + + +<h3 id="RTCIceGatheringState_enum섹션">RTCIceGatheringState enum<a href="https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection#RTCIceGatheringState_enum">섹션</a></h3> + +<p><a href="https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection/iceGatheringState" title="읽기 속성인 RTCPeerConnection.iceGatheringState는 연결 인터페이스의 ICE 수집 상태를 알려주는 RTCIceGatheringState타입의 Enum을 반환합니다. 이 속성을 활용하면, ICE candidate 수집 과정이 언제 종료되는지 감지 할 수 있습니다."><code>RTCPeerConnection.iceGatheringState</code></a> 속성을 사용하게되면 반환되는 <code>RTCIceGatheringState</code> enum은 현재의 ICE 수집 상태를 반영하여 알려주는 문자열 상수입니다. <code><a href="https://developer.mozilla.org/ko/docs/Web/Reference/Events/icegatheringstatechange" rel="nofollow" title="/ko/docs/Web/Reference/Events/icegatheringstatechange">icegatheringstatechange</a></code> 타입의 이벤트를 감시해서 이 값이 언제 변하는지 확인 할 수 있습니다.</p> + +<table> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"new"</code></td> + <td>피어 연결이 새로 생성되었지만, 아직 네트워킹은 시작되지 않은 상태</td> + </tr> + <tr> + <td><code>"gathering"</code></td> + <td>ICE 에이전트가 연결을 위한 ICE candidate를 수집하는 과정에 있음을 알려주는 상태</td> + </tr> + <tr> + <td><code>"complete"</code></td> + <td>ICE 에이전트가 candidate 수집을 완료한 상태. 새로운 인터페이스가 추가되거나, 신규 ICE 서버가 추가와 같이 신규 ICE candidate를 수집해야하는 상황이 오면, 상태가 <code>complete</code>에서 <code>gathering</code>으로 다시 바뀝니다.</td> + </tr> + </tbody> +</table> + +<h2 id="예시"><br> + 예시</h2> + +<pre>var pc = new RTCPeerConnection(); +var state = pc.iceGatheringState;</pre> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-iceGatheringState', 'RTCPeerConnection.iceGatheringState') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.iceGatheringState")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{event("icegatheringstatechange")}}</li> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html b/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html new file mode 100644 index 0000000000..ad713beeda --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html @@ -0,0 +1,102 @@ +--- +title: 'RTCPeerConnection: icegatheringstatechange event' +slug: Web/API/RTCPeerConnection/icegatheringstatechange_event +translation_of: Web/API/RTCPeerConnection/icegatheringstatechange_event +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary"><strong><code>icegatheringstatechange</code></strong> 이벤트는 {{Glossary("ICE")}} candidate 수집 과정이 변경되면, {{domxref("RTCPeerConnection")}}의 이벤트 핸들러인 {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}}로 전달됩니다.</span> 이는 연결의 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} 속성이 변경되었다는 것을 뜻합니다.</p> + +<p>ICE가 처음 연결 candidate들을 수집하게되면 값이 <code>new</code>에서 <code>gathering</code>으로 바뀌게 되고, 이는 연결에 대한 candidate 설정들을 수집하는 과정 중에 있다는 뜻입니다. 값이 complete가 되면, RTCPeerConnection을 구성하는 모든 트랜스포트들이 ICE candidate 수집을 완료한 상태입니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">취소가능여부</th> + <td>No</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">이벤트 핸들러</th> + <td>{{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> ICE candidate 수집 과정이 완료되었는지는 <code>icegatheringstatechange</code>이벤트와 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}의 값이 <code>complete</code>로 바뀌는 것을 확인하면 알 수 있습니다. 하지만, 더 쉬운 방법으로는 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 이벤트에 대한 핸들러가 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성의 값이 null로 변하는 시점을 체크하도록 할 수 있습니다. 이 속성이 <code>null</code> 값으로 바뀌었다는 것은 즉 모든 candidate 수집이 완료되었다는 뜻입니다. </p> +</div> + +<h2 id="예시">예시</h2> + +<p>아래 예제는 <code>icegatheringstatechange</code> 이벤트에대한 핸들러를 생성합니다.</p> + +<pre class="brush: js">pc.onicegatheringstatechange = ev => { + let connection = ev.target; + + switch(connection.iceGatheringState) { + case "gathering": + /* candidate 수집 과정 시작 */ + break; + case "complete": + /* candidate 수집 완료 */ + break; + } +} +</pre> + +<p>아래처럼 {{domxref("EventTarget.addEventListener", "addEventListener()")}}을 사용해서 <code>icegatheringstatechange</code> 이벤트에 대한 변경을 감지하는 리스너를 추가 할 수 있습니다.</p> + +<pre class="brush: js">pc.addEventListener("icegatheringstatechange", ev => { + let connection = ev.target; + + switch(connection.iceGatheringState) { + case "gathering": + /* candidate 수집 과정 시작 */ + break; + case "complete": + /* candidate 수집 완료 */ + break; + } +}, false);</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebRTC 1.0', '#event-icegatheringstatechange', 'icecandidatestatechange')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.icegatheringstatechange_event")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/index.html b/files/ko/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..295552696c --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/index.html @@ -0,0 +1,356 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +<p>{{APIRef('WebRTC')}}{{draft}}</p> + +<p><span class="seoSummary"><strong><code>RTCPeerConnection</code> </strong>인터페이스는 로컬 컴퓨터와 원격 피어 간의 WebRTC 연결을 담당하며 원격 피어에 연결하기 위한 메서드들을 제공하고, 연결을 유지하고 연결 상태를 모니터링하며 더 이상 연결이 필요하지 않을 경우 연결을 종료합니다.</span></p> + +<p>{{InheritanceDiagram}}</p> + +<p>{{InterfaceOverview("WebRTC")}}</p> + +<h3 id="사용되지_않는_메서드">사용되지 않는 메서드</h3> + +<p>다음 메서드는 오래 전부터 사용되지 않았으며 모든 주요 브라우저에서 구현되지 않았습니다.</p> + +<dl> + <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt> + <dd>특정 {{domxref("MediaStreamTrack")}}와 관련된 신규 {{domxref("RTCDTMFSender")}}를 생성합니다. {{domxref("RTCDTMFSender")}}는 연결을 통해 {{Glossary("DTMF")}} 전화 신호를 보낼 수 있습니다. </dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<p>{{domxref("EventTarget.addEventListener", "addEventListener()")}}를 이용하여 아래 이벤트를 리스닝하거나 이 인터페이스의 <code>on<em>eventname</em></code> 프로퍼티에 이벤트 리스너를 할당할 수 있습니다.</p> + +<dl> + <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt> + <dd><code>RTCPeerConnection</code>의 연결상태가 바뀌면, <code>RTCPeerConnection</code> 객체에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다. </dd> + <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt> + <dd>원격 피어가 {{domxref("RTCDataChannel")}}을 연결에 추가하게되면 <code>RTCPeerConnection</code> 객체에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> + <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt> + <dd>특정 ICE candidate가 원격 피어에 전달되도록 피어 연결에 요청을 보냅니다. 또한, {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> + <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt> + <dd>ICE candidate를 수집하는 과정에서 에러가 발생하면 연결에 {{domxref("RTCPeerConnectionIceErrorEvent")}} 에러 타입을 보냅니다. 이는 또한, {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> + <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt> + <dd>연결이 끊기는 상황과 같이 ICE 연결의 상태가 변하게되면 <code>RTCPeerConnection</code>에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> +</dl> + +<dl> + <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt> + <dd>{{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}에 의해 반영되는 ICE 계층의 수집 상태가 변하면, <code>RTCPeerConnection</code>에 전달합니다. 계층의 수집 상태는 ICE 네고시에이션이 아직 시작을 안했거나 (<code>new</code>), 시작하고 candidate를 수집하는 중이거나 (<code>gathering</code>), 혹은 수집이 완료 (<code>complete</code>)된 상태로 나눠집니다. 이는 또한, {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> + <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt> + <dd>연결과 관련이 있는 하나의 {{domxref("MediaStreamTrack")}} 객체가 있는 {{domxref("MediaStreamTrack.isolated", "isolated")}} 속성의 값이 변하면, <code>RTCPeerConnection</code>에 전달합니다. 만약 미디어 컨텐츠가 인증이 되어있지 않거나, 트랙이 cross-origin source (CORS)에서 오는 것이라면 트랙의 상태는 {{domxref("MediaStreamTrack.isolated", "isolated")}}이 됩니다. 이는 또한, {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> +</dl> + +<dl> + <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt> + <dd>ICE 연결의 네고시에이션 혹은 네고시에이션을 다시 수행해야 할 때, <code>RTCPeerConnection</code>에 전달됩니다. 이는 연결이 처음 생성되는 순간뿐만아니라 네트워크 조건이 바뀌게 되면 발생합니다. 리시버는 offer를 생성하고, 이를 다른 피어에 전달하기위해 응답해야합니다. 이는 또한, {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> + <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt> + <dd>연결의 ICE 신호 상태가 변경되면 <code>signalingstatechange</code>이벤트를 <code>RTCPeerConnection</code>에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> + <dt>{{domxref("RTCPeerConnection.statsended_event", "statsended")}}</dt> + <dd>모니터링이 되던 statistics 객체가 삭제되면, <code>statsended</code>이벤트를 전달합니다. {{domxref("RTCStatsEvent")}}는 삭제된 객체의 마지막 리포트를 포함합니다. 마지막 리포트를 전달받고나서 여러개의 객체가 삭제되었다면, 여러 객체에 대한 마지막 리포트를 포함합니다. 예를 들어 연결이 종료되거나 삭제되면, statistics 객체는 삭제됩니다. </dd> + <dd>The <code>statsended</code> event is sent when a statistics object being monitored is deleted. The {{domxref("RTCStatsEvent")}} includes the final report on the deleted object (or objects, if multiple objects have been deleted since the last report was delivered). A statistics object is deleted, for example, when the connection is closed and deleted.<br> + Available as the {{domxref("RTCPeerConnection.onstatsended", "onstatsended")}} event handler property.</dd> + <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt> + <dd>연결을 구성하고 있는 {{domxref("RTCRtpReceiver")}} 인스턴스들 중 하나에 신규 트랙이 추가된 후에, <code>track</code>이벤트를 보냅니다. 이는 또한, {{domxref("RTCPeerConnection.ontrack", "ontrack")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd> +</dl> + +<h3 id="사용되지_않는_이벤트">사용되지 않는 이벤트</h3> + +<dl> + <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt> + <dd>Sent when a new {{domxref("MediaStream")}} has been added to the connection. Instead of watching for this obsolete event, you should watch each for {{domxref("RTCPeerConnection.track_event", "track")}} events; one is sent for each {{domxref("MediaStreamTrack")}} added to the connection.<br> + Available as the {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} event handler property.</dd> + <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt> + <dd>In old versions of the WebRTC specification, this event was used to indicate that an identity assertion is available. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.<br> + Also available using the {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}} event handler property.</dd> + <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt> + <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to generate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br> + Also available as the {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}} event handler property.</dd> + <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt> + <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to validate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br> + Also available using the {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} event handler property.</dd> + <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt> + <dd>In old versions of the WebRTC specification, this event was used to deliver a received identity. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.</dd> + <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt> + <dd>Sent to the <code>RTCPeerConnection</code> when a {{domxref("MediaStream")}} is removed from the connection. Instead of watching for this obsolete event, you should watch each stream for {{domxref("MediaStream.removetrack_event", "removetrack")}} events on each stream within the <code>RTCPeerConnection</code>.<br> + Also available as the {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} event handler property.</dd> +</dl> + +<h2 id="상수">상수</h2> + +<h3 id="RTCBundlePolicy_열거체">RTCBundlePolicy 열거체</h3> + +<p>The <code>RTCBundlePolicy</code> enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> for bundling multiple media streams on a single transport link.</p> + +<div class="note"> +<p>In technical terms, a BUNDLE lets all media flow between two peers flow across a single <strong>5-tuple</strong>; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"balanced"</code></td> + <td>On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.</td> + </tr> + <tr> + <td><code>"max-compat"</code></td> + <td>The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.</td> + </tr> + <tr> + <td><code>"max-bundle"</code></td> + <td>The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.</td> + </tr> + </tbody> +</table> + +<h3 id="RTCIceConnectionState_열거체">RTCIceConnectionState 열거체</h3> + +<p>The <code>RTCIceConnectionState</code> enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"new"</code></td> + <td>The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).</td> + </tr> + <tr> + <td><code>"checking"</code></td> + <td>The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.</td> + </tr> + <tr> + <td><code>"connected"</code></td> + <td>A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.</td> + </tr> + <tr> + <td><code>"completed"</code></td> + <td>The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.</td> + </tr> + <tr> + <td><code>"failed"</code></td> + <td>The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.</td> + </tr> + <tr> + <td><code>"disconnected"</code></td> + <td>Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than <code>"failed"</code> and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the <code>"connected"</code> state.</td> + </tr> + <tr> + <td><code>"closed"</code></td> + <td>The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.</td> + </tr> + </tbody> +</table> + +<h3 id="RTCIceGatheringState_enum">RTCIceGatheringState enum</h3> + +<p>{{domxref("RTCPeerConnection.iceGatheringState")}} 속성을 사용하게되면 반환되는 <code>RTCIceGatheringState</code> enum은 현재의 ICE 수집 상태를 반영하여 알려주는 문자열 상수입니다. {{event("icegatheringstatechange")}} 타입의 이벤트를 감시해서 이 값이 언제 변하는지 확인 할 수 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"new"</code></td> + <td>피어 연결이 새로 생성되었지만, 아직 네트워킹은 시작되지 않은 상태</td> + </tr> + <tr> + <td><code>"gathering"</code></td> + <td>ICE 에이전트가 연결을 위한 ICE candidate를 수집하는 과정에 있음을 알려주는 상태</td> + </tr> + <tr> + <td><code>"complete"</code></td> + <td>ICE 에이전트가 candidate 수집을 완료한 상태. 새로운 인터페이스가 추가되거나, 신규 ICE 서버가 추가와 같이 신규 ICE candidate를 수집해야하는 상황이 오면, 상태가 <code>complete</code>에서 <code>gathering</code>으로 다시 바뀝니다.</td> + </tr> + </tbody> +</table> + +<h3 id="RTCIceTransportPolicy_enum">RTCIceTransportPolicy enum</h3> + +<p>The <code>RTCIceTransportPolicy</code> enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"all"</code></td> + <td>All ICE candidates will be considered.</td> + </tr> + <tr> + <td><code>"public" </code>{{obsolete_inline}}</td> + <td>Only ICE candidates with public IP addresses will be considered. <em>Removed from the specification's May 13, 2016 working draft.</em></td> + </tr> + <tr> + <td><code>"relay"</code></td> + <td>Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.</td> + </tr> + </tbody> +</table> + +<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3> + +<p><code>RTCPeerConnectionState</code> enum은 <code>RTCPeerConnection</code>이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 ({{domxref("RTCIceTransport")}} 혹은 {{domxref("RTCDtlsTransport")}}의 타입)의 상태 집합을 나타냅니다. </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"new"</code></td> + <td> + <p>연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 <code>"new"</code> 상태이고, 그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, 혹은 <code>"disconnected"</code>, 혹은 모든 연결의 전송이 끝났다는 <code>"closed"</code>상태.</p> + </td> + </tr> + <tr> + <td><code>"connecting"</code></td> + <td>하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 <code>RTCIceConnectionState</code>가 <code>"checking"</code> 혹은 <code>"connected"</code>이며, 그 어떤 전송도 <code>"failed"</code>상태가 아니여야합니다. <strong><<< Make this a link once I know where that will be documented</strong></td> + </tr> + <tr> + <td><code>"connected"</code></td> + <td>연결에 의해 사용되는 모든 ICE 전송이 사용 중 (<code>"connected"</code> 혹은 <code>"completed"</code>)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 <code>"connected"</code> 혹은 <code>"completed"</code>입니다.</td> + </tr> + <tr> + <td><code>"disconnected"</code></td> + <td>연결에 대한 최소 한 개의 ICE 전송이 <code>"disconnected"</code>상태이고, 그 외의 다른 전송 상태는 <code>"failed"</code>, <code>"connecting"</code>, 혹은 <code>"checking"</code>이 아님을 알려주는 값. </td> + </tr> + <tr> + <td><code>"failed"</code></td> + <td> + <p>연결에 대한 하나 혹은 여러개의 ICE 전송이 <code>"failed"</code>상태임을 알려주는 값.</p> + </td> + </tr> + <tr> + <td><code>"closed"</code></td> + <td> + <p><code>RTCPeerConnection</code> 개통되지 않음을 알려주는 값.</p> + + <p>2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> 안에 존재했었습니다. 따라서, {{domxref("RTCPeerConnection.signalingState", "signalingState")}}의 값을 통해 찾을 수 있습니다. </p> + </td> + </tr> + </tbody> +</table> + +<h3 id="RTCRtcpMuxPolicy_enum">RTCRtcpMuxPolicy enum</h3> + +<p>The <code>RTCRtcpMuxPolicy</code> enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <strong><<<add a link to info about multiplexed RTCP.</strong></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"negotiate"</code></td> + <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("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.</td> + </tr> + <tr> + <td><code>"require"</code></td> + <td>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.</td> + </tr> + </tbody> +</table> + +<h3 id="RTCSignalingState_enum">RTCSignalingState enum</h3> + +<p>The <code>RTCSignalingState</code> enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">상수명</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>"stable"</code></td> + <td>There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are <code>null</code>; it may also mean that negotiation is complete and a connection has been established.</td> + </tr> + <tr> + <td><code>"have-local-offer"</code></td> + <td>The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.</td> + </tr> + <tr> + <td><code>"have-remote-offer"</code></td> + <td>The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td> + </tr> + <tr> + <td><code>"have-local-pranswer"</code></td> + <td>The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.</td> + </tr> + <tr> + <td><code>"have-remote-pranswer"</code></td> + <td>A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling <code>setLocalDescription()</code>.</td> + </tr> + <tr> + <td><code>"closed"</code> {{obsolete_inline}}</td> + <td> + <p>The connection is closed.</p> + + <div class="note"> + <p>This value moved into the <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> in the May 13, 2016 draft of the specification, as it reflects the state of the <code>RTCPeerConnection</code>, not the signaling connection. You now detect a closed connection by checking for {{domxref("RTCPeerConnection.connectionState", "connectionState")}} to be <code>"closed"</code> instead.</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">사양명</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div></div> + +<div>{{Compat("api.RTCPeerConnection")}}</div> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li> + <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/localdescription/index.html b/files/ko/web/api/rtcpeerconnection/localdescription/index.html new file mode 100644 index 0000000000..0525c9f0eb --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/localdescription/index.html @@ -0,0 +1,64 @@ +--- +title: RTCPeerConnection.localDescription +slug: Web/API/RTCPeerConnection/localDescription +translation_of: Web/API/RTCPeerConnection/localDescription +--- +<p>{{WebRTCSidebar}}{{SeeCompatTable}}</p> + +<p>읽기 속성인 <code><strong>RTCPeerConnection.localDescription</strong></code>는 연결의 로컬 엔드에 대한 세션을 설명하는 {{domxref("RTCSessionDescription")}}를 반환합니다. 아직 설정이 안되어있다면, <strong>null</strong> 입니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"> var <em>sessionDescription</em> = <em>peerConnection</em>.localDescription;</pre> + +<p>기본적으로 반환 값은 해당 속성이 <code>null</code>이 아닐 때에만 {{domxref("RTCPeerConnection.pendingLocalDescription")}}의 값입니다. 그렇지 않은 경우에는 {{domxref("RTCPeerConnection.currentLocalDescription")}}의 값이 반환됩니다. 이 알고리즘 및 사용하는 이유에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 참조하십시오.</p> + +<h2 id="예시">예시</h2> + +<p>아래의 예시에서는 <code>localDescription</code>를 확인하고, {{domxref("RTCSessionDescription")}} 객체의 타입과 sdp필드를 담고있는 경고를 띄웁니다.</p> + +<pre class="brush: js">var pc = new RTCPeerConnection(); +… +var sd = pc.localDescription; +if (sd) { + alert("Local session: type='" + + sd.type + "'; sdp description='" + + sd.sdp + "'"); +} +else { + alert("No local session yet."); +} +</pre> + +<h2 id="사양서">사양서</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-localDescription', 'RTCPeerConnection.localDescription') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.localDescription")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{domxref("RTCPeerConnection.setLocalDescription()")}}, {{domxref("RTCPeerConnection.pendingLocalDescription")}}, {{domxref("RTCPeerConnection.currentLocalDescription")}}</li> + <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html b/files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html new file mode 100644 index 0000000000..5505f509eb --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html @@ -0,0 +1,65 @@ +--- +title: RTCPeerConnection.onconnectionstatechange +slug: Web/API/RTCPeerConnection/onconnectionstatechange +translation_of: Web/API/RTCPeerConnection/onconnectionstatechange +--- +<p>{{APIRef("WebRTC")}}</p> + +<p><span class="seoSummary"><strong><code>RTCPeerConnection.onconnectionstatechange</code></strong> 속성에 {{domxref("RTCPeerConnection")}} 인스턴스에서 발생하는 {{event("connectionstatechange")}} 이벤트를 처리하기 위해 호출되는 {{domxref("EventHandler")}}를 정의하게됩니다. 이 이벤트는 연결의 상태 집합체가 변할 때마다 발생합니다. 이 상태 집합체는 연결에 의해 사용되는 각각의 네트워크 전송 상태들의 묶음입니다.</span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.onconnectionstatechange = <em>eventHandler</em>; +</pre> + +<h3 id="값">값</h3> + +<p>{{domxref("RTCPeerConnection")}}에서 {{event("connectionstatechange")}} 이벤트가 생길 때, 브라우저에 의해 호출되는 함수입니다. 이 함수는 {{domxref("Event")}} 타입의 객체인 단일 패러미터를 입력인자로 받습니다. 해당 이벤트 객체는 특별한 정보를 담고 있지는 않습니다. 새로운 상태를 확인하려면 피어 연결의 {{domxref("RTCPeerConnection.connectionState", "connectionState")}}에 해당하는 값을 살펴보십시오. </p> + +<h2 id="예시">예시</h2> + +<pre class="brush: 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; + } +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onconnectionstatechange', 'RTCPeerConnection.onconnectionstatechange') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.onconnectionstatechange")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{event("connectionstatechange")}} 이벤트와 이 이벤트의 타입인 {{domxref("Event")}}을 참조하십시오.</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/ondatachannel/index.html b/files/ko/web/api/rtcpeerconnection/ondatachannel/index.html new file mode 100644 index 0000000000..d32f6c9b80 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/ondatachannel/index.html @@ -0,0 +1,62 @@ +--- +title: RTCPeerConnection.ondatachannel +slug: Web/API/RTCPeerConnection/ondatachannel +translation_of: Web/API/RTCPeerConnection/ondatachannel +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><code><strong>RTCPeerConnection.ondatachannel</strong></code> 속성은 {{domxref("RTCPeerConnection")}}에서 발생하는 {{event("datachannel")}} 이벤트에 의해 호출되는 {{domxref("EventHandler")}}입니다. 이 속성에는 함수를 정의하게됩니다. {{domxref("RTCDataChannelEvent")}}의 한 종류인 이 이벤트는 원격 유저가 {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}}를 호출해서 연결에 {{domxref("RTCDataChannel")}}가 추가되었을 때, 전달됩니다. </p> + +<p>이 이벤트를 수신하게되는 시점에서는 {{domxref("RTCDataChannel")}}가 아직 열리지 않았을 수 있습니다. 사용하기 전에 꼭 신규 <code>RTCDataChannel</code>에 <code>"open"</code>이벤트가 발생하는 것을 확인하십시오.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.ondatachannel = <em>function</em>; +</pre> + +<h3 id="값">값</h3> + +<p>이 속성에 지정하는 함수는 단일 패러미터를 입력 인자로 받습니다. <code>channel</code> 속성에 생성된 {{domxref("RTCDataChannel")}}를 제공하는 {{domxref("RTCDataChannelEvent")}} 입니다. </p> + +<h2 id="예시">예시</h2> + +<pre class="brush: 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.'); + }; +}; +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-ondatachannel', 'RTCPeerConnection.ondatachannel') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.ondatachannel")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>The {{event("datachannel")}} event and its type, {{domxref("RTCDataChannelEvent")}}.</li> + <li>{{domxref("RTCPeerConnection.createDataChannel()")}}</li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/onicecandidate/index.html b/files/ko/web/api/rtcpeerconnection/onicecandidate/index.html new file mode 100644 index 0000000000..a8c23acfc1 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/onicecandidate/index.html @@ -0,0 +1,63 @@ +--- +title: RTCPeerConnection.onicecandidate +slug: Web/API/RTCPeerConnection/onicecandidate +translation_of: Web/API/RTCPeerConnection/onicecandidate +--- +<p>{{APIRef("WebRTC")}}</p> + +<p><span class="seoSummary"> <code>RTCPeerConnection</code> 속성의 <strong>{{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}</strong> 는 {{domxref("RTCPeerConnection")}} 인스턴스에서 {{event("icecandidate")}} 이벤트 발생시에 호출 하려는 함수를 지정합니다. 이 이벤트는 로컬 {{Glossary("ICE")}} 에이전트가 signaling 서버를 통해 원격 피어에게 메세지를 전달 할 필요가 있을때 마다 발생합니다. 그리고 ICE 에이전트가 signaling에 사용되는 기술에 대한 구체사항을 모르더라도 원격 피어와의 네고시에이션을 수행하도록 도와줍니다. 어떤 메세징 기술을 선택하던간에, 이 메소드를 사용해서 원격 피어에 ICE candidate를 전달하는 과정을 간단하게 구현 할 수 있습니다.</span> </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.onicecandidate = <em>eventHandler</em>; +</pre> + +<h3 id="값">값</h3> + +<p><code>onicecandidate </code>속성은 {{event("icecandidate")}} 이벤트를 나타내는 {{domxref("RTCPeerConnectionIceEvent")}} 객체를 입력 값으로 받는 함수로 설정되어야합니다. 여기에 설정되는 함수는 ICE candidate를 signaling 서버를 통해 원격 피어에게 전달해야합니다. 이때, ICE candidate의 {{Glossary("SDP")}}는 이벤트의 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성에서 확인 할 수 있습니다. 만약 이벤트의 <code>candidate </code>속성이 <code>null</code>로 지정되어있다면, ICE 수집과정이 완료됩니다. 이 메세지는 원격 피어에 전달되지 않아야합니다. 이때, 연결의 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} 또한 <code>complete</code>로 바뀌게 됩니다. ICE 수집 상태를 명시적으로 감시할 필요는 없습니다. 다만, signaling의 종료를 감지해야 한다면, ICE 네고시에이션이 complete 상태로 변한것을 알려주는 {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} 이벤트를 감시하면 됩니다.</p> + +<h2 id="예시">예시</h2> + +<p>아래는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서의 코드를 기반으로 원격 피어에게 ICE candidate를 전달하는 {{event("icecandidate")}} 이벤트에 대한 핸들러를 설정합니다.</p> + +<pre class="brush: js">pc.onicecandidate = function(event) { + if (event.candidate) { + // event.candidate가 존재하면 원격 유저에게 candidate를 전달합니다. + } else { + // 모든 ICE candidate가 원격 유저에게 전달된 조건에서 실행됩니다. + // candidate = null + } +}</pre> + +<p>위에서 알 수 있듯이, 이벤트의 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성이 <code>null</code>이면 네고시에이션의 종료가 감지됩니다. </p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onicecandidate', 'RTCPeerConnection.onicecandidate') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.onicecandidate")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{event("icecandidate")}} 이벤트 및 이벤트의 타입인 {{domxref("RTCPeerConnectionIceEvent")}}.</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html b/files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html new file mode 100644 index 0000000000..8e3e375efb --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html @@ -0,0 +1,76 @@ +--- +title: RTCPeerConnection.onicegatheringstatechange +slug: Web/API/RTCPeerConnection/onicegatheringstatechange +translation_of: Web/API/RTCPeerConnection/onicegatheringstatechange +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><code><strong>RTCPeerConnection.onicegatheringstatechange</strong></code>속성은 {{event("icegatheringstatechange")}} 이벤트가 {{domxref("RTCPeerConnection")}}에 전달될 때 호출이되는 함수를 정의하는 {{domxref("EventHandler")}}입니다. 이이벤트는 ICE 에이전트가 ICE candidate를 수집을 하는지의 여부를 알려주는 ICE 수집 상태가 변하면 발생합니다. 하지만, ICE 수집 상태를 모니터링 해야하는 특별한 이유가 없으면 이 이벤트를 감시 할 필요는 없습니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.onicegatheringstatechange = <em>eventHandler</em>; +</pre> + +<h3 id="값">값</h3> + +<p>{{event("icegatheringstatechange")}} 이벤트를 가진 {{domxref("Event")}} 객체를 단일 패러미터로 전달하는 함수를 제공합니다. {{domxref("RTCPeerConnection.iceGatheringState")}} 속성의 값 확인을 통해 ICE 수집 상태를 새로운 값으로 변경이 가능합니다.</p> + +<h2 id="예시">예시</h2> + +<p>아래의 예제는 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} 속성 값이 변할 때마다 현재 값을 확인하고, 수집 상태 변화에 맞추어 표시될 상태 내용을 업데이트해서 유저에게 알려줍니다. </p> + +<p>이 상태는 {{HTMLElement("div")}} 요소에 텍스트로 표시됩니다.</p> + +<pre class="brush: html"><div id="iceStatus"></div> +</pre> + +<p>예제에 사용된 이벤트 핸들러는 아래와 같습니다:</p> + +<pre class="brush: js">pc.onicegatheringstatechange = function() { + let label = "Unknown"; + + switch(pc.iceGatheringState) { + case "new": + case "complete": + label = "Idle"; + break; + case "gathering": + label = "Determining route"; + break; + } + // HTML에서 id가 "iceStatus"인 요소에 label 값을 지정 + document.getElementById("iceStatus").innerHTML = label; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onicegatheringstatechange', 'RTCPeerConnection.onicegatheringstatechange') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.onicegatheringstatechange")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>The {{event("icegatheringstatechange")}} event and its type, {{domxref("Event")}}.</li> + <li>{{domxref("RTCPeerConnection.iceGatheringState")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html b/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html new file mode 100644 index 0000000000..a237bae774 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html @@ -0,0 +1,55 @@ +--- +title: RTCPeerConnection.onidentityresult +slug: Web/API/RTCPeerConnection/onidentityresult +translation_of: Web/API/RTCPeerConnection/onidentityresult +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><code><strong>RTCPeerConnection.onidentityresult</strong></code> 이벤트 핸들러는 {{domxref("RTCPeerConnection")}}가 {{domxref("RTCIdentityEvent")}} 타입의 {{event("identityresult")}} 이벤트를 수신하게되면 실행되는 코드를 담고 있는 속성입니다. 이러한 이벤트는 {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}} 혹은 offer 혹은 answer를 생성하는 과정에 의해 식별인자 주장이 생성되면 전송됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="eval"><em>peerconnection</em>.onidentityresult = <em>function</em>; +</pre> + +<h3 id="값">값</h3> + +<ul> + <li><code>function</code> 은 개발자가 정의한 함수로 괄호 <code>()</code>나 매개 변수 혹은 <code>function(event) {...}</code>와 같은 이름 없는 함수 정의가 필요 없습니다. 이벤트 핸들러는 항상 {{domxref("RTCIdentityEvent")}} 타입의 이벤트를 포함하는 하나의 변수를 가집니다. </li> +</ul> + +<h2 id="예시">예시</h2> + +<pre class="brush: js">pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); }; +</pre> + +<h2 id="Specifications" name="Specifications">사양서</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onidentityresult', 'RTCPeerConnection.onidentityresult') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.onidentityresult")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{event("identityresult")}} 이벤트와 해당 타입인 {{domxref("RTCIdentityEvent")}}를 참조하십시오.</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/ontrack/index.html b/files/ko/web/api/rtcpeerconnection/ontrack/index.html new file mode 100644 index 0000000000..1856d41890 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/ontrack/index.html @@ -0,0 +1,63 @@ +--- +title: RTCPeerConnection.ontrack +slug: Web/API/RTCPeerConnection/ontrack +translation_of: Web/API/RTCPeerConnection/ontrack +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary">{{domxref("RTCPeerConnection")}} 속성인 <strong><code>ontrack</code></strong>은 {{domxref("RTCPeerConnection")}}에 트랙이 등록됨을 알려주는 {{event("track")}}가 발생하면 호출되는 함수를 지정하는 {{domxref("EventHandler")}}입니다.</span></p> + +<p>이 함수는 {{domxref("RTCTrackEvent")}} 타입의 이벤트 객체를 입력 인자로 받습니다. 해당 이벤트는 신규로 받아지는 {{domxref("MediaStreamTrack")}}가 생성되고 연결의 리시버 세트에 추가된 {{domxref("RTCRtpReceiver")}}객체와 연관되면 전송됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.ontrack = <em>eventHandler</em>; +</pre> + +<h3 id="값">값</h3> + +<p><code>ontrack</code>을 함수로 지정해서 신규 트랙에 대해 설명하고 어떻게 사용 될지를 알려주는 {{domxref("RTCTrackEvent")}} 객체를 입력 인자로 받도록 하십시오. 이 정보에는 신규 트랙을 나타내는 {{domxref("MediaStreamTrack")}} 객체, {{domxref("RTCRtpReceiver")}}와{{domxref("RTCRtpTransceiver")}}, 그리고 트랙이 어느 스트림에 해당하는지를 알려주는 {{domxref("MediaStream")}}의 리스트 객체를 포함합니다. </p> + +<h2 id="예시">예시</h2> + +<p>아래의 예시는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서에 나온 코드의 일부입니다. 이 코드는 들어오는 트랙을 {{HTMLElement("video")}}에 연결해서 해당 비디오를 보여줄 수 있도록 합니다.</p> + +<pre class="brush: js">pc.ontrack = function(event) { + document.getElementById("received_video").srcObject = event.streams[0]; + document.getElementById("hangup-button").disabled = false; +}; + +</pre> + +<p>첫 줄에 나온 <code>ontrack</code> 이벤트 핸들러는 들어오는 트랙의 첫 스트림을 가져다가 {{htmlattrxref("srcObject", "video")}} 속성에 지정합니다. 이렇게 함으로써 비디오의 스트림을 해당 요소에 연결하고, 유저에게 보여 줄 수 있게됩니다. 두 번째줄에서는 "통화 종료" 버튼을 활성화하여 유저가 통화를 종료 할 수 있도록 해줍니다.</p> + +<h2 id="사양서">사양서</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-ontrack', 'RTCPeerConnection.ontrack')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.ontrack")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li>The {{event("track")}} event and its type, {{domxref("RTCTrackEvent")}}.</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/removetrack/index.html b/files/ko/web/api/rtcpeerconnection/removetrack/index.html new file mode 100644 index 0000000000..f08af06fd8 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/removetrack/index.html @@ -0,0 +1,80 @@ +--- +title: RTCPeerConnection.removeTrack() +slug: Web/API/RTCPeerConnection/removeTrack +translation_of: Web/API/RTCPeerConnection/removeTrack +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary"><code><strong>RTCPeerConnection.removeTrack()</strong></code> 메소드는 {{domxref("RTCPeerConnection.getSenders()")}}에 의해 보고된 발신자 목록에서 해당 {{domxref("RTCRtpSender")}}를 실제로 제거하지 않은채, 지정한 트랙에서 미디어 전송을 중단하도록 연결의 로컬엔드에 알려줍니다.</span> 해당 트랙이 이미 중단되었거나, 연결의 발신자 목록에 존재하지 않으면, 이 메소드는 아무 영향이 없습니다.</p> + +<p>연결이 이미 협상된 경우 ({{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"stable"</code>로 설정된 경우), 재협상이 필요하다고 표시를 하게됩니다. 따라서, 원격 유저는 해당 협상이 발생하기 전까지 아무런 변화를 감지 할 수 없습니다. {{event("negotiationneeded")}} 이벤트가 {{domxref("RTCPeerConnection")}}에 전송되고, 로컬엔드에게 해당 협상이 반드시 발생해야 한다고 알려주게됩니다.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>pc</em>.removeTrack(sender); +</code></pre> + +<h3 id="Example" name="Example">매개변수</h3> + +<dl> + <dt><code>mediaTrack</code></dt> + <dd>연결에서 해당하는 발신자를 제거하도록 알려주는 {{domxref("RTCRtpSender")}}.</dd> +</dl> + +<h3 id="반환_값">반환 값</h3> + +<p><code>undefined</code>.</p> + +<h3 id="예외처리">예외처리</h3> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>연결이 열린 상태가 아닙니다.</dd> +</dl> + +<h2 id="Example" name="Example">예시</h2> + +<p>아래의 예시는 연결에 비디오 트랙을 추가하고, 닫기 버튼을 감청하여 유저가 버튼을 클릭하면 해당 미디어를 제거하도록 합니다.</p> + +<pre class="brush: 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);</pre> + +<h2 id="Specifications" name="Specifications">사양서</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-removetrack', 'RTCPeerConnection.removeTrack()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.removeTrack")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/restartice/index.html b/files/ko/web/api/rtcpeerconnection/restartice/index.html new file mode 100644 index 0000000000..dc3494d2ec --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/restartice/index.html @@ -0,0 +1,80 @@ +--- +title: RTCPeerConnection.restartIce() +slug: Web/API/RTCPeerConnection/restartIce +translation_of: Web/API/RTCPeerConnection/restartIce +--- +<p>{{APIRef("WebRTC API")}}</p> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> API의 {{domxref("RTCPeerConnection")}} 인터페이스에서는 <code><strong>restartIce()</strong></code> 메소드를 제공해서 연결의 양쪽에서 {{Glossary("ICE")}} candidate의 재수집 요청을 간단하게 할 수 있게 만들어줍니다.</span></p> + +<p><code>restartIce()</code>가 반환을 한 뒤에는, offer가 시그널링 메커니즘을 통해 전달되고, 원격 피어가 받은 offer를 description으로 설정을 하게 됩니다.이 과정이 완료되면, {{domxref("RTCPeerConnection.createOffer", "createOffer()")}}에 대한 다음 호출로 반환된 offer가 로컬 피어 (로컬로 설정이 된 경우)와 원격 피어에서 ICE 재시작을 발생시키도록 설정됩니다. </p> + +<p><code>restartIce()</code>는 <code>RTCPeerConnection</code>에 대한 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 이벤트를 발생시켜서 어플리케이션이 신호 채널을 통해서 협상을 수행하도록 합니다.</p> + +<p>만약 협상이 롤백 현상이나 수신받은 offer가 이미 협상 중으로 인해 실패하게되면, {{domxref("RTCPeerConnection")}}가 ICE 재시작 요청을 했다는 것을 자동으로 기억합니다. 다음번에 연결의 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>stable</code>로 바뀌게되면, 연결 인터페이스가 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 이벤트를 발생시킵니다. 이 과정은 ICE 재시작 과정이 온전히 완료될 때까지 반복됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.restartIce();</pre> + +<h3 id="매개변수">매개변수</h3> + +<p>없음.</p> + +<h3 id="반환_값">반환 값</h3> + +<p><code>undefined</code>.</p> + +<p>{{domxref("RTCPeerConnection.createOffer", "createOffer()")}}를 사용해서 만들어진 다음 offer가 신호 메커니즘을 통해 원격 유저에게 전달이 되면, ICE 재시작을 시작하도록 만듭니다. ICE를 재시작하게되면 기본적으로 ICE가 초기화되고, 새로운 증명서를 사용해서 신규 candidate를 생성합니다. 기존에 존재하던 미디어 전송/수신은 이 과정동안에는 방해받지 않습니다.</p> + +<p>ICE 재시작의 작동원리를 좀 더 자세히 알고 싶다면, {{SectionOnPage("/ko/docs/Web/API/WebRTC_API/Session_lifetime", "ICE restart")}}와 {{RFC(5245, "ICE specification", "9.1.1.1")}}를 참고하십시오.</p> + +<h2 id="예시">예시</h2> + +<p>아래의 예제는 {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}} 이벤트에 대한 핸들러입니다. 이 핸들러는 ICE를 재시작하여 <code>failed</code> 상태로의 전환을 관리합니다. </p> + +<pre class="brush: js">pc.addEventListener("iceconnectionstatechange", event => { + if (pc.iceConnectionState === "failed") { + /* possibly reconfigure the connection in some way here */ + /* then request ICE restart */ + pc.restartIce(); + } +}); +</pre> + + + +<p>위의 코드를 사용하여 ICE 협상 중 <code>failed</code> 상태로 전환되면 코드가 정상적으로 재협상 되어야 하기 때문에 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 이벤트가 발생합니다. 그러나, <code>restartIce()</code>를 호출했기 때문에 <code>negotiationneeded</code>에 대한 핸들러에서 발생하는 {{domxref("RTCPeerConnection.createOffer", "createOffer()")}} 호출은 일반적으로 수행되는 재협상이 아니라 ICE 재시작을 발생시킵니다.</p> + +<h2 id="사양서">사양서</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-restartice', 'RTCPeerConnection.restartIce()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.restartIce")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html new file mode 100644 index 0000000000..2fa7822559 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html @@ -0,0 +1,59 @@ +--- +title: RTCPeerConnection() +slug: Web/API/RTCPeerConnection/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection/RTCPeerConnection +--- +<div>{{APIRef("WebRTC")}}</div> + +<p><span class="seoSummary"><strong><code>RTCPeerConnection()</code></strong> 생성자는 로컬 기기와 원격 피어 간의 연결을 나타내는 {{domxref("RTCPeerConnection")}} 객체를 새로 만들어 반환합니다.</span></p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">pc = new RTCPeerConnection([<em>configuration</em>]);</pre> + +<h3 class="syntaxbox" id="매개변수">매개변수</h3> + +<dl> + <dt><code>configuration</code> {{optional_inline}}</dt> + <dd><a href="#RTCConfiguration_dictionary"><code>RTCConfiguration</code> dictionary</a>는 신규 연결을 설정하는 옵션들을 제공합니다.</dd> +</dl> + +<h3 id="RTCConfiguration_dictionary">RTCConfiguration dictionary</h3> + +<p>{{page("/ko/docs/Web/API/RTCConfiguration", "속성")}}</p> + +<h3 id="반환_값">반환 값</h3> + +<p><code>configuration</code>이 지정된 경우 그에 맞게 구성한, 그렇지 않은 경우 기본값 구성을 이용한 {{domxref("RTCPeerConnection")}} 객체입니다.</p> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">사양명</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-ctor-RTCPeerConnection--RTCConfiguration-configuration', 'RTCPeerConnection()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>초기 선언</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.RTCPeerConnection")}}</p> + +<h2 id="참고">참고</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">WebRTC architecture overview</a></li> + <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li> + <li>{{domxref("RTCPeerConnection")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/setconfiguration/index.html b/files/ko/web/api/rtcpeerconnection/setconfiguration/index.html new file mode 100644 index 0000000000..844f1ae4a8 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/setconfiguration/index.html @@ -0,0 +1,99 @@ +--- +title: RTCPeerConnection.setConfiguration() +slug: Web/API/RTCPeerConnection/setConfiguration +translation_of: Web/API/RTCPeerConnection/setConfiguration +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><strong><code>RTCPeerConnection.setConfiguration()</code></strong> 메소드는 {{domxref("RTCConfiguration")}}객체에 명시한 값을 가지고 {{domxref("RTCPeerConnection")}}의 현재 설정을 지정합니다. 이 메소드를 사용해서 연결에서 사용되는 ICE 서버와 전송 정책을 변경 할 수 있습니다. </p> + +<p>가장 보편적으로 쓰이는 방법은 사용하려는 ICE 서버 값으로 교체해주는것 입니다. (엄청 자주 사용되는 케이스는 아닐 것입니다) 이 방법을 수행하는 두 가지 시나리오는 아래와 같습니다:</p> + +<ul> + <li>{{domxref("RTCPeerConnection")}}가 ICE 서버를 명시하지 않고 시작된 경우. 예를 들어, {{domxref("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}} 생성자를 매개변수 없이 호출하게되면, 개발자가 직접 <code>setConfiguration()</code>를 호출해서 ICE 협상 시작 전에 ICE 서버를 추가해줘야 합니다.</li> + <li>연결의 재협상이 필요하거나, 어떤 이유로 인해서 다른 종류의 ICE 서버를 사용해야하는 경우. 예를 들어, 사용자가 새로운 지역으로 이동을 했기 때문에 지역 ICE 서버를 바꿔야하는 경우입니다. 이런 경우에는, <code>setConfiguration()</code>를 호출해서 신규 지역 ICE 서버로 바꿔주고, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ICE_restart">ICE restart</a>을 시작하게됩니다.</li> +</ul> + +<div class="note"> +<p>연결이 이미 설정이 되어있다면, 식별 정보는 변경 할 수 없습니다.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>RTCPeerConnection</em>.setConfiguration(<em>configuration</em>);</pre> + +<h3 class="syntaxbox" id="매개변수">매개변수</h3> + +<dl> + <dt><code>configuration</code></dt> + <dd>설정을 할 수 있는 옵션들을 제공해주는 {{domxref("RTCConfiguration")}} 객체입니다. 변경사항은 계속해서 추가되지 않습니다. 대신에, 신규 값이 기존의 값은 완전히 대체하게 됩니다.</dd> +</dl> + +<h3 id="예외처리">예외처리</h3> + +<dl> + <dt><code>InvalidAccessError</code></dt> + <dd><code>configuration.iceServers</code>에 정의한 하나 혹은 여러개의 URL이 {{Glossary("TURN")}} 서버 입니다. 하지만, 로그인을 위한 정보가 완전히 제공되지 않아서 발생하는 에러입니 ({{domxref("RTCIceServer.username")}} 혹은 {{domxref("RTCIceServer.credentials")}}의 값이 없다는 뜻). 이로인해 서버에 로그인을 성공적으로 할 수 없게 됩니다.</dd> + <dt><code>InvalidModificationError</code></dt> + <dd><code>configuration</code>에서 변경되는 식별 정보를 포함하고 있지만, 연결을 구성하면서 이미 식별 정보를 지정했기 때문에 발생하는 에러입니다. 이 에러는 <code>configuration.peerIdentity</code> 혹은 <code>configuration.certificates</code>가 설정이 되어있고, 이 값들이 현재 설정 값과 다르기 때문에 발생합니다.</dd> + <dt><code>InvalidStateError</code></dt> + <dd>{{domxref("RTCPeerConnection")}}이 닫혀있어서 발생하는 에러입니다.</dd> + <dt><code>SyntaxError</code></dt> + <dd><code>configuration.iceServers</code>에 제공된 하나 혹은 여러개의 URL 리스트가 유효하지 않아서 발생하는 에러입니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<p>아래의 예시에서는 ICE 재시작이 필요한 것을 확인하고, 다른 ICE 서버를 사용해서 협상이 이루어지도록 합니다.</p> + +<pre class="brush: 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);</pre> + +<p>먼저, 신규 {{domxref("RTCConfiguration")}}가 신규 ICE 서버와 인증 정보를 명시한 <code>restartConfig</code>를 가지도록 생성됩니다. 그리고 설정한 {{domxref("RTCConfiguration")}}가 <code>setConfiguration()</code>에 전달됩니다. <code>iceRestart</code> 옵션의 값을 <code>true</code>로 지정하고, {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}}을 호출해서 ICE 협상이 재시작됩니다. 이후에, 반환받은 offer를 local description으로 설정하고, 다른 피어에게 offer를 전달하는 것과 같이 일반적으로 진행되도록 처리합니다. </p> + +<h2 id="사양서">사양서</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.RTCPeerConnection.setConfiguration")}}</p> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li>{{domxref("RTCPeerConnection.getConfiguration()")}}</li> + <li>{{domxref("RTCConfiguration")}}</li> + <li>{{domxref("RTCPeerConnection")}}</li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html b/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html new file mode 100644 index 0000000000..784a5e5dec --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html @@ -0,0 +1,66 @@ +--- +title: RTCPeerConnection.setIdentityProvider() +slug: Web/API/RTCPeerConnection/setIdentityProvider +translation_of: Web/API/RTCPeerConnection/setIdentityProvider +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><code><strong>RTCPeerConnection.setIdentityProvider()</strong></code> 메소드는 이름, 통신에 사용된 프로토콜 (옵션), 유저 이름 (옵션)으로 구성된 세 가지 매개변수에 식별 제공자 (Identity Provider, IdP)를 지정합니다. IdP는 주장 (assertion)이 필요한 순간에만 사용 될 것입니다. </p> + +<p>{{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"closed"</code>로 지정되어있다면, <code>InvalidStateError</code> 에러가 발생합니다. </p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>pc</em>.setIdentityProvider(<em>domainname</em> [, <em>protocol</em>] [, <em>username</em>]); +</code></pre> + +<p><em>이 메소드는 반환 값이 존재하지 않습니다.</em></p> + +<h3 id="Example" name="Example">매개변수</h3> + +<dl> + <dt><em>domainname</em></dt> + <dd>IdP가 존재하는 도메인 이름을 나타내는 {{domxref("DOMString")}}입니다.</dd> + <dt><em>protocol</em> {{optional_Inline}}</dt> + <dd>IdP와 통신하기위해 사용된 프로토콜을 나타내는 {{domxref("DOMString")}}입니다. 디폴트 값은 <code>"default"</code>로 설정되어있고, IdP가 감청하게되는 URL를 결정하는데에 사용됩니다.</dd> + <dt><em>username</em> {{optional_Inline}}</dt> + <dd>IdP와 연관된 유저 이름을 나타내는 {{domxref("DOMString")}}입니다.</dd> +</dl> + +<h2 id="Example" name="Example">예시</h2> + +<pre class="brush: js">var pc = new PeerConnection(); + +pc.setIdentityAssertion("developer.mozilla.org"); +</pre> + +<h2 id="Specifications" name="Specifications">사양서</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setIdentityProvider-void-DOMString-provider-DOMString-protocol-DOMString-username', 'RTCPeerConnection.setIdentityProvider()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.setIdentityProvider")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html b/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html new file mode 100644 index 0000000000..41430c7267 --- /dev/null +++ b/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html @@ -0,0 +1,125 @@ +--- +title: RTCPeerConnection.setLocalDescription() +slug: Web/API/RTCPeerConnection/setLocalDescription +translation_of: Web/API/RTCPeerConnection/setLocalDescription +--- +<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> + +<p><span class="seoSummary"><code><strong>RTCPeerConnection.setLocalDescription()</strong></code> 메소드는 연결 인터페이스와 관련이 있는 로컬 설명 (local description)을 변경합니다. 로컬 설명은 미디어 형식을 포함하는 연결의 로컬 엔드에 대한 속성을 명시합니다.</span></p> + +<p>이 메소드는 세션 설명 (session description)을 단일 매개변수로 가지며, 설명이 비동기적으로 변하게되면 fulfilled되는 {{jsxref("Promise")}}를 반환합니다.</p> + +<p>연결이 이미 되어있는데 <code>setLocalDescription()</code>가 호출된다면, 이는 재협상이 진행 중이라는 뜻입니다 (아마도 네트워크 환경이 바뀐 것에 대응하기 위함일 것입니다). 두명의 피어가 설정 값에 모두 동의해야지만 설명이 교환되기 때문에, <code>setLocalDescription()</code>의 호출로 전송된 설명은 즉시 사용되지 못합니다. 대신 협상이 완료되는 순간까지는 기존 연결 설정대로 작동 하게 됩니다. 그러다가 협상이 완료된 다음에서야 신규 설정이 사용됩니다.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">aPromise = <em>RTCPeerConnection</em>.setLocalDescription(<em>sessionDescription</em>); + +<em>pc</em>.setLocalDescription(<em>sessionDescription</em>, <em>successCallback</em>, <em>errorCallback</em>); {{deprecated_inline}} +</pre> + +<h3 id="매개_변수">매개 변수</h3> + +<dl> + <dt><code>sessionDescription</code></dt> + <dd>연결의 로컬 엔드에 적용시킬 설정 값을 지정하는 {{domxref("RTCSessionDescriptionInit")}} 혹은 {{domxref("RTCSessionDescription")}}입니다.</dd> +</dl> + +<h4 id="세션_설명_매개_변수에_대한_설명">세션 설명 매개 변수에 대한 설명</h4> + +<p><code>sessionDescription</code> 매개 변수는 일단 기술적으로는 <code>RTCSessionDescriptionInit</code>의 타입입니다. 하지만, {{domxref("RTCSessionDescription")}}가 <code>RTCSessionDescriptionInit</code>와 구별이 불가능하도록 직렬화 (serialize)하기 때문에, <code>RTCSessionDescription</code>를 전달 할 수도 있습니다. 이 말은 코드가 다음과 같이 간단해질 수 있다는 뜻입니다:</p> + +<pre class="brush: js notranslate">myPeerConnection.createOffer().then(function(offer) { + return myPeerConnection.setLocalDescription(new RTCSessionDescription(offer)); +}); +</pre> + +<p>위 코드를 아래와 같이 간단하게 사용이 가능해집니다:</p> + +<pre class="brush: js notranslate">myPeerConnection.createOffer().then(myPeerConnection.setLocalDescription);</pre> + +<p>이러한 이유로, {{domxref("RTCSessionDescription.RTCSessionDescription", "RTCSessionDescription()")}} 생성자는 더 이상 사용되지 않습니다.</p> + +<h3 id="반환_값">반환 값</h3> + +<p>{{domxref("RTCPeerConnection.localDescription")}}의 값이 성공적으로 바뀌거나 혹은 변환이 불가능한 경우 거절되면 fulfill 되는 {{jsxref("Promise")}}입니다. 거절되는 예로는 명시한 설명이 연결에 존재하는 하나 혹은 양쪽 모두의 피어들과 호환이 불가능하면 발생하기도 합니다. 참고로 프로미스의 fulfillment 핸들러는 입력 매개 변수를 받지 않습니다.</p> + +<div class="note"> +<p>설명을 바꾸는 과정은 변경이 실패해도 연결 상태를 잃지 않게 보장하도록 WebRTC 레이어에 의해서 처리되는 중간 단계를 거칩니다. 이 과정에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 참조하십시오.</p> +</div> + +<h3 id="지원이_중단된_매개_변수">지원이 중단된 매개 변수</h3> + +<p>이전 버전의 문서에서는 콜백 기반의 함수를 찾을 수 있습니다. 콜백 함수는 지원이 중단되었고, 추후에 삭제 될 예정이기 때문에 <strong>사용하지 않도록 강력히 권장</strong>하고 있습니다. 이미 콜백 함수를 사용 중이라면, {{jsxref("Promise")}} 기반인 <code>setLocalDescription()</code>를 대신 사용하도록 업데이트 해야합니다. 기존 코드 업데이트에 도움을 주기 위해, 아래에서는 이전 버전의 <code>setLocalDescription()</code>에 대한 매개 변수를 설명합니다.</p> + +<dl> + <dt><code>successCallback</code> {{deprecated_inline}}</dt> + <dd>설명 값이 성공적으로 설정되면 입력 매개 변수 없이 호출되는 자바스크립트 {{jsxref("Function")}}입니다. 여기서, offer가 시그널링 서버를 통해서 원격 유저에게 전송 될 수 있습니다.</dd> + <dt><code>errorCallback</code> {{deprecated_inline}}</dt> + <dd>설명 값이 설정이 불가능할 때에 호출되어 <code>RTCPeerConnectionErrorCallback</code> 서명을 확인하는 함수입니다. 여기에는 요청이 왜 실패했는지를 설명하는 {{domxref("DOMException")}} 객체를 전달합니다.</dd> +</dl> + +<p>지원이 중단된 위의 메소드는 실제 설정이 바뀌기 전에 바로 반환합니다. 성공하면 <code>successCallback</code>가 호출되고, 실패하면 <code>errorCallback</code>가 호출됩니다.</p> + +<h3 id="지원이_중단된_예외처리">지원이 중단된 예외처리</h3> + +<p>지원이 중단된 콜백버전의 <code>setLocalDescription()</code>를 사용하게되면 아래와 같은 예외들이 발 생 할 수도 있습니다:</p> + +<dl> + <dt><code>InvalidStateError</code> {{deprecated_inline}}</dt> + <dd>연결의 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"closed"</code> 상태고, 이는 연결이 현재 열린 상태가 아니여서 협상이 발생할 수 없다는 뜻입니다.</dd> + <dt><code>InvalidSessionDescriptionError</code> {{deprecated_inline}}</dt> + <dd><code>sessionDescription</code>에 의해 명시된 {{domxref("RTCSessionDescription")}} 매개 변수가 유효하지 않음을 알려줍니다.</dd> +</dl> + +<h2 id="예시">예시</h2> + +<p>아래의 예시에서는, {{event("negotiationneeded")}} 이벤트에 대한 핸들러를 구현하였습니다:</p> + +<pre class="brush: js notranslate">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); +}</pre> + +<p>이 함수는 {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}}를 호출하여 offer를 생성하면서 시작됩니다. 이 과정이 성공하면, <code>setLocalDescription()</code>를 호출합니다. 프로미스에 대한 fulfillment 핸들러는 시그널링 서버를 사용해서 다른 유저에게 신규 생성된 offer를 전송할 수 있게 됩니다.</p> + +<h2 id="사양서">사양서</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양서</th> + <th scope="col">상태</th> + <th scope="col">코멘트</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setLocalDescription-void-RTCSessionDescription-description-VoidFunction-successCallback-RTCPeerConnectionErrorCallback-failureCallback', 'RTCPeerConnection.setLocalDescription()') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>Initial specification.</td> + </tr> + <tr> + <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setLocalDescription-Promise-void--RTCSessionDescriptionInit-description', 'RTCPeerConnection.setLocalDescription()')}}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.RTCPeerConnection.setLocalDescription")}}</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> +</ul> |