QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Capturing Webcam Video and Microphone Audio Using JavaScript

Capturing Webcam Video and Microphone Audio Using JavaScript

webcam-microphone-javascript

This post is a part 17 of Capturing Webcam Video and Microphone Audio Using JavaScript post series.

In this post I will shown you how to capture webcam and microphone stream(data) using JavaScript. Before you continue with this article make sure you have read my article on Blobs and also have watched my course on HTML5 video tag.


navigator.getUserMedia()

navigator.getUserMedia() is a part of WebRTC APIs. This function returns us a MediaStream whose tracks are attached to webcam and microphone.

Let’s see the getUserMedia in action. Read the comments for explanation.
View Demo

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || null;

        //we need to pass the stream properties to the getUserMedia function.
        var video_audio_properties = {video: true, audio: true};

        //we can also set webcam resolution and framerate in the above object.
        //mandatory properties must be satisfied by the getuserMedia otherwise thrown an error.
        //optional properties will be satisfied if possible. Error will not be through if not satisfied.
        video_audio_properties = {video: {mandatory: {minWidth: 300, minHeight: 300, minFrameRate: 30}, optional: [{ minFrameRate: 60 }]}, audio: true};

        function onSuccess(stream)
        {
            document.getElementById("video").src = window.URL.createObjectURL(stream);

            //property of video tag.
            document.getElementById("video").play();
        }

        function onError(error)
        {
            console.log("Video capture error: ", error.code);
        }

        if(navigator.getUserMedia != null)
        {
            navigator.getUserMedia(video_audio_properties, onSuccess, onError);
        }
        else
        {
            alert("microphone and webcam API not supported");
        }

Fallback

IE and many older browsers don’t support getUserMedia then use getUserMedia.js. getUserMedia.js provides flash fallback if navigator.getUserMedia is not supported.

Aug 5, 2014Narayan Prusty
Speech Recognition and Synthesis Using JavaScriptMultiple Simultaneous Uploads using HMTL5
Comments: 3
  1. Vaibhav
    5 years ago

    Hi,

    As safari browser not supporting GetUserMedia, I tried your demo html (https://github.com/addyosmani/getUserMedia.js) by running it on safari but showing deviceError

    I am using Safari 9.1.2 on Mac OS X EI Capitan

    ReplyCancel
  2. Vaibhav
    5 years ago

    Hi,

    As safari browser not supporting GetUserMedia, I tried your demo html (https://github.com/addyosmani/getUserMedia.js) by running it on safari but showing deviceError

    ReplyCancel
  3. George
    6 years ago

    Hi,

    I appreciate the articles. Can we save this captured video + audio to a website somehow?

    Thanks

    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`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 5 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • navigator.getUserMedia()
  • Fallback
Related Articles
  • Capturing Webcam Image Using JavaScript
  • Capturing Webcam Video and Microphone Audio Using HTML5
  • Creating a Percentage of Webpage Scrolled Indicator
  • Playing Audio Using JavaScript – Web Audio API
  • Record Microphone Audio using Intel XDK
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license