Camera access through browser

Question

We are creating an HTML5 website for mobile and need to get camera access through the web browser without being a native app  We are having trouble making this work in iOS  Is anyone aware of a solution for this

User · Answer

As of 2015  it now just works    lt input type  file  gt    This will ask user for the upload of any file   On iOS 8 x this can be a camera video  camera photo  or a photo video from Photo Library      lt input type  file  accept  image    gt    This is as above  but limits the uploads to photos only from camera or library  no videos

User · Answer

You could try this    lt input type  file  capture  camera  accept  image    id  cameraInput  name  cameraInput  gt    but it has to be iOS 6  to work  That will give you a nice dialogue for you to choose either to take a picture or to upload one from your album i e     An example can be found here  Capturing camera picture data without PhoneGap

User · Answer

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

User · Answer

In iOS6  Apple supports this via the  lt input type  file  gt  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

User · Answer

Update 11 2020  The Google Developer link is  currently  dead  The original article with a LOT more explanations can still be found at web archive org   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  quot work everywhere quot   even in desktop browsers  to  quot work only on modern  up-to-date mobile devices with camera quot   Along with many useful tips  Explained methods   Ask for a URL  Easiest but least satisfying   File input  covered by most other posts here   The data can then be attached to a  or manipulated with JavaScript by listening for an onchange event on the input element and then reading the files property of the event target     lt input type  quot file quot  accept  quot image   quot  id  quot file-input quot  gt   lt script gt    const fileInput   document getElementById  file-input       fileInput addEventListener  change    e    gt  doSomethingWithFiles e target files     lt  script gt   The files property is a FileList object   Drag and drop  useful for desktop browsers     lt div id  quot target quot  gt You can drag an image file here lt  div gt   lt script gt    const target   document getElementById  target       target addEventListener  drop    e    gt        e stopPropagation        e preventDefault         doSomethingWithFiles e dataTransfer files            target addEventListener  dragover    e    gt        e stopPropagation        e preventDefault         e dataTransfer dropEffect    copy          lt  script gt   You can get a FileList object from the dataTransfer files property of the drop event   Paste from clipboard   lt textarea id  quot target quot  gt Paste an image here lt  textarea gt   lt script gt    const target   document getElementById  target       target addEventListener  paste    e    gt        e preventDefault        doSomethingWithFiles e clipboardData files          lt  script gt   e clipboardData files is a FileList object again   Access the camera interactively  necessary if application needs to give instant feedback on what it  quot sees quot   like QR codes   Detect camera support with const supported    mediaDevices  in navigator  and prompt the user for consent  Then show a realtime preview and copy snapshots to a canvas    lt video id  quot player quot  controls autoplay gt  lt  video gt   lt button id  quot capture quot  gt Capture lt  button gt   lt canvas id  quot canvas quot  width 320 height 240 gt  lt  canvas gt   lt script gt    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        gt           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    gt          player srcObject   stream           lt  script gt   Don t forget to stop the video stream with player srcObject getVideoTracks   forEach track   gt  track stop      Update 11 2020  The Google Developer link is  currently  dead  The original article with a LOT more explanations can still be found at web archive org

User · Answer

I think this one is working  Recording a video or audio    lt input type  file  accept  video   capture camcorder  gt   lt input type  file  accept  audio   capture microphone  gt    or  new method    lt device type  media  onchange  update this data   gt  lt  device gt   lt video autoplay gt  lt  video gt   lt script gt    function update stream        document querySelector  video   src   stream url       lt  script gt    If it is not  probably will work on ios6  more detail can be found at get user media

[ios] Camera access through browser

Examples related to ios

Examples related to html

Examples related to camera