ECE497 Project Remote Web Cam Viewer
Embedded Linux Class by Mark A. Yoder
I'm using the following template to grade. Each slot is 10 points. 0 = Missing, 5=OK, 10=Wow!
00 Executive Summary 00 Installation Instructions 00 User Instructions 00 Highlights 00 Theory of Operation 00 Work Breakdown 00 Future Work 00 Conclusions 00 Demo 00 Late Comments: I'm looking forward to seeing this. Score: 10/100
The goal of this project is to create a simple webcam based security system that allows a user to remotely view the devices web cam by navigating to a webpage. Then using buttons the user can change what camera they are viewing.
//Give two sentences telling what works. Currently we have the ability to select a camera and view the stream in a remote webpage. This view uses the VLC Plugin.
Give two sentences telling what isn't working. Currently we do not have the system switching between camera's via user inputs. We have not tested with multiple cameras.
End with a two sentence conclusion. Investigation of how to accomplish this task took up the bulk of our time and effort due to the infancy of HTML5 Related standards(sockets.io and MediaStream). We decided to utilize the vlc plugin when solving the problem with HTML5 proved unfeasible at its current level of development.
Extra Hardware Required:
- Webcam 1+ (or Playstation Eye's) Max 4 without other supplementary hardware. Best performing build currently is 2 web cams on the board. 4 makes the XM Slow down too much.
- Connected to the internet.
First Download the git Repository, it is located here:WebcamFeed
xm$ '''mkdir WebcamFeed''' xm$ '''git clone https://github.com/jtlobdell/bbWebcamFeed.git WebcamFeed''' xm$ '''cd WebcamFeed'''
xm$ '''opkg update''' xm$ '''opkg install nodejs'''
Verify gstreamer is available and up to date
xm$ '''opkg update''' xm$ '''opkg install gstreamer'''
One last thing must be done on the user computer. VLC Media Player Plugin must be available in your browser of choice. This can be done by downloading the software here: [] and making sure during installation to install the browser plugin. Many modern browsers will guide you through this if you run into a page that requires a missing plugin.
Now for reference type the following you will need it quite soon
Take note of the IP Address as you will need to enter it in your user's web browser and to align to the video feed. (This is due to the address being in the client HTML file and not able to be easily informed of its source IP Address.)
Move to the source directory xm$ cd ./WebcamFeeds/
Once the instillation is done the program can be ran
xm$ '''node WebcamFeed.js'''
Now navigate on the user computer using a web browser to your computers IP Address. Once there click on the link to the video feed page. The program will start and video should play.
NOTE: When changing video feeds the XM will randomly not load and play the feed. This we believe is due to the physical limitations of the hardware. We tested this by attaching 4 webcams to the board and found that the failure rate went up drastically. When the extra 2 webcams were removed the failure rate returned to where it was before. Since the program only ever calls one feed at a time(it changes which device it targets) this has to be a memory or hardware related issue and not due to the software.
At the top of the screen is a text box which can be entered the desired video device. Each camera is added sequentially starting at 0. Below the Set Cam button are two buttons for convenience. These function identically as entering the number's 1 or 0 into the text box and clicking Set Cam.
Here is where you brag about what your project can do.
Include a YouTube demo.
Theory of Operation
Give a high level overview of the structure of your software. Are you using GStreamer? Show a diagram of the pipeline. Are you running multiple tasks? Show what they do and how they interact.
List the major tasks in your project and who did what.
Also list here what doesn't work yet and when you think it will be finished and who is finishing it.
- GStreamer Implementation- John Lobdel investigated using GStreamer to acomplish this project. This implementation in the end proved effective and the easiest to implement.
- Program Creation- John Lobdel used his research to get gstreamer to stream a video or camera input onto port 8081 that could then be read by the VLC Media Player on a remote computer. The further integration of this into a program was done with the introduction of the VLC-plugin in an html document. The final program was jointly compiled by both John and Alex.
The program creation went quite fast after a working method was discovered by John. Then it was a matter of putting the pieces together. The program consists of a node.js client server using the example provided in the examples/node.js folder, which provides the HTML server and controls for which video to stream. We embedded the vlc viewer into the page and pointed it to the location where the video would be streamed by an external function call in the .js file. This allows for a simplified approach to running the needed utilities without having to port code into the java script language.
Adding video capture would add true security camera capabilities to this system. In addition adding motion detection into the video selection stream would be interesting. Though this might be too much for the XM's hardware.
Having a webpage that displayed all of the video feeds at once would also be an interesting feature but this could over tax the XM's hardware or internet connection.
Figuring out how to implement this project with only HTML5 and make it so that no plugin is required by the end user was Alex's original plan but the maturity of the knowledge base for HTML5 is not adequate to accomplish this task at this time. But in the future when many of the draft standards are finished this project could be implemented without the vlc-plugin.
This project was quite surprising by how difficult it is to do using the new HTML5 standards. Through the research we learned that there were currently no simple implementations of what we wished to do with this project. We had originally assumed that something as common as video streaming would have a direct implementation in the new standard but in fact it is far more restricted then we expected. By splitting each of our focuses during the research stage we were able to research the use of the bleeding edge of development and the use of the common implementation and then whoever found an implementation that worked first would allow the project to progress. In addition our parallel research gave us greater insight into the potential ways of accomplishing this task then if we had both focused on the HTML5 implementation and did not allow the project to reach a dead end as it would have if we had both focused on the HTML5 method.
In the end we did settle on using the vlc-plugin to capture the outgoing stream that John setup using gstreamer. This worked exactly as we wished it to without all of the syntax fighting that took place when trying to port the HTML5 sample code into code we had the codex's for(i.e. websocket to socket.io syntax Note: websocket wanted a Microsoft related XML file which after searching for could not be found when we tried to just use websocket).
Many of the ideas listed in Future Work would be amazing addon's to the project that would greatly expand and enhance this projects implementation.
Embedded Linux Class by Mark A. Yoder