How to display WebM stream via web browser in HTML5 video tag

This example demonstrates a simple method for how you can display camera stream via browser in C#. To implement this example, you must have Ozeki Camera SDK installed, and a reference to OzekiSDK.dll should be added to your Visual Studio project.
Please follow the steps of this video tutorial if you would like to know how to stream the image of the camera to a website in C#.

How to display WebM stream via browser in HTML5 video tag using C#?

Getting started

To get started it is recommended to Download and Install the latest version of Ozeki Camera SDK. After installation you can find the example code discussed in this page with full source code in the following location on your harddisk:

Download Ozeki Camera SDK: https://camera-sdk.com/p_6513-download-onvif-ozeki-camera-sdk-for-c-sharp.html

To compile this example you will need Microsoft Visual Studio installed on your computer.

The WebM video format is supported by most browsers for example Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, Opera etc.

Classes:

  • WebMStreamer: This object is used for video steaming to a website. The WebMStreamer object requires an OzConf_WebmStreamer object as a parameter. The WebMStreamer has two events: OnClientConnected and OnClientDisconnected. The first one is used for starting the stream whether a client is connected to the stream server. The second one is for stopping the stream if the client disconnects from the stream server.
  • OzConf_WebmStreamer: For the parameter of this class you need to give the port number of your computer through which the web browser will retrieve the camera image.
  • MediaConnector: With the help of this object, we can connect different VideoHandler and AudioHandler objects to each other. In this example the following code snippet shows you how to connect the Video and Audio Channel which comes from the camera to the WebMStreamer's Video and Audio Channel. That means it will display the video and audio of the camera in the HTML5 video tag every time, when a client starts the stream.
  • IWebCamera: We need to choose the camera which we want to use. In the example below, we will use the default webcamera connected to our PC.

Events:

  • OnClientConnected: This event occurs if a new client connects to the stream. You can decide what you want to do with this client. For example you can log this connection or you can block it based on IP address.
  • OnClientDisconnected: This event occurs if a client disconnects from the stream. Similar the ClientConnected event you can decide what you do.

Methods:

  • Start(): By calling the Start() method the video stream is starting.
  • Stop(): By calling the Stop() method you can stop the video stream.

WebM stream via web browser in HTML5 video tag example in C#

Console  

Program.cs 

using System;
using Ozeki.Media;
using Ozeki.Camera;
using Ozeki.Common;

namespace WebMStream_For_HTML5
{
    /// <summary>
    /// WebM livestream which can be easily played by the browsers without any additional component or plugin. Can also played with VLC video player.
    /// <summary>
    
    class Program
    {
        static void Main(string[] args)
        {
            MediaConnector connector;
            WebMStreamer webmStreamer;
            IWebCamera camera;
            Microphone mic;

            webmStreamer = new WebMStreamer(new OzConf_WebmStreamer(8181));
            connector = new MediaConnector();

            camera = WebCameraFactory.GetDefaultDevice();
            mic = Microphone.GetDefaultDevice();
            mic.Start();
            camera.Start();

            connector.Connect(camera.VideoChannel, webmStreamer.VideoReceiver);
            connector.Connect(mic, webmStreamer.AudioReceiver);

            webmStreamer.Start();
            Console.WriteLine("WebM Stream is online, can be reached at: ");
            foreach(var url in webmStreamer.StreamerUrls)
            {
                Console.WriteLine(url);
            }

            webmStreamer.OnClientConnected += Webm_OnClientConnected;
            webmStreamer.OnClientDisconnected += WebmStreamer_OnClientDisconnected;

            Console.ReadLine();

        }

        private static void WebmStreamer_OnClientDisconnected(object sender, GenericEventArgs<WebMStreamClient> e)
        {
            Console.WriteLine("Client Disconnected");
        }

        private static void Webm_OnClientConnected(object sender, GenericEventArgs<WebMStreamClient> e)
        {
            Console.WriteLine("Client connected: " + e.Item.RemoteEndPoint);
            e.Item.StartStreaming();
        }
    }
}
Code 1 - WebM stream server example in C#

Browser View

camera image in web browser
Figure 1 - Camera image in web browser

After the successful implementation of the functions the application will work properly. If you are done with building the example you can run it and the video stream of the webcamera device connected to your PC will be reachable through a HTML5 video tag.

Below you can find the code of the html page presented in Figure 1.

Video.html 

<html>
	<body>
		<video id="video1" style="width:600px;max-width:100%;" src="http://192.168.112.166:8181/" controls="" autoplay>
		    Your browser does not support HTML5 video.
		</video>
	</body>
</html>
Code 2 - WebM stream via browser HTML5 video tag example

Related Pages

FAQ

Below you can find the answers for the most frequently asked questions related to this topic:

  1. How can I get the URL of the camera?

    You can get the URL from the producer of the camera. (In the 10th tutorial you can find information on how to create an own IP camera discoverer program.)

  2. I have not managed to build the solution. How to solve it?

    • Please set the Target framework property of the project to .NET 4.0.
    • You should add the System.Drawing.dll and the OzekiSDK.dll to the references of the solution.
    • Please import the missing classes.

More information