This is step 1 of our tutorials to build a Windows 10 IOT Raspberry Pi with live video and Lego NXT Robot
The 5 tutorials will cover the following steps:
1) This Tutorial - Display live streaming video from a device camera with HTML 5 video to web based clients
2) Display live streaming video on a camera connected to a Lego NXT robot
3) Display live streaming video from a Raspberry Pi running Windows 10 IOT Core
4) Broadcast the live streaming video outside the local network to internet clients
5) Record live video to server
Display live streaming video from a device camera with HTML 5 video to web based clients
This is a list of what you will need to complete this tutorial...
1) PC or tablet running Windows 10
2) PC Webcam or Phone with camera - Tutorial uses both a PC webcam on a Lenovo Twist PC and phone with Chrome browser
3) Visual Studio 2015
4) Internet Information Services (IIS)
- First, open Visual Studio 2015 and create a new MVC application with authentication set to Individual accounts. We will use the authentication in a later tutorial to require a user to log in to view the live video.
- Install SignalR using the Nuget management console.
- Add html page to capture video from the PC webcam
- Under views folder, add "Cam" folder
- Under Cam folder, add html page "Index.html"
- Under Controllers folder, add class file CamController.cs with a default Index method
- In Index.html, replace html with:
<div class="jumbotron">
<h1>Cam Project</h1>
<p class="lead">Cam</p>
</div>
<div class="row">
Video
<video autoplay width="400" height="400"></video>
<canvas style="display:none;" width="400" height="400"></canvas>
<div id="divMessage">Message</div>
</div>
- Add javascript to html page to capture the video and display it on the html 5 canvas on the web page
- In Index.html, add the following script section after the html section
@section Scripts
{
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
function errorCallback(e) {
if (e.code == 1) {
alert('User denied access to their camera');
} else {
alert('getUserMedia() not supported in your browser.');
}
}
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: true }, function (stream) {
video.src = window.URL.createObjectURL(stream);
}, errorCallback);
} else {
video.src = 'somevideo.webm'; // fallback.
}
$(function () {
// Declare a proxy to reference the hub.
var camhub = $.connection.utilHub;
// Create a function that the hub can call to broadcast messages.
$.connection.hub.start().done(function () {
//1000 milliseconds in one second, 50 - 20 fps, 100 - 10 fps
var myVar = setInterval(getImage, 50);
});
function getImage()
{
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var picture = canvas.toDataURL('image/webp');
// Call the Send method on the hub.
camhub.server.getandsendvideo(picture);
}
});
</script>
}
- Add SignalR
- Under the main site folder, add a new folder "Hubs"
- Add a new SignalR Hub class file, "UtilHub.cs"
public void getandsendvideo(string imageurl)
{
Clients.All.returnvideo(imageurl);
}
- Run web page with cam
- Run the website through Visual Studio, with Chrome, then go to http://(Website URL)/Cam
- Allow the browser access to the camera when prompted for camera access
- You should now see live video playing on the html 5 canvas control of the web page
Note: I was able to get the video to play in the Microsoft Edge browser, but was not able to view the broadcast video in Edge, so I went with Chrome for this demo. I will pursue this issue with Edge at a later time.
- Run Web page for client
- Open another Chrome browser, then go to http://(Website URL)/
- You should now see the live video captured from your PC webcam from the other browser
Now, to view the live video on any device/ browser connected to your network, you have to deploy the website to a server that can broadcast the video.
- Create new website in IIS
- Create a new .Net 4.0 website called LiveCam pointing to the root folder for your website and set the port to :8011
- Determine IP of website
- Open a command prompt, type ipconfig, take note of the network ip for your PC
- Go to web page on phone and open camera video
- Open the Chrome browser on your phone, go to: http://(Website IP):8011/Cam
- Allow the browser access to the camera when prompted for camera access
- You should now see live video playing on the html 5 canvas control now from your phone
- Go to web page on client
- On your pc, open a Chrome browser and go to: http://(Website IP):8011/
- You will now see the live video from the phone camera playing in the browser
Here is the link to the Source Code
The solution is provided as is, with no warranties, and is not liable for any actions from results by the use of the code.
Our next tutorial will display the live video from the phone camera attached to the Lego NXT robot. We will then control the robot in real time with the live video through the web page.
If you would like to be notified when the next tutorial is posted, email us at info@xplorind.com
..Troy Robinson ..Xplor Industries