A webcam video live stream in the browser could be used in many projects. So I decided to make an example app that shows how we can stream the webcam video to a browser (only video, no audio). For this example project I used Windows IoT Core 14393 and the Raspberry Pi 3 Model B. Personally, I used the video stream to navigate my robot with the browser (my robot).
Prerequisites
To develop the C# UWP App you should use a Windows 10 Client with Build 14393 or higher and Visual Studio 2015 Update 3 with Universal Windows App Development Tools.
On the Raspberry Pi 3 Model B use the Raspberry Pi Windows IoT Core Build 14393 image or higher.
Enable the following capabilities in the Package.appxmanifest in the UWP App:
- Internet (Client & Server)
- Webcam
In the UWP App project properties, in the section “Application” you have to set the “Target version” and the “Min version” to “Windows 10 Anniversary Edition (10; Build 14393)”.
Frames per second and network traffic
The video stream has around 12 frames per second and a delay around 300 milliseconds in a local network. The AJAX request can get around 17 fps, but the the server side code can only supply around 12 fps. Depending on the network connection there are lags.
The download rate is at 17 fps around 6-7 MBit/s. You can limit the network traffic by setting a lower maximum frame rate in the Camera.js JavaScript file.
How it works
The video stream is realized with an endless series of single JPEG images.
On the server side the MediaFrameRenderer class is used to get single frames from the webcam. The frame from the camera is then converted to a compressed jpeg image.
On the client side an AJAX request gets the JPEG image from the server, displays it in the browser and than gets the next JPEG image and so on. A JPEG image has a resolution of 640Ă—480 pixels, with a higher resolution the video stream is slower.
Troubleshooting
I can't see the video stream in the browser while I debugging the app with Visual Studio?
This is the correct behavior, I decided to not get frames from the camera while you are debugging the app. The problem is that if a debugger is attached the BitmapEncoder class not disposes correctly. This results in an System.OutOfMemoryException. This means that you can only see the video stream in the browser if you not debugging the app with Visual Studio. To see the video stream in the browser deploy your app and start the app in the Windows Device Portal (e.g. http://minwinpc:8080).
Can I use HTTPS/SSL for the webserver?
Read More:Â Browser Webcam Live Stream with Windows IoT Core Raspberry 3
