How to display MJPEG camera stream via web browser

This example demonstrates a simple method for how you can display MJPEG camera stream via browser in C# [ASP.NET]. 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#.

In contrast with other mjpeg streamer solutions, the implementation of Ozeki Camera SDK makes it possible to adjust automatically to the bandwidth. Since other products send all of the camera frames, those mjpeg streamers are not able to work well on internet connections with lower bandwidth. Ozeki Camera SDK calculates the number of frames that are sent through the network based on the bandwidth.

This leads to a very important fact that the packets are not lost on the network, and the latency becomes minimal.

How to display MJPEG camera stream via browser 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.

Supported by all browsers for example Google Chrome, Mozilla Firefox, Microsoft Edge, Microsoft Internet Explorer etc.

Classes:

  • MJPEGStreamer: This object is used for video steaming to a website. The MJPEGStreamer object requires an OzConf_MJPEGStreamServer object as a parameter. The MJPEGStream has two events: ClientConnected and ClientDisconnected. The first one is used for starting the stream whether a client is connected to the SDK. The second one is for stopping the stream if the client disconnects from the SDK.
  • OzConf_MJPEGStreamServer: For the first parameter of this class you need to give the port number of your computer through which the web browser will retrieve the camera image. The second parameter requires the maximum frame rate interval you wish to use for sending out the camera frames.
  • MediaConnector: With the help of this object, we can connect different VideoHandler objects to each other. In this example the following code snippet shows you how to connect the VideoChannel which comes from the camera to the MJPEGSteamer's VideoChannel. That means it will display the image of the camera in the web browser every time, when a client opens the page.
  • WebCamera: 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:

  • ClientConnected: 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.
  • ClientDisconnected: 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.

MJPEG camera stream viewer via browser example in C#

WPF  

WebForm.aspx.cs 

using System;
using System.Web.UI;
using Ozeki.Media;
using Ozeki.Camera;
using System.Collections.Generic;
using System.Linq;

namespace MJPEGCameraStream_ASP
{
    public partial class _Default : Page
    {
        public int ListenPort { get { return StreamerManager.Streamer.ListenPort; } }

        protected void Page_Load(object sender, EventArgs e)
        {
            if(!Page.IsPostBack)
                StreamerManager.InitPage();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            if (StreamerManager.Streamer != null && StreamerManager.Streamer.Clients.Count > 0)
            {
                var client = StreamerManager.Streamer.Clients[0];
                DroppedFrames.Text = client.DroppedFrames.ToString();
                AllFrames.Text = client.FramesArrivedFromCamera.ToString();
                ForcedFrames.Text = client.ForcedFramesSent.ToString();
            }
        }
    }

    public static class StreamerManager
    {
        public static MJPEGStreamer Streamer { get; private set; }
        private static MediaConnector _connector;
        private static ICamera _camera;
        private static bool _inited;

        static StreamerManager()
        {
            var config = new OzConf_MJPEGStreamServer(11111, 30);
            Streamer = new MJPEGStreamer(config);
        }

        public static void InitPage()
        {
            if (!_inited)
                _inited = true;
            else
                return;

            try
            {
                _connector = new MediaConnector();
                _camera = WebCameraFactory.GetDefaultDevice();
                

                Streamer.ClientConnected += _streamer_ClientConnected;
                Streamer.ClientDisconnected += _streamer_ClientDisconnected;

                if (_camera != null)
                {
                    _connector.Connect(_camera.VideoChannel, Streamer.VideoChannel);
                    _camera.Start();
                }

                Streamer.Start();
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.ToString());
                _inited = false;
            }
        }

        private static void _streamer_ClientDisconnected(object sender, VoIPEventArgs e)
        {
            e.Item.StopStreaming();
        }

        private static void _streamer_ClientConnected(object sender, VoIPEventArgs e)
        {
            e.Item.StartStreaming();
        }
    }
}
Code 1 - MJPEG camera stream via browser example in C# [ASP.NET]

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. Building and running will load in the image of the IP camera device connected to your PC into a web browser.

Below you can find the code of the WebForm.aspx file of the previously presented application. With the help of this section your ASP.NET Application will be able to work properly.

WebForm.aspx 

<%@ Page Title="Ozeki" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MJPEGCameraStream_ASP._Default" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <img src="http://localhost:<%=ListenPort %>"  alt="image" style="height: 500px; width: 700px;"/>
    <div>
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000">
        </asp:Timer>
    </div>
    <table>
        <tr>
            <td><label>Arrived frames:</label></td>
            <td>
                <asp:UpdatePanel runat="server" UpdateMode="Conditional" >
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:Label ID="AllFrames" runat="server" Text="NA"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
        <tr>
            <td><label>Dropped frames:</label></td>
            <td>
                <asp:UpdatePanel runat="server" UpdateMode="Conditional" >
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:Label ID="DroppedFrames" runat="server" Text="NA"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
        <tr>
            <td><label>Forced frames sent:</label></td>
            <td>
                <asp:UpdatePanel runat="server" UpdateMode="Conditional" >
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:Label ID="ForcedFrames" runat="server" Text="NA"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
</asp:Content>
Code 2 - JPEG camera stream via browser example in C# [ASP.NET]

DISCLAIMER: Please note that the following features will only work if your IP camera supports the given function. You should check the user manual of your IP camera to make sure it supports the feature that you wish to implement in C#.

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