Allow only access to camera device in HTML5

Question

I'm currently developing application using the camera for iphone in HTML5 with

<input type="file" accept="capture=camera">

The problem is that I have a little list that give me the choose between my library and my camera.

My idea is to have two buttons, one for the library and an other for the camera.

I know the way to only give the library but not for the camera.

Question: Is there a way to separate the two types?

Answer 1

Unfortunaly not possible :/

Extract from HTML Media Capture - Security and privacy considerations :

In addition, the User Agent implementation is advised to provide an indication to the user when an input device is enabled and make it possible for the user to terminate such capture. Similarly, the User Agent is advised to offer user control, such as to allow the user to:

• select the exact media capture device to be used if there exist
  multiple devices of the same type (e.g. a front-facing camera in
  addition to a primary camera).

• disable sound capture when in the
  video capture mode.

Answer 2

I had this problem too, I didn't come across a solution, I only found unofficial sources stating that this is not possible. All you can do is require either video/* or image/* via the accept attribute.

Answer 3

Write the following takePhoto acton method:

- (IBAction)takePhoto:(UIButton *)sender { 
     UIImagePickerController *picker = [[UIImagePickerController alloc] init];
     picker.delegate = self;
     picker.allowsEditing = YES;
     picker.sourceType = UIImagePickerControllerSourceTypeCamera;
     [self presentViewController:picker animated:YES completion:NULL];
} 

Finally, we do the same for the selectPhoto action method, but changing the sourceType to UIImagePickerControllerSourceTypePhotoLibrary.

- (IBAction)selectPhoto:(UIButton *)sender {  
     UIImagePickerController *picker = [[UIImagePickerController alloc] init];
     picker.delegate = self;
     picker.allowsEditing = YES;
     picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
     [self presentViewController:picker animated:YES completion:NULL];
} 

Implementing the Delegate Methods of UIImagePickerController

When the user takes a photo with the camera and resizes the image (photo resizing is allowed since we said allowsEditing = YES when we created the image picker). It is a NSDictionary which contains, among other things, the original image and the edited image (accessible through the tag UIImagePickerControllerEditedImage).

(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {

     UIImage *chosenImage = info[UIImagePickerControllerEditedImage];
     self.imageView.image = chosenImage;
     [picker dismissViewControllerAnimated:YES completion:NULL];

} 

Answer 4

It is not possible in iOS6 through 10. It does work on Android 3.0+.

The capture attribute, introduced by HTML Media Capture, should force iOS to jump straight to the cam app but it's not supported.

From the spec:

The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device's environment ... is preferred.

PS: Your code is slightly incorrect, you should use <input accept="video/*,image/*" capture > to:

1. capture both video and photos
2. jump directly to cam (when supported)

See Correct HTML Media Capture Syntax for more details.