How to Stream the Solar Eclipse to a Website With a USB Webcam (C# Source Code) - 20th March, 2015




Introduction: How to Stream the Solar Eclipse to a Website With a USB Webcam (C# Source Code) - 20th March, 2015

C# source code for streaming camera image to websites - not just on 20 March 2015!

This article demonstrates how to watch the solar eclipse safely on the 20th of March on your PC by using a simple USB webcamera. It is a C#-based solution that allows you to stream the image of your USB web camera to a website, consequently you can watch the solar eclipse even with your remote friends - they only need to visit your website.

Be careful while watching the solar eclipse:

Using this solution, it is not needed to hold the camera up to the Sun and to look at it, you only need to place a USB camera in front of the Sun, and the solar eclipse will appear in your C# camera viewer application. What’s more, by broadcasting it to a website, you can share the experience with your friends as well.

As we know, looking directly at the Sun during the solar eclipse is damaging for our eyes. It is also hard to look at the Sun on a normal day, because it is so bright… but during an eclipse the shade created by the Moon passing in front of the Sun makes it easier. So be careful! Looking at the Sun even during an eclipse can cause permanent eye damage.

As it has been written by the (Eclipse 2015: How to photograph the solar eclipse safety), cameras do not have retinas to get damaged by the Sun's rays, so it is not problem for them to point towards the eclipse. However, photographers need to be careful when lining up shots. They should wear good solar eclipse glasses that filter out all of the harmful ultraviolet and infrared light and almost all of the intense visible light to allow you to view the eclipse safely. If you want to make photos, you should be extremely careful when you are trying to hold the camera up to the Sun - the rays will still fry your eyes as you try to line up the shot. So if you wear a safely glasses, it is allowed to look at the eclipse through your smartphone or digital camera screen, but it iss still not a good idea to look through any kind of telephoto lens or binoculars.

This example presents how to watch the solar eclipse on your PC screen by using a simple USB webcamera. Using this solution, it is not needed to hold the camera up to the Sun and to look at it, you only need to place a USB camera in front of the Sun, and the solar eclipse will appear in your C# camera viewer application. (Of course, you need to put a foil in front of the camera that filters out all of the harmful ultraviolet and infrared light.) What’s more, by broadcasting the camera image to a website, you can share the experience with your friends as well.

References, useful links and prerequisites:

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: How to Develop USB Camera Streamer in C#


After you have successfully installed MS Visual Studio, MS .NET Framework and the C# Onvif library, let's create a new WPF project in Visual Studio. The following code snippet shows the MainWindow.xaml.cs file, that contains all the necessary methods that is needed to be able to connect to and disconnect from your USB camera (and even for your IP camera). Thereafter, you need to implement the MJPEG streaming. First you need to achieve that your application will be able to start and stop web-broadcasting. It is also needed to let your software open the camera stream in a web-browser.

(All the necessary methods and the corresponding event handlers can be seen below in the code snippet, but please note that the GUI elements are not described here. The attached example project contains the full source code including the GUI elements as well. Feel free to use and modify the attached sample program.)

using System.IO;
using System.Net; using System.Net.Sockets; using System.Text; using System.Windows; using System.Windows.Media; using Ozeki.Media.IPCamera; using Ozeki.Media.MediaHandlers; using Ozeki.Media.MediaHandlers.Video; using Ozeki.Media.MJPEGStreaming; using Ozeki.Media.Video.Controls;

// // You have to add Ozeki Camera SDK reference. // You can download from here: //

namespace Basic_CameraViewer { ///

/// Interaction logic for MainWindow.xaml ///

public partial class MainWindow : Window { private VideoViewerWPF _videoViewerWpf;

private BitmapSourceProvider _provider;

private IIPCamera _ipCamera;

private WebCamera _webCamera;

private MediaConnector _connector;

private MJPEGStreamer _streamer;

private IVideoSender _videoSender;

public MainWindow() { InitializeComponent();

_connector = new MediaConnector();

_provider = new BitmapSourceProvider();


ipAddressText.Text = LocalIpAddress(); }

private static string LocalIpAddress() { var localIp = string.Empty; var host = Dns.GetHostEntry(Dns.GetHostName()); foreach (var ip in host.AddressList) { if (ip.AddressFamily != AddressFamily.InterNetwork) continue; localIp = ip.ToString(); break; } return localIp; }

private void SetVideoViewer() { _videoViewerWpf = new VideoViewerWPF { HorizontalAlignment = HorizontalAlignment.Stretch, VerticalAlignment = VerticalAlignment.Stretch, Background = Brushes.Black }; CameraBox.Children.Add(_videoViewerWpf);

_videoViewerWpf.SetImageProvider(_provider); }

private void OnConnectEnabled() { DisconnectUsbButton.IsEnabled = true; DisconnectIpCamButton.IsEnabled = true; StartServerButton.IsEnabled = true;

ConnectUsbButton.IsEnabled = false; ConnectIpCamButton.IsEnabled = false; }

private void OnDisconnectEnabled() { DisconnectUsbButton.IsEnabled = false; DisconnectIpCamButton.IsEnabled = false; StartServerButton.IsEnabled = false;

ConnectUsbButton.IsEnabled = true; ConnectIpCamButton.IsEnabled = true; }

#region USB Camera Connect/Disconnect

private void ConnectUSBCamera_Click(object sender, RoutedEventArgs e) { _webCamera = WebCamera.GetDefaultDevice(); if (_webCamera == null) return; _connector.Connect(_webCamera, _provider); _videoSender = _webCamera;

_webCamera.Start(); _videoViewerWpf.Start();

OnConnectEnabled(); }

private void DisconnectUSBCamera_Click(object sender, RoutedEventArgs e) { _videoViewerWpf.Stop();

_webCamera.Stop(); _webCamera.Dispose();

_connector.Disconnect(_webCamera, _provider);

OnDisconnectEnabled(); } #endregion

#region IP Camera Connect/Disconnect

private void ConnectIPCamera_Click(object sender, RoutedEventArgs e) { var host = HostTextBox.Text; var user = UserTextBox.Text; var pass = Password.Password;

_ipCamera = IPCameraFactory.GetCamera(host, user, pass); if (_ipCamera == null) return; _connector.Connect(_ipCamera.VideoChannel, _provider); _videoSender = _ipCamera.VideoChannel;

_ipCamera.Start(); _videoViewerWpf.Start();

OnConnectEnabled(); }

private void DisconnectIPCamera_Click(object sender, RoutedEventArgs e) { _videoViewerWpf.Stop();

_ipCamera.Disconnect(); _ipCamera.Dispose();

_connector.Disconnect(_ipCamera.VideoChannel, _provider);

OnDisconnectEnabled(); } #endregion

private void Start_Streaming_Click(object sender, RoutedEventArgs e) { var ip = ipAddressText.Text; var port = PortText.Text;

_streamer = new MJPEGStreamer(ip, int.Parse(port));

_connector.Connect(_videoSender, _streamer.VideoChannel);

_streamer.ClientConnected += streamer_ClientConnected; _streamer.ClientDisconnected += streamer_ClientDisconnected;


OpenInBrowserButton.IsEnabled = true; StartServerButton.IsEnabled = false; StopServerButton.IsEnabled = true;


void streamer_ClientConnected(object sender, Ozeki.VoIP.VoIPEventArgs e) { e.Item.StartStreaming(); }

void streamer_ClientDisconnected(object sender, Ozeki.VoIP.VoIPEventArgs e) { e.Item.StopStreaming(); }

private void Stop_Streaming_Click(object sender, RoutedEventArgs e) { _streamer.Stop(); _connector.Disconnect(_videoSender, _streamer.VideoChannel);

OpenInBrowserButton.IsEnabled = false; StopServerButton.IsEnabled = false; StartServerButton.IsEnabled = true; }

private void OpenInBrowserClick(object sender, RoutedEventArgs e) { var ip = ipAddressText.Text; var port = PortText.Text; CreateHTMLPage(ip, port); System.Diagnostics.Process.Start("test.html"); }

private void CreateHTMLPage(string ipaddress, string port) { using (var fs = new FileStream("test.html", FileMode.Create)) { using (var w = new StreamWriter(fs, Encoding.UTF8)) { w.WriteLine(""); } } } } }

Step 2: How to Stream the USB Camera Image on a Website

In order to stream the USB camera image on a website, first you need to install a webserver (e.g. Apache). After you have accomplished this requirement and you have successfully implemented the application, click on the 'Open in browser' button. As the attached image shows, the camera image (that is the beautiful solar eclipse) will appear in your webbrowser. You will see that the 'test.html' file will be generated. To be able to broadcast the camera image, let’s copy and paste this HTML file into the /var/www folder of your webserver.

Step 3: How to Display USB Camera Stream in a Remote Webbrowser to Watch the Solar Eclipse

If you want to share your experiences with your friends, you only need to send the following URL to them:

  • = your IP address
  • 8080 = the port of your webserver
  • test.html = it contains the HTML code that is used to display your camera image in a remote webbrowser


I hope you gained unforgettable experiences during the solar eclipse in 2015! Feel free to use this example project to stream any event to a website from your USB or IP camera.

References, useful links and prerequisites:

Thank you for your attention!

Explore Science Contest

Participated in the
Explore Science Contest

Be the First to Share


    • Backyard Contest

      Backyard Contest
    • Silly Hats Speed Challenge

      Silly Hats Speed Challenge
    • Arduino Contest 2020

      Arduino Contest 2020

    3 Discussions


    3 years ago

    it didn't work for me. Does this only work on 20th March 15?

    Story of my life: always late to the party :(


    5 years ago on Introduction

    Excellent 'ible !!! You do need to make it clear that the web cam can be
    "burned" like our retinas when it is pointed at the uneclipsed sun for
    any period of time. I got the feeling from the 'ible that you point the
    camera at the sun and then broadcast before, during and after the
    eclipse. The camera needs the same amount of protection as our eyes do
    when viewing the sun. The CCD in the webcam will develop burn spots
    when pointed at full sun or will degrade to where images are fuzzy or burned out all the time. Astronomical supply companies sell Mylar
    solar filters that can be placed infront of the webcam to protect it
    during full sun and then removed at total eclipse.


    5 years ago on Introduction

    I love this so much! Nothing better than being able to share these expierences with others!