diff options
Diffstat (limited to 'files/ko/web/api/mediadevices/index.html')
| -rw-r--r-- | files/ko/web/api/mediadevices/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/ko/web/api/mediadevices/index.html b/files/ko/web/api/mediadevices/index.html new file mode 100644 index 0000000000..86f9133a5c --- /dev/null +++ b/files/ko/web/api/mediadevices/index.html @@ -0,0 +1,122 @@ +--- +title: MediaDevices +slug: Web/API/MediaDevices +tags: + - API + - Interface + - Media + - Media Capture and Streams API + - Media Streams API + - MediaDevices + - Reference + - Screen Capture API + - WebRTC +translation_of: Web/API/MediaDevices +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary"><strong><code>MediaDevices</code></strong> 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법입니다.</span></p> + +<h2 id="속성">속성</h2> + +<p>부모 인터페이스인 {{domxref("EventTarget")}}의 속성을 상속합니다.</p> + +<h2 id="Handlers" name="Handlers">이벤트</h2> + +<dl> + <dt><code><a href="/ko/docs/Web/API/MediaDevices/devicechange_event">devicechange</a></code></dt> + <dd>사용자 컴퓨터에 미디어 입출력 장치가 추가되거나 제거됐을 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/MediaDevices/ondevicechange">ondevicechange</a></code> 속성으로도 사용할 수 있습니다.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<p>부모 인터페이스인 {{domxref("EventTarget")}}의 메서드를 상속합니다.</p> + +<dl> + <dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt> + <dd>시스템에서 사용 가능한 미디어 입출력 장치의 정보를 담은 배열을 가져옵니다.</dd> + <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt> + <dd>{{domxref("MediaStreamTrack")}} 인터페이스가 지원하는 제약을 나타내는 {{domxref("MediaTrackSupportedConstraints")}} 호환 객체를 반환합니다.</dd> + <dd class="hidden">See {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} to learn more about constraints and how to use them.</dd> + <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt> + <dd>{{domxref("MediaStream")}}으로 캡처해 공유나 녹화 용도로 사용할 화면 혹은 화면의 일부(창)를 선택하도록 사용자에게 요청합니다. <code>MediaStream</code>으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd> + <dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt> + <dd>사용자에게 권한을 요청한 후, 시스템의 카메라와 오디오 각각 혹은 모두 활성화하여, 장치의 입력 데이터를 비디오/오디오 트랙으로 포함한 {{domxref("MediaStream")}}을 반환합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush:js">'use strict'; + +// Put variables in global scope to make them available to the browser console. +var video = document.querySelector('video'); +var constraints = window.constraints = { + audio: false, + video: true +}; +var errorElement = document.querySelector('#errorMsg'); + +navigator.mediaDevices.getUserMedia(constraints) +.then(function(stream) { + var videoTracks = stream.getVideoTracks(); + console.log('Got stream with constraints:', constraints); + console.log('Using video device: ' + videoTracks[0].label); + stream.onremovetrack = function() { + console.log('Stream ended'); + }; + window.stream = stream; // make variable available to browser console + video.srcObject = stream; +}) +.catch(function(error) { + if (error.name === 'ConstraintNotSatisfiedError') { + errorMsg('The resolution ' + constraints.video.width.exact + 'x' + + constraints.video.width.exact + ' px is not supported by your device.'); + } else if (error.name === 'PermissionDeniedError') { + errorMsg('Permissions have not been granted to use your camera and ' + + 'microphone, you need to allow the page access to your devices in ' + + 'order for the demo to work.'); + } + errorMsg('getUserMedia error: ' + error.name, error); +}); + +function errorMsg(msg, error) { + errorElement.innerHTML += '<p>' + msg + '</p>'; + if (typeof error !== 'undefined') { + console.error(error); + } +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.MediaDevices")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>인터페이스가 속한 <a href="/ko/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} 메서드를 정의하는 <a href="/ko/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li> + <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC API</a></li> + <li>장치에 접근할 때 사용할 <code>MediaDevices</code> 객체의 참조를 반환하는 {{domxref("Navigator.mediaDevices")}}</li> +</ul> |