Creating a live video streaming page using HTML-5 and JavaScript

-
                                                Now a day live streaming is a very popular feature in many apps like Facebook, Instagram, and Hotstar, as well as many websites, and also provides online streaming of any live ongoing event on their site. Obviously broadcasting any live event is a tedious task and required broadcasting rights of that event, which causes you to pay a good amount to the event organizer. There are a bunch of organizations available that take the all responsibilities of broadcasting live events. But as a noob when you just try to set up things for testing purposes on your local as well as the live server then there come javascript and HTML 5 using which you can implement the live streaming page on your webpage.

You need to create only two files -

1. Your HTML page says index.html has the following code.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Home</title>
  5. <link rel="stylesheet" href="css/style.css">
  6. </head>
  7. <body>
  8.  <div class="booth">
  9.   <video id="video" width="400" height="300" autoplay></video>
  10.  </div>
  11. <script type="text/javascript" src="js/script.js"></script>
  12. </body>
  13. </html>
2. Here your self invoking Javascript code linked to an HTML file

  1. (function(){
  2. var video = document.getElementById('video'),
  3.  vendorUrl = window.URL || window.webkitURL;

  5. navigator.getMedia = navigator.getUserMedia ||
  6.  navigator.webkitGetUserMedia ||
  7.  navigator.mozGetUserMedia ||
  8.  navigator.msGetUserMedia;

  10.  //capture media

  12.  navigator.getMedia({
  13. video:true,
  14. audio:true
  15.  }, function(stream){
  16. video.src = vendorUrl.createObjectURL(stream);
  17. video.play();
  18.  },function(error){
  19. //error.code
  20.  });

  22. })();
        Now go ahead and tries to open the index.html page in any browser it will detect your webcam and asking the permission to play video. Allow browsee to play the video and you can get a live stream of your webcam on your page.

    In case you don't have a built-in webcam then you can use an external webcam or you can use your smartphone as a webcam.

I have posted a different post on "How to use your smartphone as a webcam". 

Here you can download a sample source code Download

Please do follow me on Google+ for more cool I.T. stuff

Comments

  1. GauravMarch 15, 2018 at 10:51 PM

    Download sample source code used in tutorial from
    https://drive.google.com/open?id=1QrZT9uO0tL39rHG4oRD_mWOcMASG8zqn

    ReplyDelete

Post a Comment

Popular posts from this blog

Jasper report integration in Spring boot/Spring MVC.

-
Image
Hi folks,                   Here we came up with another interesting poc, which is the necessity of almost every project when its come to reporting. Jasper reporting is one of the powerful and secure reporting tool available in market.                 In this blog post we are leveraging the power of it to generate a pdf/html report with dynamic data populated by the backend and making the generated report as a downloadable form on the client.  Before we deep dive into coding part, let me set up the context of POC application.  We are creating a Spring Boot starter web project with dependency of jasper and jstl.  We are using a few UI cdn libraries to render UI and make backend call from UI.  Then after we will hit rest API from UI and get downloadable report into browser/client. Here are the pom dependencies. Pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2
Read more

FireBase Crud operation in Spring Boot

-
Image
                       Hello Geeks, hope you are healthy and doing well in this tough time. In this particular blog post, I am going to share the simple way in which you can connect to Google's firebase real-time database. Of course, we will use some of the basic dependencies to connect our spring boot to firebase. I am going to use maven based configuration. Here, I am sharing a sample spring boot application with simple crud operation on firebase real-time DB. So, first of all, initialize our application from the  spring initializer  and extract, import the downloaded project into your favorite IDE. Dependencies I am adding here : Spring boot starter web Spring firebase admin Here is my pom.xml. <?xml version="1.0" encoding="UTF-8"?> <project xmlns= "http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation= "http://maven.apache.org/POM/
Read more

Hybris Overview and b2c installation initialization

-
Image
Hi Geeks,                  This is my first blog after a long gap. Today I'm going to share step by step process to set up an e-commerce suite with installation and initialization. Hybris is one of the trending eCommerce suites in the market along with its competitors.               Table of Content 1. Overview 2. Prerequisites before installation 3. Installation 4. Initialization 5. Verifying Installation 6. URLs Overview             Hybris is a  multichannel e-commerce product management solution. Key competitors of Hybris are Oracle's ATG, Open Source Magento, IBM's WebSphere Commerce. Hybris is a set of individual extensions. It is an omnichannel commerce solution. In 1997, it is initialized by a Switzerland company named Hybris. Later in August  2013, it is acquired by SAP. You need a license to run hybris.  Hybris run of java and core concept of spring framework. It leverages all-powerful concepts of Java, Jquery, JDBC, and Spring concepts like dependency injection,
Read more