In my article on getUserMedia function I explained how we can capture webcam video and microphone audio stream using JavaScript. Capturing it using JavaScript is useful if you wanted to manipulate the data, create a live chat or just upload a video or audio via AJAX.
Now HTML5 provides a way to only capture the webcam video and microphone audio without JavaScript which is only useful if you want to upload captured video or audio to the web server.
HTML5 capture attribute
HTML5 capture attribute can be used on the input file tag to capture and upload captured media within a file. We can capture microphone audio, webcam image and webcam video.
<!-- accept attribute is used to identify what to capture and capture attribute identifies that media needs to be captured and uploaded. Here we can capturing image. -->
<input type="file" accept="image/*" capture>
<input type="submit" value="Upload">
</form>
Similarly we can capture video and audio:
View Demo
On iOS safari browser it looks like this
Browser first captures the media and then puts the media into a file and attaches it to the form. Now we can submit the form or can do anything that we do with a normally attached file to the form.
