Question

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?

Answer 1

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>