이 문서는 HTML Media Capture (W3C Recommendation 01 February 2018)의 한국어 번역본입니다.
이 문서에 오역 및 오타를 포함할 수 있습니다. 가능하면 원문도 확인하시길 바랍니다.
Please check the errata for any errors or issues reported since publication.
See also translations.
Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.
An HTML Media Capture Proposed Recommendation was published on 28 November 2017, no further normative changes have been made since then. Errata for this document are recorded as issues. The implementation report produced for this version demonstrates there are two independent interoperable implementations.
This document was published by the Device and Sensors Working Group as a Recommendation. Comments regarding this document are welcome. Please send them to [email protected] (subscribe, archives) or file an issue on GitHub..
Please see the Working Group's implementation report.
This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.
This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This document is governed by the 1 March 2017 W3C Process Document.
이 섹션은 표준이 아닙니다.
HTML Media Capture 스펙은 capture
속성을 이용하여
HTMLInputElement
인터페이스를 확장합니다.
capture
속성은
작성자가 스팟에서 미디어를 캡쳐하기 위해 파일 업로드 컨트롤 내에서 카메라나 마이크로폰 같은 미디어 캡쳐 메커니즘 사용 요청을 서술하도록 허용합니다.
이 확장은 특히 간단하고 선언적으로 설계되었으며 웹 플랫폼의 미디어 캡처 기능의 하위 집합을 다룹니다. 특히 이 확장은 캡쳐에 대한 자세하 작성자 제어를 제공하지않습니다. 세분화된 작성자 제어가 필요한 사용 사례는 다른 스펙인 Media Capture and Streams [MEDIACAPTURE-STREAMS] 을 사용하여 충족될 수 있습니다. 예를 들어 호스팅 기기에서 실시간 미디어 스트림에 접근하는 것은 이 스펙의 범위를 벗어납니다.
이 스펙문서 내의 표준이 아니라고 명시된 섹션, 모든 작성자의 가이드라인, 다이어그램, 예제 및 노트는 표준이 아닙니다. 그 외의 모든 것들은 표준입니다.
키워드 MUST, MUST NOT, SHOULD 는 [RFC2119]의 설명을 따릅니다.
이 스펙은 하나의 제품에 적용되는 적합성 기준을 정의합니다. 포함된 인터페이스를 구현하는 user agent
이 스펙에 정의된 API를 구현하기 위해 ECMAScript를 사용하는 구현체는 이 스펙에서 Web IDL 스펙 [WEBIDL-1] 명세와 용어를 사용하기 때문에 Web IDL 스펙에 정의된 ECMAScript 바인딩과 일치하는 방식으로 이를 구현해야합니다.
input
요소
요소의 type
속성,
HTMLInputElement
인터페이스,
accept
속성,
File
Upload 상태, enumerated attribute,
missing value
default, invalid
value default, reflect는
[HTML51]에 정의되어있습니다.
[CEReactions]
WebIDL 확장 속성은 [custom-elements]에 정의되어있습니다.
VideoFacingModeEnum
목록은 [MEDIACAPTURE-STREAMS]에 정의되어있습니다.
FileList
인터페이스는 [FILE-API]에 정의되어있습니다.
이 스펙문서 내에서 캡쳐 컨트롤 타입이라는 용어는
accept
속성으로 정의된 MIME type의 미디어를 직접 캡쳐하기위해
사용자가 선호하는 외장 모드로 미디어 캡쳐 메커니즘을 사용하여
파일 피커 컨트롤의 특수 타입을 참조합니다.
미디어 캡쳐 메커니즘 용어는 카메라나 마이크로폰 같은 기기의 로컬 미디어 캡쳐 기기를 참조합니다.
선호하는 외장 모드는 기기의 미디어 캡쳐 메커니즘 사용에 접근하기 위한 힌트입니다.
이 섹션은 표준이 아닙니다.
이 스펙의 유저 에이전트 구현체는 마이크와 카메라를 통한 콘텐츠 캡쳐를 시작하기 전에 사용자에게 동의를 구할 것을 권장합니다. 이는 사용자 데이터 개인정보와 관련한 법률, 규정, 모범사례의 요구사항을 충족하기 위해 필수일 수 있습니다. 추가로, 유저 에이전트 구현체는 입력 장치를 활성화 할 때 사용자에게 표시하고, 사용자가 그러한 캡쳐를 종료할 수 있도록 할 것을 권장합니다. 마찬가지로, 유저 에이전트에서 다음과 같은 상황을 유저에게 허용하는 유저 컨트롤 제공을 권장합니다.
이 스펙은 <input type="file">
[HTML51] 과
[FILE-API] 스펙에서 제공하고 있는
개인정보 보호 및 보안을 기준으로 만들었습니다.
특히 사용자 기기에서 콘텐츠를 캡쳐하기 시작하면 유저 에이전트가 완전히 제어하는
HTML 요소에 대한 특정 사용자 인터렉션이 필요로합니다.
구현자들은 캡쳐된 미디어에서 개인정보에 민감한 데이터가 누출되지 않도록 주의해야합니다. 예를 들어 사용자의 위치를 캡쳐된 미디어의 메타데이터 (예: EXIF)에 포함시키는 것은 사용자가 기대하는 것보다 많은 개인정보를 전송할 수 있습니다.
capture
속성
input
요소의
type
속성이 파일 업로드 상태고,
accept
속성이 정의되어있을 때,
이 섹션의 규칙이 적용됩니다.
partial interface HTMLInputElement
{
[CEReactions]
attribute DOMString capture
;
};
capture
속성은 상태가
미디어 캡쳐 메커니즘의
선호하는 외장 모드를 결정하는
열거형 속성 (enumerated attribute)입니다.
속성의 키워드는 user
와
environment
이며,
각 상태인 user와 environment에 매핑됩니다.
user 및 environment 상태의 의미는
에 정의된
비슷한 이름의 열거형 값 (enumeration values)을 반영합니다.
VideoFacingModeEnum
추가로 세번째 상태인 implementation-specific 상태가 있습니다.
누락 값 기본 (missing value default)은 implementation-specific 상태입니다. 유효하지않은 값 기본 (invalid value default) 또한 implementation-specific 상태입니다.
유저 에이전트가 선호하는 외장 모드를 지원할 수 없는 경우, 구현체에서 정의한 기본 동작에 따라 동작함을 나타내는 implementation-specific 상태에 매핑되는 구현체에서 정의한 기본 외장 모드로 폴백할 수 있습니다.
capture
IDL 속성은
반드시 [MUST] 같은 이름의 각 콘텐츠 속성을
반영해야합니다.
capture
속성이 정의되면,
유저 에이전트는 특정 캡쳐 컨트롤 타입의 파일 피커를 호출해야만 합니다.
(SHOULD)
capture
속성이 정의되었을 때
유저 에이전트는 로컬이나 리모트, 데이터 스토리지를 절대 저장해서는 안됩니다.
(MUST NOT)
FileList
객체를 통해 나타난) 파일 피커를 통해 선택된 파일에 접근할 수 있을 때,
캡쳐된 미디어를 저장하기 위한 다양한 메커니즘을 사용할 수 있습니다.
이러한 메커니즘은 이 스펙 문서의 범위가 아닙니다.
만약 accept
속성의 값이
허용되지 않는 캡쳐 컨트롤 타입 MIME 타입으로 설정되었다면,
유저 에이전트는 반드시 (MUST)
capture
속성이 존재하지 않는 것처럼 동작해야합니다.
이 섹션은 표준이 아닙니다.
아래 예제는 유저의 호스팅 기기의 미디어 캡쳐 기능을 이용하여 특정 MIME 타입의 미디어를 캡쳐하는 유저가 선호하는 방법에 대한 힌트를 제공하는 예제입니다. HTML form을 사용하는 간단한 선언적 예제와 스크립팅을 포함한 더 고급 예제도 제시합니다.
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" capture="user">
<input type="submit" value="Upload">
</form>
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="video" accept="video/*" capture="environment">
<input type="submit" value="Upload">
</form>
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="audio" accept="audio/*" capture>
<input type="submit" value="Upload">
</form>
capture
속성을 정의할 수 있습니다.
<input type="file" accept="image/*" capture>
<canvas></canvas>
XMLHttpRequest
를 이용한 스크립트로 파일 업로드를 제어할 수 있습니다.
var input = document.querySelector('input[type=file]'); // see Example 4
input.onchange = function () {
var file = input.files[0];
upload(file);
drawOnCanvas(file); // see Example 6
displayAsImage(file); // see Example 7
};
function upload(file) {
var form = new FormData(),
xhr = new XMLHttpRequest();
form.append('image', file);
xhr.open('post', 'server.php', true);
xhr.send(form);
}
canvas
요소를 사용하여 클라이언트 이미지 편집 목적으로 사용할 수 있습니다.
function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
c = document.querySelector('canvas'), // see Example 4
ctx = c.getContext('2d'),
img = new Image();
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = dataURL;
};
reader.readAsDataURL(file);
}
img
요소와 createObjectURL()
메서드를 사용하면 됩니다.
function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
document.body.appendChild(img);
}
input
요소의
accept
속성이
image/*
로 정의되어있고 Example 1이나 Example 4처럼
capture
속성이 정의되었다면,
파일 피커는 다음과 같이 나옵니다.
속성이 정의되지않았다면, 파일 피커는 다음과 같이 렌더링될 수 있습니다.