Video Capturing in HTML5 PRO

HTML5 allows us to capture the video and the audio stream coming from the device camera and microphone. The following code sample shows how simple it is to do it.

<!DOCTYPE html>
<html>
<head>
    <title>sample for video capturing using html5</title>
</head>
<body>
    <video autoplay width="480" height="360"></video>
    <input type="button" id="stopbt" value="stop"/>
    <script type="text/javascript">
        window.URL = window.URL || window.webkitURL;
        navigator.getUserMedia  =
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia;
        var video = document.querySelector('video');
        var cameraStream = '';
        if (navigator.getUserMedia)
        {
            navigator.getUserMedia(
                    {audio: true, video: true},
                    function(stream)
                    {
                        cameraStream = stream;
                        video.src = window.URL.createObjectURL(stream);
                    },
                    function()
                    {
                        document.writeln("problem with accessing the hardware!")
                    }
            );
        }
        else
        {
            document.writeln("video capture is not supported!");
        }
        document.querySelector('#stopbt').addEventListener(
                'click',
                function(e)
                {
                    video.src='';
                    cameraStream.stop();
                });
    </script>
</body>
</html>

The following video clip overviews this code sample, shows its execution and explains it.

You can find more video clips, code samples and training material for learning HTML5 in my Introduction to HTML5 free course at http://abelski.lifemichael.com.

Share:

The Visitor Design Pattern

The Visitor Design Pattern

The visitor design pattern allows us to add operations to objects that already exist without modifying their classes and without extending them.

What are Anti Patterns?

Anti Patterns

Unlike design patterns, anti patterns just seem to be a solution. However, they are not a solution and they cause additional costs.

Virtual Threads in Java Professional Seminar

Virtual Threads in Java

The use of virtual threads can assist us with improving the performance of our code. Learn how to use virtual threads effectively.

NoSQL Databases Courses, Seminars, Consulting, and Development

MongoDB Design Patterns Meetup

The use of MongoDB involves with various cases in which we can overcome performance issues by implementing specific design patterns.

image of woman and database

Record Classes in Java

Learn how to define record classes in Java, and when to use record classes in your code. Stay up to date with the new Java features.

Accessibility | Career | Conferences | Design Patterns | JavaScript | Meetups | PHP | Podcasts | Python | Self Learning

Teaching Methodologies | Fullstack | C++ | C# | CSS | Node.js | Angular | Java | Go | Android | Kotlin | Swift | Academy

Front End Development | Scala | Architectures | Cloud | Big Data | Internet of Things | Kids Learn Programming

The Beauty of Code

Coding is Art! Developing Code That Works is Simple. Develop Code with Style is a Challenge!

Skip to content Update cookies preferences