html5可以做在线语音聊天功能吗

html-css05

html5可以做在线语音聊天功能吗,第1张

首先使用node.js 搭建一个简易的 websocket服务器:

var cons = new Array()var ws = require('ws').Servervar 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 = 0i <cons.lengthi++) {cons[i].send(data)}})ws.on('close', function () {for (var i = 0i <cons.lengthi++) {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/htmlcharset=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 wif (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 = 8888var 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/htmlcharset=utf-8" /><title></title><script src="jQuery_1.8.2.min.js"></script><script>$(function () {var host = 'localhost'var port = 8888var 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>注:希望可以帮到你!

1、实现用一个 (类索引数组 )来存储 socket 资源和对应的用户信息的方法代码。

2、实现创建服务器 socket 的方法代码如下。

3、实现服务器的主要逻辑方法代码。

4、实现服务器与客户端的交互定义 json 类型的消息格式的方法代码。

5、创建客户端方法:使用js实现事件机制来处理浏览器与服务器的交互的方法代码。

6、使用消息框 textarea 添加了一个键盘监控事件,当用户按下回车键时直接发送消息的方法代码。

给你的图片或文字加的链接!地址为:tencent://message/?uin=你的QQ号码!就可以了!

用Alt+Tab可以跳出QQ聊天界面,但是返回游戏的时候有点卡

<div style="padding:5px 0"><div style="padding:5px 0"><a target=blank             href= http://wpa.qq.com/msgrd?V=1&Uin=XXXXXXXX&Site= http://留言的网站&Menu=yes><img border="0" SRC= http://wpa.qq.com/pa?p=1:XXXXXXXX:1 alt="隐身中,随时可QQ联系"></a></div></div>请你将这段源程序代码复制出来

粘贴在你的自留地“内容”里边,其中将两处红色的XXXXXXX代换成你的QQ号码(此时表示为红色只是为了标注说明,并非程序需要),蓝色处的汉语文字你可以任意填写你想留言的,这样别人鼠标靠近你QQ控件时它会显示出这部分汉字提醒。

有个简单的版本我试了下可以用 的