diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/api/imagecapture/grabframe | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/ko/web/api/imagecapture/grabframe')
-rw-r--r-- | files/ko/web/api/imagecapture/grabframe/index.html | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/files/ko/web/api/imagecapture/grabframe/index.html b/files/ko/web/api/imagecapture/grabframe/index.html new file mode 100644 index 0000000000..3a0b53ff05 --- /dev/null +++ b/files/ko/web/api/imagecapture/grabframe/index.html @@ -0,0 +1,73 @@ +--- +title: ImageCapture.grabFrame() +slug: Web/API/ImageCapture/grabFrame +tags: + - API + - Experimental + - ImageCapture + - MediaStream Image Capture API + - Method + - Reference +translation_of: Web/API/ImageCapture/grabFrame +--- +<div>{{APIRef("MediaStream Image")}}</div> + +<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>grabFrame()</code></strong> 메서드는 {{domxref("MediaStreamTrack")}}의 라이브 비디오에서 스냅샷을 찍고, 그 결과를 담은 {{domxref("ImageBitmap")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>bitmapPromise</em> = <em>imageCapture</em>.grabFrame() +</pre> + +<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3> + +<p>{{domxref("ImageBitmap")}} 객체로 이행하는 {{jsxref("Promise")}}.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 <a href="https://simpl.info/imagecapture/">Simple Image Capture 데모</a>에서 가져온 것으로, <code>grabFrame()</code>이 반환한 {{jsxref("Promise")}}의 {{domxref("ImageBitmap")}}을 사용해 {{htmlelement("canvas")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.</p> + +<pre class="brush: js">var grabFrameButton = document.querySelector('button#grabFrame'); +var canvas = document.querySelector('canvas'); + +grabFrameButton.onclick = grabFrame; + +function grabFrame() { + imageCapture.grabFrame() + .then(function(imageBitmap) { + console.log('Grabbed frame:', imageBitmap); + canvas.width = imageBitmap.width; + canvas.height = imageBitmap.height; + canvas.getContext('2d').drawImage(imageBitmap, 0, 0); + canvas.classList.remove('hidden'); + }) + .catch(function(error) { + console.log('grabFrame() 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('MediaStream Image','#dom-imagecapture-grabframe','grabFrame()')}}</td> + <td>{{Spec2('MediaStream Image')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.ImageCapture.grabFrame")}}</p> +</div> |