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/archive/b2g_os/api/camera_api | |
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/archive/b2g_os/api/camera_api')
-rw-r--r-- | files/ko/archive/b2g_os/api/camera_api/index.html | 38 | ||||
-rw-r--r-- | files/ko/archive/b2g_os/api/camera_api/introduction/index.html | 247 |
2 files changed, 285 insertions, 0 deletions
diff --git a/files/ko/archive/b2g_os/api/camera_api/index.html b/files/ko/archive/b2g_os/api/camera_api/index.html new file mode 100644 index 0000000000..d18716974b --- /dev/null +++ b/files/ko/archive/b2g_os/api/camera_api/index.html @@ -0,0 +1,38 @@ +--- +title: Camera API +slug: Archive/B2G_OS/API/Camera_API +tags: + - API + - Firefox OS + - Graphics + - NeedsTranslation + - Reference + - Référence(2) + - TopicStub + - WebAPI + - camera +translation_of: Archive/B2G_OS/API/Camera_API +--- +<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/ko/docs/Web/API/Camera_API">Camera API</a></strong></li><li class="toggle"><details open><summary>Interfaces</summary><ol><li><a href="/ko/docs/Web/API/CameraCapabilities"><code>CameraCapabilities</code></a></li><li><a href="/ko/docs/Web/API/CameraControl"><code>CameraControl</code></a></li><li><a href="/ko/docs/Web/API/CameraManager"><code>CameraManager</code></a></li></ol></details></li><li class="toggle"><details open><summary>Methods</summary><ol><li><a href="/ko/docs/Web/API/Navigator/mozCameras"><code>Navigator.mozCameras</code></a></li></ol></details></li></ol></section><p></p> + +<p></p><div class="overheadIndicator nonStandard nonStandardHeader"> + <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> Non-standard</strong><br> + This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.</p> + </div><p></p> + +<p>The <strong>Camera API</strong> allows applications to manage the camera of the device. It allows them to take photographs, record videos, and get information like the focus, the zoom, the white balance, the flash, … It is a priviledged API and can only be used by certified applications.</p> + +<p>This API was initially only available to certified applications, but is available to privileged apps on Firefox 2.0 onwards.</p> + +<div class="note"> +<p><strong>Note:</strong> Except if you are implementing a replacement for the default <em>Camera</em> application, you shouldn't use this API. Instead, if you want to use the camera in your device, you should use the <a href="/en-US/docs/WebAPI/Web_Activities" title="/en-US/docs/Web/API/Web_Activities">Web Activities API</a>.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Navigator/mozCameras" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.mozCameras</code></a></li> + <li><a href="/ko/docs/Web/API/CameraManager" title="The documentation about this has not yet been written; please consider contributing!"><code>CameraManager</code></a></li> + <li><a href="/ko/docs/Web/API/CameraControl" title="The documentation about this has not yet been written; please consider contributing!"><code>CameraControl</code></a></li> + <li><a href="/ko/docs/Web/API/CameraCapabilities" title="The documentation about this has not yet been written; please consider contributing!"><code>CameraCapabilities</code></a></li> +</ul> diff --git a/files/ko/archive/b2g_os/api/camera_api/introduction/index.html b/files/ko/archive/b2g_os/api/camera_api/introduction/index.html new file mode 100644 index 0000000000..1ea6d25a38 --- /dev/null +++ b/files/ko/archive/b2g_os/api/camera_api/introduction/index.html @@ -0,0 +1,247 @@ +--- +title: Introduction to the Camera API +slug: Archive/B2G_OS/API/Camera_API/Introduction +translation_of: Archive/B2G_OS/API/Camera_API/Introduction +--- +<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/ko/docs/Web/API/Camera_API">Camera API</a></strong></li><li class="toggle"><details open><summary>Interfaces</summary><ol><li><a href="/ko/docs/Web/API/CameraCapabilities"><code>CameraCapabilities</code></a></li><li><a href="/ko/docs/Web/API/CameraControl"><code>CameraControl</code></a></li><li><a href="/ko/docs/Web/API/CameraManager"><code>CameraManager</code></a></li></ol></details></li><li class="toggle"><details open><summary>Methods</summary><ol><li><a href="/ko/docs/Web/API/Navigator/mozCameras"><code>Navigator.mozCameras</code></a></li></ol></details></li></ol></section><p></p> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/API/Camera_API">Camera API</a> 를 사용하면 디바이스의 카메라를 이용해 사진을 찍어 현재 웹페이지에 업로드하는것이 가능해집니다.</span> This is achieved through an <code>input</code> element with <code>type="file"</code> and an <code>accept</code> attribute to declare that it accepts images. The HTML looks like this:</p> + +<pre class="brush: html"><input type="file" id="take-picture" accept="image/*"> +</pre> + +<p>When users choose to activate this HTML element, they are presented with an option to choose a file, where the device's camera is one of the options. If they select the camera, it goes into picture taking mode. After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <code><input type="file"></code> element and its <code>onchange</code> event is triggered.</p> + +<h2 id="Get_a_reference_to_the_taken_picture">Get a reference to the taken picture</h2> + +<p>With the help of the <a href="/en-US/docs/Using_files_from_web_applications">File API</a> you can then access the taken picture or chosen file:</p> + +<pre class="brush: js">var takePicture = document.querySelector("#take-picture"); +takePicture.onchange = function (event) { + // Get a reference to the taken picture or chosen file + var files = event.target.files, + file; + if (files && files.length > 0) { + file = files[0]; + } +}; +</pre> + +<h2 id="Presenting_the_picture_in_the_web_page">Presenting the picture in the web page</h2> + +<p>Once you have a reference to the taken picture (i.e., file), you can then use <a href="/ko/docs/Web/API/Window/URL/createObjectURL" title="The documentation about this has not yet been written; please consider contributing!"><code>window.URL.createObjectURL()</code></a> to create a URL referencing the picture and setting it as the <code>src</code> of an image:</p> + +<pre class="brush: js">// Image reference +var showPicture = document.querySelector("#show-picture"); + +// Create ObjectURL +var imgURL = window.URL.createObjectURL(file); + +// Set img src to ObjectURL +showPicture.src = imgURL; + +// For performance reasons, revoke used ObjectURLs +URL.revokeObjectURL(imgURL); +</pre> + +<p>If <code>createObjectURL()</code> isn't supported, an alternative is to fallback to <a href="/ko/docs/Web/API/FileReader" title="FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다."><code>FileReader</code></a>:</p> + +<pre class="brush: js">// Fallback if createObjectURL is not supported +var fileReader = new FileReader(); +fileReader.onload = function (event) { + showPicture.src = event.target.result; +}; +fileReader.readAsDataURL(file); +</pre> + +<h2 id="Complete_example">Complete example</h2> + +<p>If you want to see it in action, take a look at the <a class="external" href="http://robnyman.github.com/camera-api/">complete working Camera API example</a>.</p> + +<p>Here is the code used for that demo:</p> + +<h3 id="HTML_page">HTML page</h3> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Camera API</title> + <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> + </head> + + <body> + + <div class="container"> + <h1>Camera API</h1> + + <section class="main-content"> + <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p> + + <p> + <input type="file" id="take-picture" accept="image/*"> + </p> + + <h2>Preview:</h2> + <p> + <img src="about:blank" alt="" id="show-picture"> + </p> + + <p id="error"></p> + + </section> + + <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p> + </div> + + + <script src="js/base.js"></script> + + + </body> +</html> +</pre> + +<h3 id="JavaScript_file">JavaScript file</h3> + +<pre class="brush: js">(function () { + var takePicture = document.querySelector("#take-picture"), + showPicture = document.querySelector("#show-picture"); + + if (takePicture && showPicture) { + // Set events + takePicture.onchange = function (event) { + // Get a reference to the taken picture or chosen file + var files = event.target.files, + file; + if (files && files.length > 0) { + file = files[0]; + try { + // Create ObjectURL + var imgURL = window.URL.createObjectURL(file); + + // Set img src to ObjectURL + showPicture.src = imgURL; + + // Revoke ObjectURL + URL.revokeObjectURL(imgURL); + } + catch (e) { + try { + // Fallback if createObjectURL is not supported + var fileReader = new FileReader(); + fileReader.onload = function (event) { + showPicture.src = event.target.result; + }; + fileReader.readAsDataURL(file); + } + catch (e) { + // + var error = document.querySelector("#error"); + if (error) { + error.innerHTML = "Neither createObjectURL or FileReader are supported"; + } + } + } + } + }; + } +})(); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + <strong><a href="/ko/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p> + +<div class="htab"> + <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a> + <ul> + <li class="selected"><a>Desktop</a></li> + <li><a>Mobile</a></li> + </ul> +</div><p></p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Camera API</td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/API/URL/createObjectURL">createObjectURL()</a></code></td> + <td>16</td> + <td><a href="/en-US/Firefox/Releases/8" title="Released on 2011-11-08.">8.0</a> (8.0)</td> + <td>10</td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/API/FileReader" title="FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다."><code>FileReader</code></a></td> + <td>16</td> + <td><a href="/en-US/Firefox/Releases/3.6" title="Released on 2010-01-21.">3.6</a> (1.9.2)</td> + <td>10</td> + <td>11.6</td> + <td><span style="color: #f00;">No support</span></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Camera API</td> + <td>3.0</td> + <td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td> + <td>10.0 (10.0)</td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/API/URL/createObjectURL">createObjectURL()</a></code></td> + <td>4</td> + <td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td> + <td>10.0 (10.0)</td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + <td><span style="color: #f00;">No support</span></td> + </tr> + <tr> + <td><a href="/ko/docs/Web/API/FileReader" title="FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다."><code>FileReader</code></a></td> + <td>3</td> + <td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td> + <td>10.0 (10.0)</td> + <td><span style="color: #f00;">No support</span></td> + <td>11.10</td> + <td><span style="color: #f00;">No support</span></td> + </tr> + </tbody> +</table> +</div> |