QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Capturing Webcam Video and Microphone Audio Using HTML5

Capturing Webcam Video and Microphone Audio Using HTML5

webcam-microphone-javascript

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.

<form action="" method="post" enctype="multipart/form-data">
        <!-- 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

<form action="" method="post" enctype="multipart/form-data">
            <input type="file" accept="image/*" capture>
            <input type="file" accept="video/*" capture>
            <input type="file" accept="audio/*" capture>
            <input type="submit" value="Upload">
</form>

On iOS safari browser it looks like this
IMG_0400

IMG_0401

IMG_0402

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.

Aug 25, 2014Narayan Prusty
Display Google Plus Page Summary In Search Result For Your BrandCapturing Webcam Image Using JavaScript
Comments: 3
  1. Shrutimitr
    4 years ago

    I want to disable “Take photo/video” option. I want only “Choose existing”. How can we do that?

    ReplyCancel
  2. Ghanshyam
    5 years ago

    Why I’m getting black screen while click on “Take Photo” in my iPhone6. While the same is working on another android mobiles.
    Please reply asap.

    ReplyCancel
    • Darshit
      5 years ago

      @Ghanshyam … HTML5 audio recording is not supported in ios and safari browser. I am also facing this same issue and still not find proper solution for it .. :(

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 3 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Capturing Webcam Video and Microphone Audio Using JavaScript
  • Capturing Webcam Image Using JavaScript
  • Playing Audio Using JavaScript – Web Audio API
  • Pull To Refresh For Phonegap App
  • Get HTML5 Audio Duration Length
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license