Get HTML5 Camera and Video on iPhone

By  on  

One of the questions I get asked most often via my contact form is how to get access to the camera and video recorder on the iPhone from within the browser.  It's a valid question, one that I've not come across in the needs of my own website, but since I get it so often, I thought I'd address it.  Of course the camera is an input of the device, but the INPUT element is the key to camera and video access with HTML5.

HTML5 Camera

In the case of both camera and video, the INPUT element with a type of file is necessary:

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

To isolate only a photos as the type to be uploaded, the accept attribute must match the pattern above.

HTML5 Video

If you're looking to be more dynamic and accept video, the accept attribute will need to change:

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

In this case, the upload dialog on the iOS device will allow you to upload either photos or video.

This still seems like a far too basic method of uploading audio or video but it is probably good enough for most developers and systems.  In the future we'll have a much better method for taking dynamic audio and video without the ugly upload dialog!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    Submit Button Enabling

    "Enabling" you ask? Yes. We all know how to disable the submit upon form submission and the reasons for doing so, but what about re-enabling the submit button after an allotted amount of time. After all, what if the user presses the "stop"...

Discussion

  1. Andrew

    iPhone 6 Plus running iOS 9… Can’t get this demo to work in Safari. I click “Choose File” and then “Take Photo or Video”. The camera app opens up and lets me switch between photo and video, turn the flash auto/on/off, and Cancel, but the camera just shows black, as if it were disabled or covered by something. Button to take photo/start recording simply doesn’t work either.

    • James

      this should be a permission issue, go to settings->privacy->camera and enable safari

  2. Daniel Cher

    David, this is great. When the user clicks on the file button, it asks “take photo or upload one from your respository?” Are you aware of a way of forcing the mobile phone to skip this step and always “take photo”?

  3. Hi David,
    Do you have any examples or ideas of how to use the captured image?

    I’m trying to build a web app that captures a photo through mobile then allows users to overlay images of wigs onto the image they took.

    Thanks,
    Adrian

  4. Video quality differs a lot on iOS between uploading a pre-recorded video and recording a video on the spot https://addpipe.com/blog/video-quality-when-recording-videos-from-safari-on-ios-through-html-media-capture/

  5. Joe

    This gets me very close to what I am trying to do. Where I am getting hung up is after I take the photo, how can I save it somewhere? For us, it would be saving that image in to a SharePoint document library. I have tried a few different options that I have come across but so far none of them are working. Any direction is appreciated!
    Thanks – Joe

  6. mhmd

    on android only the camera open
    but on iphone we can choose from gallery
    how to solve this on iphone i want on iphone only the camera open to take picture not also the gallery

  7. It is not possible to prevent iOS from offering the “Photo Library” option. On top of that starting with iOS 9 you can select from any service including iCloud Drive, Dropbox, etc… https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/

    • mhmd

      i don’t want to select from gallery or other i want only get picture using camera without the appearance of choose from

  8. Ziv Lazar

    Hi. It doesnt seem like it possible to change the image size. It’s tiny. Any ideas?

  9. ryan

    is it also possible to acces the square format of the iphone camara?

  10. Anuj Sharma

    Hi DW,
    I am curious to know that can we control camera zoom-in and zoom-out in Safari.

    thanks
    Anuj Sharma.

  11. rithvik

    is there any way where I can see the full code for this?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!