如何用HTML5做一个在线视频聊天

最新推荐文章于 2024-08-01 16:52:20 发布

weixin_30363981

最新推荐文章于 2024-08-01 16:52:20 发布

阅读量1.7k

点赞数

文章标签：网络 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/xiaqiuchu/articles/11370589.html

版权

注意，使用前请先安装ws模块

npm install ws

转自：https://www.cnblogs.com/xiaodoublog/p/4598494.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="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>