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 Mirror.co.uk (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:

• Eclipse 2015: How to photograph the solar eclipse safely
• Video tutorial on how to stream the image of the camera to a website in C#
• Download MS Visual Studio
• Download MS .NET Framework
• Download C# Onvif library
• Download Apache webserver for web-broadcasting
• Get an USB web camera

MainWindow.xaml.cs

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:  http://www.camera-sdk.com/p_13-download-onvif-standard-ozeki-camera-sdk-for-webcam-and-ip-camera-developments-onvif.html
// 
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();
            SetVideoViewer();
            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;
            _streamer.Start();
            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("");
                }
            } 
        }
    }
}

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.

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

http://192.168.112.122:8080/test.html

• 192.168.112.122 = 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

Conclusion:

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:

• Eclipse 2015: How to photograph the solar eclipse safely
• Video tutorial on how to stream the image of the camera to a website in C#
• Download MS Visual Studio
• Download MS .NET Framework
• Download C# Onvif library
• Download Apache webserver for web-broadcasting
• Get an USB web camera

Thank you for your attention!