做一个在线视频聊天"/>
如何用HTML5做一个在线视频聊天
注意，使用前请先安装ws模块
npm install ws
转自：.html
首先使用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=""> <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=""> <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> 效果如下（不要看人！看效果^_^）：
转载于:.html
更多推荐
如何用HTML5做一个在线视频聊天
发布评论