웹앱에서 모바일 카메라에 액세스하는 방법은 무엇입니까?

191

모바일 용 웹 앱 (기본 앱 아님)에서 사진을 찍고 업로드하고 싶지만 Adobe Flash를 사용하고 싶지 않습니다. 이것을 할 수있는 방법이 있습니까?

html mobile camera

— 夏期劇場
소스

2

"웹 페이지"는 모든 종류의 클라이언트 / 장치에서 쉽게 액세스 할 수 있어야합니다. 제한을 설정해야합니까?

— 夏期劇場

1

하드웨어 카메라에 액세스하고 싶다고 가정합니다.

— Dennis Traub

흠 .. 웹 페이지에서 모바일 스마트 폰 등의 "카메라".

— 夏期劇場

안녕하세요, 저는 현재 저의 프로젝트를 위해 공부하고있는 과목입니다. PWA를 사용하면 최신 브라우저에서 기본 장치 기능을 사용할 수 있습니다. developers.google.com/web/updates/2016/12/imagecapture

— palmaone

260

iPhone iOS6 및 Android ICS부터 HTML5에는 장치에서 사진을 찍을 수있는 다음과 같은 태그가 있습니다.

 <input type="file" accept="image/*" capture="camera">

Capture 카메라, 캠코더 및 오디오와 같은 값을 사용할 수 있습니다.

나는이 태그가 iOS5에서 확실히 작동하지 않을 것이라고 생각합니다.

— 애쉬
소스

32

훌륭한 튜토리얼이 있습니다 : html5rocks.com/en/tutorials/getusermedia/intro

— Micah

2

여기서는 GetUserMedia가 필요하지 않습니다.

— 레이 니콜러스

"이 장치에서 지원하지 않는 getUserMedia ()"가 표시됩니다.하지만 Safari에 있으며 ios7이 있습니다. 왜 그렇습니까? – Dan 방금 편집 함

— Dan

10

아마도 코드가 <input type="file" accept="image/*;capture=camera">대신 해야한다고 생각 합니다. MDN에 따르면 요소에 capture대한 속성 이 없습니다 input.

— Kenny Evitt

9

모두 capture="camera"(문자열)과는 나이는 accept="image/*;capture=camera"2012 년 대체되었습니다 capture="capture"(부울). 이 속성은 라이브러리에서 선택하지 않고 강제로 캡처하는 데 사용됩니다. 참조 사양 및 HTML 미디어 캡처에 대한 올바른 구문

— 옥타 Naicu

36

요즘 적어도 안드로이드에서는 비교적 쉽습니다. 일반 파일 입력 태그 만 사용하면 사용자가이 태그를 클릭하면 카메라 (또는 파일 관리자 등)를 사용하여 파일을 업로드 할 것인지 묻습니다. 카메라로 사진을 찍기 만하면 자동으로 추가 및 업로드됩니다.

아이폰에 대해서는 전혀 모른다. 누군가가 그것에 대해 깨달을 수 있습니다. 편집 : 아이폰도 비슷하게 작동합니다.

입력 태그 샘플 :

<input type="file" accept="image/*" capture="camera">

— 턱시도
소스

여러 파일에 대해이 작업을 수행 할 수 있습니까? multiple = "multiple"

— parseguy

예 : <input type = "file"accept = "image / *"multiple = "multiple"capture = "camera">

— parseguy

multipleAndroid와 iOS 모두에서 작동합니다. HTML 미디어 캡처를위한 올바른 구문

— Octavian Naicu

다른 애플 기기에 대해서는 확실하지 않지만 적어도이 솔루션은 이제 iPad에서도 작동합니다.

— cytsunny

29

이것을 업데이트하기 위해 표준은 다음과 같습니다.

<input type="file" name="image" accept="image/*" capture="environment">

주변 카메라 (후면)에 액세스하고

<input type="file" name="image" accept="image/*" capture="user">

사용자 용 (전면) 카메라 용. 비디오에 액세스하려면 이름에서 "image"대신 "video"를 사용하십시오.

iOS 10.3.3, 펌웨어 760을 실행하는 iPhone 5c에서 테스트되었으며 정상적으로 작동합니다.

https://www.w3.org/TR/html-media-capture/

— 사용자
소스

23

iOS 6 이상 및 Android 2.2 이상의 Safari 및 Chrome은 HTML 미디어 캡처를 지원하므로 장치의 카메라로 사진을 찍거나 기존 카메라를 선택할 수 있습니다.

<input type="file" accept="image/*">

iOS 10에서 작동하는 방법은 다음과 같습니다.

iOS10.3 +의 Android 3.0 이상 및 Safari도 capture카메라로 바로 이동하는 데 사용되는 속성을 지원합니다 .

<input type="file" accept="image/*" capture>

capture="camera"(문자열) 및 accept="image/*;capture=camera"(매개 변수)는 이전 사양의 일부였으며 captureW3C 후보 추천 으로 (부울) 로 대체되었습니다 .

지원 문서 :이 2013 O'Reilly 서적 및 테스트

— 옥타비아 나이 쿠
소스

Android의 광산은 사진 선택으로 바로 이동하지만 capture = "camera".... totally

— sticked

@Benyaman capture대신 사용해보십시오 capture="camera". 어떤 기기 및 Android 버전이 궁금합니다.

— Octavian Naicu

Android 5.0에서는 Phonegap에 HTML 캡처가 내장되어 있지 않습니다. 따라서 카메라 레코드, 오디오 또는 카메라를 캡처 할 수 없습니다. 나는 일을 해결해야했다.

— Benyaman

5

기본 장치 카메라에 액세스하기위한 새로운 HTML5 기능인 "getUserMedia API"가 있습니다.

참고 : HTML5는 Android 기기의 웹 페이지에서 사진 캡처를 처리 할 수 있습니다 (최소 버전은 Honeycomb OS에서 실행하지만 iPhone에서는 처리 할 수 없지만 iOS 6에서는 처리 할 수 없음).

— 루이스
소스

아 죄송합니다 setUserMedia API

— Louis

4

WEBRTC를 사용할 수 있지만 불행히도 모든 웹 브라우저에서 지원되는 것은 아닙니다. 아래는 브라우저가 지원하는 링크를 보여줍니다. http://caniuse.com/stream

그리고이 링크는 어떻게 액세스 할 수 있는지에 대한 아이디어를 제공합니다 (샘플 코드). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

— 마이클 술 타나
소스

2

WebRTC getUserMedia는 과잉이며 <input type="file" accept="image/*">트릭을 수행합니다.

— Octavian Naicu

4

AppMobi HTML5 SDK는 HTML5 기반 앱에서 카메라를 포함한 기본 장치 기능에 대한 액세스를 약속했지만 더 이상 Google 소유가 아닙니다. 대신 이 게시물에서 HTML5 기반 답변을 사용해보십시오 .

— 데이브 에버릿
소스

1

Google에 AppMobi 또는 해당 제품에 대한 소유권이 없다고 생각합니다.

— fakeguybrushthreepwood 1

아-크롬 웹 스토어에 있기 때문에 내 실수-Google 참조가 제거되었습니다. 실제 파트너는 다음과 같습니다. appmobi.com/?page_id=468

— Dave Everitt

3

getUserMedia 를 사용하여 카메라에 액세스 하려고합니다 .

이 자습서는 브라우저에서 장치 카메라에 액세스하는 기본 사항을 간략하게 설명합니다. https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

참고 : 이것은 대부분의 Android 기기와 iOS의 Safari에서만 작동합니다.

— 아론 벤자민
소스

1

보안 기능이 구현되어 로컬 호스트에서 로컬로 앱을 실행하거나 GetUserMedia ()가 작동하려면 SSL을 통해 앱을 실행해야합니다.

나는 몇 가지 데모를 시도 할 때 이것을 발견했고 그들이 작동하지 않을 때 실망했습니다! 참조 : 새로운 보안 제한

— 앤서니 그 릭스
소스

0

나는 당신이 할 수 있다고 생각하지 않습니다- 오디오 또는 비디오를 얻는 W3C 초안 API 가 있지만 주요 모바일 OS에는 아직 구현이 없습니다.

~~두 번째로 좋은~~ 방법은 PhoneGap 사용에 대한 Dennis의 제안과 함께하는 것입니다. 즉, 기본 앱을 만들어 모바일 앱 스토어 / 시장에 추가해야합니다.

— 케빈
소스

다시 게시해서 죄송합니다. Android의 저지 클라이언트에서 NPE 예외가 발생했는지 확인하려고했습니다. 붙어 :(

— 네크로맨서

0

추가 메커니즘없이 웹 브라우저에서 휴대 전화 카메라에 액세스하는 방법을 모릅니다 (예 : 플래시 또는 하드웨어 API에 액세스 할 수있는 컨테이너 유형)

후자는 PhoneGap을 살펴보십시오. http://docs.phonegap.com/phonegap_camera_camera.md.html

이를 통해 최소한 iOS 및 Android 기반 장치에서 카메라에 액세스 할 수 있어야합니다.

— 데니스 트라 우브
소스

4

그래도 여전히 모바일 장치에 앱을 설치해야하므로 OP가 피하고 싶어합니다.

— Michael Petrotta

@MichaelPetrotta 더 나은 방법을 알고 있습니까?

— Dennis Traub

2

OP가 요구하는 것이 가능하다고 믿지 않습니다.

— Michael Petrotta

@MichaelPetrotta 저도 그렇게 생각합니다. 그리고 내가 생각할 수있는 가장 좋은 방법은 PhoneGap입니다 .iOS (Flash는 지원하지 않음)에서 작동하기 때문입니다. 여전히 기본이지만 사실이지만 웹 페이지에서 카메라에 최소한의 크로스 플랫폼 액세스가 가능합니다.

— Dennis Traub