0

I would like to stop the user from accessing their own filesystem ie. camera roll and videos on a mobile device. Forcing them to capture live media. Is this possible? If so how would I implement this?

KLJ3
  • 11
  • 3
  • 3
    I certainly hope it's not possible to have a web page that prevents me from accessing my device. – David Dec 19 '12 at 14:40
  • I assume you're talking about limiting an `` of some kind? Please specify what you're trying to do, maybe with some code, too. – apsillers Dec 19 '12 at 14:40

1 Answers1

2

On a HTML5 capable device, you can use (if supported) the userMedia API.

Here is an excellent tutorial to get you started.

Basically, you can do:

<input type="file" accept="image/*;capture=camera"> <!-- Submit a new photo -->
<input type="file" accept="video/*;capture=camcorder"> <!-- Submit a new video -->
<input type="file" accept="audio/*;capture=microphone"> <!-- Submit a new audio track using the microphone -->

Like I said, this will only work if supported. Currently, even devices under iOS6 are partially supporting the userMedia API.

Provided your device supports the API, but not the accept="image/*;capture=camera" ... and so on, you could program your own buttons to do the same thing.

<input type="button" id="newStream" value="Click me!">
<script>
    // Following code adapted from the tutorial, not tested
    document.getElementById('newStream').addEventListener('click', function(event){
        // Not showing vendor prefixes or code that works cross-browser.
        navigator.getUserMedia({video: true}, function(stream){
            // Do something with stream or window.URL.createObjectURL(stream);
            alert('Success!');
        }, function(){ alert('Failed!'); });
    });
</script>
Rémi Breton
  • 4,209
  • 2
  • 22
  • 34
  • This looks pretty much right, but where are you getting the `;capture=camera` syntax? All I could find was the boolean `capture` attribute in the [W3C Media Capture API](http://www.w3.org/TR/html-media-capture/#dfn-capture-1). – apsillers Dec 19 '12 at 14:47
  • Check out the link I provided: http://www.html5rocks.com/en/tutorials/getusermedia/intro/ – Rémi Breton Dec 19 '12 at 14:52
  • Thanks for this. I tried these. I'm looking specifically at iOS6 and Android so 'capture' and getUserMedia API aren't quite there yet. I want users to only submit video and photos at specific locations. My initial thoughts were to not allow the site access to the filesystem rather than revoke access all together. I also thought about looking at the geolocation meta data of the media but not sure what the best route would be. Also thought about accessing uiimagepickercontroller but this seems impossible from web app. – KLJ3 Dec 19 '12 at 15:03
  • Quite a webapp you got there... You could combine the `userMedia` API with the `geolocation` API. You could allow users to get to your `getUserMedia()` code only if the get through a geolocation check via `geolocation.getCurrentPosition()`. Check out this on geolocation, by the same dudes at html5rocks: http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/ – Rémi Breton Dec 19 '12 at 15:10
  • 1
    Going forward this is definitely the best answer getUserMedia on mobile browsers will be the answer to everything. In the short term would it be possible to maybe check the EXIF data of the image and compare that to the geolocation? – KLJ3 Dec 19 '12 at 15:34
  • That's a good question. I'm not sure what EXIF data is? – Rémi Breton Dec 19 '12 at 15:49
  • 1
    metadata contained in the header of an image. I have found this: http://stackoverflow.com/questions/5784459/javascript-can-i-read-exif-data-from-a-file-upload-input Will try it later. – KLJ3 Dec 19 '12 at 16:01