如果用HTML5做一个在线视频聊天【原创】

首先使用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>