首先使用node.js 搭建一个简易的 websocket服务器：
var cons = new Array(); var ws = require('ws').Server; var server = new ws({ port: 8888 }); server.on('connection', function (ws) { console.log('new connection founded successfully'); cons.push(ws); ws.on('message', function (data) { for (var i = 0; i < cons.length; i++) { cons[i].send(data); } }); ws.on('close', function () { for (var i = 0; i < cons.length; i++) { if (cons[i] == ws) cons.splice(i, 1); } }); }); console.log('websocket-server running...');
接下来为了更容易理解， 我在这分为两个页面，一个为视频者页面，另一个是观看者页面
下面代码为视频者页面：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jQuery_1.8.2.min.js"></script> <script type="text/javascript"> $(function () { var video = document.getElementById("video"); var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); var w; if (navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia({ video: true }, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); w = new WebSocket(url); w.onopen = function () { sendImg(); } w.onmessage = function (e) { sendImg(); } }, function () { console.log("video error"); }); var host = 'localhost'; var port = 8888; var url = 'ws://' + host + ':' + port + '/'; function sendImg() { context.drawImage(video, 0, 0, 320, 320); var imgData = canvas.toDataURL(); w.send(imgData); } } }); </script> </head> <body> <video id="video" width="640" height="480" style="background:#000;" autoplay></video> <canvas style="display:none" id="canvas" width="320" height="320"></canvas> </body> </html>
接下来是观看者页面：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jQuery_1.8.2.min.js"></script> <script> $(function () { var host = 'localhost'; var port = 8888; var url = 'ws://' + host + ':' + port + '/'; var w = new WebSocket(url); w.onmessage = function (e) { $("#canvas").attr("src", e.data); } }); </script> </head> <body> <img id="canvas" width="320" height="320" /> </body> </html>
效果如下（不要看人！看效果^_^）：
