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

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>注:希望可以帮到你!

你是打算自己研发能在H5在线实时语音聊天功能的产品吗?这个大可不必,首先,技术要过硬,其次耗费时间长。如果是公司要用的话,建议直接和第三方服‏务商合‏作,比如 即构科‏技。他们的实时语音SDK支持双人至百万人语音通话,适合语音交友、游戏开黑、VOIP电话、网络电台和呼叫中心等场景,很好用的。

找到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文件。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6248613.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存