如何建立一个html5 webscoket 实时语音聊天系统

html-css07

如何建立一个html5 webscoket 实时语音聊天系统,第1张

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

var wsServer = 'ws://localhost:9999/webSocket.ashx'//基于.NET4.5服务器地址

//var wsServer = 'ws://localhost:1818'//基于.NET服务器地址

var websocket = new WebSocket(wsServer)//创建WebSocket对象

//websocket.send("hello")//向服务器发送消息

//alert(websocket.readyState)//查看websocket当前状态

websocket.onopen = function (evt) {

//已经建立连接

alert("已经建立连接")

}

websocket.onclose = function (evt) {

//已经关闭连接

alert("已经关闭连接")

}

websocket.onmessage = function (evt) {

//收到服务器消息,使用evt.data提取

evt.stopPropagation()

evt.preventDefault()

//alert(evt.data)

writeToScreen(evt.data)

//websocket.close()

}

websocket.onerror = function (evt) {

//产生异常

//alert(evt.message)

writeToScreen(evt.message)

}

function sendMsg() {

if (websocket.readyState == websocket.OPEN) {

msg = document.getElementById("msg").value

websocket.send(msg)

writeToScreen("发送成功!")

} else {

writeToScreen("连接失败!")

}

}

function writeToScreen(message) {

var pre = document.createElement("p")

pre.style.wordWrap = "break-word"

pre.innerHTML += message

output.appendChild(pre)

}

</script>

</head>

<body>

<div>

<input type="text" id="msg" value="beyond is number one!" />

<button onclick="sendMsg()">send</button>

</div>

<div id="output"></div>

</body>

</html>

H5edu实训html5开发解答

找到php的音频转换工具,基于html5开发的android和ios的app应用上实现语音聊天功能也就理论上打通了。

1. 用phonegap封装成android应用,phonegap官网上有详细介绍

2.实现js和android原生语言java的通信(google有介绍)

3.调用原生语言实现录音功能(mediaRecorder类),录音格式为 amr格式(android本身支持的语言)

4.回调js方法,把amr文件地址传给phonegap,利用phonegap读取录音文件并上传到服务器端

5.服务器端利用ffmpeg2theora 将amr转为html5支持的音频格式ogg

6.接下来读取文件,利用html5的audio 播放ogg文件。

去研究一下silverlight吧,要不就用flash,再有就是做com+(这个是以前的老方法)

目前用flash应该是不错的选择,这个语音聊天要调用用户本地资源,没有客户端(silverlight,flash都属于客户端了)支持我是搞不出来.