├── .gitignore
├── README.md
├── app.js
├── client.html
├── css
└── style.css
├── index.html
├── js
├── camera.js
└── client.js
└── server.html
/.gitignore:
--------------------------------------------------------------------------------
1 | nbproject
2 | node_modules/
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML5-Device-Streamer
2 |
3 | This is a simple demo of streaming live video from one web browser to another in Javascript.
4 | Video is captured using the mobile phone camera using getUserMedia(), periodically frames
5 | are captured and sent via a websocket to node.js which rebroadcasts them to all connected clients.
6 | The clients then show the video by rendering each frame as an image as it arrives. The framerate is
7 | slow due to the limited processor power of phones.
8 |
9 | ## Requirements
10 |
11 | * An android phone running opera mobile with getUserMedia support - http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
12 | * A server running node.js to run the websocket server. The node module websocket-server is required.
13 | * A websocket compatible browser to watch the video
14 |
15 | ## Inspiration
16 |
17 | This quick hack was inspired by this video http://www.youtube.com/watch?v=cjmuwA8l1LQ
18 | but the author has not released the source anywhere I've found. As I had already been
19 | experimenting in the area I pretty much knew how to do it already so did it and put it here.
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var http = require('http');
2 | var fs = require('fs');
3 | var ws = require('websocket-server');
4 | var sys = require("sys");
5 | var path = require('path');
6 |
7 | //create websocket server
8 | var ws_server = ws.createServer();
9 |
10 | /**
11 | * Setup simple http server to serve static page elements on port 8000
12 | */
13 | http.createServer(function (request, response) {
14 |
15 | console.log('request starting...');
16 |
17 | var filePath = '.' + request.url;
18 | if (filePath == './')
19 | filePath = './index.html';
20 |
21 | var extname = path.extname(filePath);
22 | var contentType = 'text/html';
23 | switch (extname) {
24 | case '.js':
25 | contentType = 'text/javascript';
26 | break;
27 | case '.css':
28 | contentType = 'text/css';
29 | break;
30 | }
31 |
32 | path.exists(filePath, function(exists) {
33 |
34 | if (exists) {
35 | fs.readFile(filePath, function(error, content) {
36 | if (error) {
37 | response.writeHead(500);
38 | response.end();
39 | }
40 | else {
41 | response.writeHead(200, { 'Content-Type': contentType });
42 | response.end(content, 'utf-8');
43 | }
44 | });
45 | }
46 | else {
47 | response.writeHead(404);
48 | response.end();
49 | }
50 | });
51 |
52 | }).listen(8000);
53 |
54 |
55 |
56 | // Handle WebSocket Requests
57 | ws_server.addListener("connection", function(conn){
58 |
59 | //add listener to rebroadcast incomming messages
60 | conn.addListener("message", function(msg){
61 | console.log('message');
62 | conn.broadcast(msg);
63 | });
64 | });
65 |
66 | ws_server.addListener("error", function(){
67 | console.log(Array.prototype.join.call(arguments, ", "));
68 | });
69 |
70 |
71 | ws_server.addListener("disconnected", function(conn){
72 | ws_server.broadcast("<"+conn.id+"> disconnected");
73 | });
74 |
75 | //start websocket server on port 8001
76 | ws_server.listen(8001);
77 |
--------------------------------------------------------------------------------
/client.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | HTML5 Video Streaming - Client
4 |
5 |
6 |
7 |
8 |
HTML5 Video Streaming Demo - Client
9 |
10 |
Server requires a browser which supports getUserMedia, basically a nightly
11 | opera mobile build or a customer ericsson webkit build.