IT story

브라우저를 통한 카메라 액세스

hot-time 2020. 6. 11. 08:34
반응형

브라우저를 통한 카메라 액세스


모바일 용 HTML5 웹 사이트를 만들고 있으며 기본 앱이 아닌 웹 브라우저를 통해 카메라에 액세스해야합니다. iOS에서이 작업을 수행하는 데 문제가 있습니다. 누구든지 이것에 대한 해결책을 알고 있습니까?


당신은 이것을 시도 할 수 있습니다 :

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

하지만 작동하려면 iOS 6 이상이어야 합니다. 그러면 사진을 찍거나 앨범에서 사진을 업로드 할 수있는 좋은 대화가 나타납니다.

Screenhot

예는 다음과 같습니다. PhoneGap없이 카메라 / 사진 데이터 캡처


2015 년 현재는 이제 작동합니다 .

<input type="file">

그러면 사용자에게 파일 업로드를 요청합니다. iOS 8.x에서는 카메라 비디오, 카메라 사진 또는 사진 라이브러리의 사진 / 비디오 일 수 있습니다.

iOS / iPhone 사진 / 비디오 / 파일 업로드

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

This is as above, but limits the uploads to photos only from camera or library, no videos.


In iOS6, Apple supports this via the <input type="file"> tag. I couldn't find a useful link in Apple's developer documentation, but there's an example here.

It looks like overlays and more advanced functionality is not yet available, but this should work for a lot of use cases.

EDIT: The w3c has a spec that iOS6 Safari seems to implement a subset of. The capture attribute is notably missing.


I think this one is working. Recording a video or audio;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

or (new method)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

If it is not, probably will work on ios6, more detail can be found at get user media


The Picup app is a way to take pictures from an HTML5 page and upload them to your server. It requires some extra programming on the server, but apart from PhoneGap, I have not found another way.


This question is already a few years old but in that time some additional possibilities have evolved, like accessing the camera directly, displaying a preview and capturing snapshots (e.g. for QR code scanning).

This Google Developers article provides an in-depth explaination of all (?) the ways how to get image/camera data into a web application, from "work everywhere" (even in desktop browsers) to "work only on modern, up-to-date mobile devices with camera". Along with many useful tips.

Explained methods:

  • Ask for a URL
  • File input (covered by most other posts here)
  • 드래그 앤 드롭 (데스크톱 브라우저에 유용)
  • 클립 보드에서 붙여 넣기
  • 대화식으로 카메라에 액세스 (응용 프로그램이 QR 코드와 같이 "보는"것에 대한 즉각적인 피드백을 제공해야하는 경우 필요)

참고 URL : https://stackoverflow.com/questions/6336641/camera-access-through-browser

반응형