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 17763 and the Raspberry Pi 3 Model B. Personally, I used the video stream to navigate my robot with the browser (my robot).
To develop the C# UWP App you should use a Windows 10 Client with Build 17763 or higher and Visual Studio 2019 with Universal Windows App Development Tools.
On the Raspberry Pi 3 Model B use the Raspberry Pi Windows IoT Core Build 17763 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, version 1809 (10.0; Build 17763)".
Frames per second and network trafficFrames per second an network traffic depends on the choosen video sub typ, resolution, image quality and used threads.
How it worksIn the browser, you can see the current video frame from the ELP USB webcam. 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 a WebSocket receives the JPEG image from the server, display it in the browser and than request and receive the next JPEG image and so on.
Change video resolutionType http://device
/controls
in the browser, to change resolution, video sub typ, video quality, used threads and rotation.
I need a HD video stream without image errors?
Please use a MinnowBoard Turbot Quad Core, instead of a Raspberry Pi. Set the resolution to HD720p, the video sub typ to "MJPG", the video quality to 60%, the used threads to 4 and use a webcam from ELP listed above.
If I choose video sub typ "NV12" or "MJPG" I get strange image errors?
If you use the video sub typ "NV12" or "MJPG" with the Raspberry Pi and Windows IoT Core 17763 there are image errors. Use instead the low fps video sub typ "YUY2".
Why I get an OutOfMemoryException while I debugging the app with Visual Studio?
The bug seems to be fixed in Windows IoT Core 15063. Please update Windows IoT Core. If you still have problems, please read comments.
Can I use HTTPS/SSL for the webserver?
The HttpServer in the UWP App is based on the "StreamSocketListener" class. As far as I know the "StreamSocketListener" doesn't support ssl, so the video stream is unsecure/unencrypted http and not https (everyone can see the video stream). If you want to see your video stream over the internet I recommend to make a seperat HTTPS/SSL Web Application with authentication that gets the frames from the UWP App in the local network and only the HTTPS/SSL Web Application is visible from the internet.
Can I use an other webcam?
The webcam used in this project was the only webcam I found that works with my code in Windows IoT Core 17763 and the Raspberry Pi without faulty images. The webcam is available with different objectives. When buying the webcam, be sure that it´s the model "USBFHD05MT" or "USBFHD01M". Only this camera with the webcam stream of subtype "YUY2" delivers faulty-free images with Windows IoT Core 17763 and the Raspberry Pi with my code.
Alternatively you can buy the new MinnowBoard Turbot Quad Core. It has no image errors and has a very good performance (at least with the ELP webcams listed above).
Why can't I see the video stream in the browser if I run the UWP App on my Windows 10 pc?
You can't view the video stream in the browser at the same device the UWP App is running. For example: If you run the UWP App on your local pc you can't show the video in the browser of your local pc where the UWP App is running, but on all other devices it works.
What for browsers are supported?
Only most modern browsers are supported to stream the video. In the current version of IE Edge there is a layout issue in fullscreen mode if the window width is around 1000 pixels.
Is the very high CPU usage a problem?
I don't know, I use the video stream only in my robots (they run only a few hours). Maybe the Raspberry Pi gets too hot, if the CPU is permanently at 100% usage. You can add a CPU heat sink and a fan.
Comments