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

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

우리는 모바일용 HTML5 웹사이트를 만들고 있으며, 네이티브 앱이 아닌 웹 브라우저를 통해 카메라에 접근해야 합니다.우리는 iOS에서 이 작업을 하는데 어려움을 겪고 있습니다.이것에 대한 해결책을 알고 있는 사람이 있습니까?

사용해 볼 수 있습니다.

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

하지만 작동하려면 iOS 6+여야 합니다.그러면 사진을 찍거나 앨범에 있는 사진을 업로드할 수 있는 멋진 대화가 제공됩니다.

PhoneGap 없이 카메라/사진 데이터 캡처

2015년 현재, 그것은 단지 작동합니다.

<input type="file">

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

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

이것은 위와 같으나, 업로드를 카메라나 라이브러리의 사진으로만 제한하고 동영상은 업로드하지 않습니다.

iOS6에서 Apple은 다음을 통해 이 기능을 지원합니다.<input type="file">tag. Apple의 개발자 설명서에서 유용한 링크를 찾을 수 없었지만, 여기 예제가 있습니다.

오버레이처럼 보이고 더 고급 기능은 아직 사용할 수 없지만 많은 사용 사례에 적합할 것입니다.

편집: w3c에는 iOS6 Safari가 일부를 구현하는 것으로 보이는 사양이 있습니다.그capture특성이 현저하게 누락되었습니다.

이거 되는 것 같아요.비디오 또는 오디오 녹화;

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

또는 (새로운 방법)

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

그렇지 않은 경우 ios6에서 작동할 수 있습니다. 자세한 내용은 사용자 미디어 가져오기에서 확인할 수 있습니다.

2020년 11월 업데이트:Google 개발자 링크가 비활성화되었습니다.더 많은 설명이 있는 원본 기사는 여전히 web.archive.org 에서 찾을 수 있습니다.

---

이 질문은 이미 몇 년 전의 것이지만, 그 시간 동안 카메라에 직접 액세스하고 미리 보기를 표시하고 스냅샷을 캡처하는 것과 같은 몇 가지 추가 가능성이 발전했습니다(예: QR 코드 스캔).

이 Google Developers 기사에서는 "어디서나 작업"(데스크톱 브라우저에서도 가능)에서 "카메라가 있는 최신 모바일 장치에서만 작업"에 이르기까지 이미지/카메라 데이터를 웹 응용 프로그램으로 가져오는 모든 방법(?)에 대해 자세히 설명합니다.많은 유용한 팁과 함께.

설명된 방법:

• URL을 요청하세요: 가장 쉽지만 가장 만족스럽지 않습니다.

• 파일 입력(여기에 있는 대부분의 다른 게시물에 포함됨):그런 다음 입력 요소에서 onchange 이벤트를 수신한 다음 이벤트 대상의 files 속성을 읽어 데이터를 에 첨부하거나 JavaScript로 조작할 수 있습니다.

<input type="file" accept="image/*" id="file-input">
<script>
  const fileInput = document.getElementById('file-input');

  fileInput.addEventListener('change', (e) => doSomethingWithFiles(e.target.files));
</script>

그files속성이 FileList 개체입니다.

• 끌어서 놓기(데스크톱 브라우저에 유용):

<div id="target">You can drag an image file here</div>
<script>
  const target = document.getElementById('target');

  target.addEventListener('drop', (e) => {
    e.stopPropagation();
    e.preventDefault();

    doSomethingWithFiles(e.dataTransfer.files);
  });

  target.addEventListener('dragover', (e) => {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = 'copy';
  });
</script>

다음을 얻을 수 있습니다.FileList에서 나온 .dataTransfer.files의 drop이벤트

• 클립보드에서 붙여넣기

<textarea id="target">Paste an image here</textarea>
<script>
  const target = document.getElementById('target');

  target.addEventListener('paste', (e) => {
    e.preventDefault();
    doSomethingWithFiles(e.clipboardData.files);
  });
</script>

e.clipboardData.files입니다.FileList다시 이의를 제기합니다.

• 카메라에 대화식으로 액세스(애플리케이션이 QR 코드와 같이 "보이는" 것에 대한 즉각적인 피드백을 제공해야 하는 경우 필요):로 카메라 const supported = 'mediaDevices' in navigator;사용자에게 동의를 요청합니다.그런 다음 실시간 미리 보기를 표시하고 스냅샷을 캔버스에 복사합니다.

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
  const player = document.getElementById('player');
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  const captureButton = document.getElementById('capture');

  const constraints = {
    video: true,
  };

  captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
  });

  // Attach the video stream to the video element and autoplay.
  navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
      player.srcObject = stream;
    });
</script>

비디오 스트림을 중지하는 것을 잊지 마십시오.

player.srcObject.getVideoTracks().forEach(track => track.stop());

2020년 11월 업데이트:Google 개발자 링크가 비활성화되었습니다.더 많은 설명이 있는 원본 기사는 여전히 web.archive.org 에서 찾을 수 있습니다.

Picup 앱은 HTML5 페이지에서 사진을 가져와 서버에 업로드하는 방법입니다.서버에 추가 프로그래밍이 필요하지만, 폰갭 외에는 다른 방법을 찾지 못했습니다.

언급URL : https://stackoverflow.com/questions/6336641/camera-access-through-browser