如何实现网页视频聊天?
在网页里实现文字聊天是比较容易的,但若要实现视频聊天,就比较麻烦了。这里,我们将实现一个简单的网页版视频聊天Demo,可以支持所有类型的浏览器。
本Demo除了视频聊天功能外,还包含以下功能:
1.上下线通知:假设所有用户都是好友,任何一个用户上线,都会出现在其他人的好友列表中,下线则会从好友列表中移除。
2.掉线后会自动进行断线重连。
3.当同名的用户登陆时,会把前面的用户挤掉。
4.所有在线用户之间进行文字聊天。
5.与在线好友进行视频聊天。
一. Demo运行效果
先来看看Demo的最终效果吧!
二. JS 实现过程
1.实现账号登录
登录界面如下:
打开视频聊天demo网页时,会出现登录界面,输入视频服务器IP、账号(使用随机生成的就可以),点击登录按钮就可以登录到视频聊天服务器。
调用ESFramework框架的RapidPassiveEngine()的initialize方法,以及OMCS框架的MultimediaManager的Initialize方法以完成登录。
登录成功后会自动进入用户主界面。
//OMCS登录$('#Singin').bind("click", function () {this.multimediaManager = MultimediaManagerFactory.GetSingleton();var id = document.getElementById("userID").value;//用户idvar posw = document.getElementById("logonPassword").value;//用户密码var serverIP = document.getElementById("serverIP").value;//ip地址// var serverPort = document.getElementById("serverPort").value;//端口try {if (this.multimediaManager.Connected() == true) {this.multimediaManager.Initialize(id, posw, serverIP, 9900); } else {alert("登录失败");console.log("多媒体webSocket还未连成功");}}catch (ex) {console.log(ex);}})//ESFramework登录$('#Singin').bind("click", function () { engine.initialize({serverIP: serverIP,//服务器IPserverPort: serverPort,//服务器端口userID: userID,//登录用户名useWss: false,logonPassword: hex_md5(logonPassword),//md5后的密码heartBeat: 5000,//心跳间隔时间(单位为ms)callBackTimeout: 5000,//回调方法超时时间(单位为ms)maxLengthOfUserID: 11,//设置用户名最大长度customizeHandler: new CustomizeHandler(),//用户自定义消息处理器loginResutCallBack: function (loginResult) {//登录结果回调方法if (loginResult.logonResult == 0) {//登录成功$("#chatBox").html("登录服务器成功");document.getElementById('loginid').innerHTML = '当前账号 '+userID;document.getElementById('login').style.display = 'none';document.getElementById('main').style.display = 'block' //esf登录engine.ContactsOutter.addEventListener(new contractsListener());//注册联系人事件engine.BasicOutter.addEventListener(new basicListener());//注册基础事件});};
2. 实现文字聊天
使用通信框架最基础的需求就是收发信息,ESFramework(WebSocket)底层已经为我们封装好了所有与信息收发相关的操作, 当RapidPassiveEngine被new出来以后,RapidPassiveEngine对象就实例化了CustomizeOutter 属性,在对象的initialize函数被调用后,即可调用CustomizeOutter 里面的相关函数来发送消息,以及实现customizeHandler后就可以处理收到的信息。
Web端可以收到来自其它客户端或服务端的信息、大数据块、以及同步调用。
(1)发送文字聊天消息
发送文字聊天信息可时通过调用CustomizeOutter中send()来进行操作,再发送前点击在线用户即可改变targetUser的值从而绑定你要发送信息的对象。
//选择聊天对象
function selectUser(userid) {var selfid = document.getElementById('userID').value;targetUser = userid;$("#chatBox").html("正在与" + userid + "对话中.....");var shows = document.getElementById('showfather').children;//console.log(shows);for (var i= 0; i < shows.length; i++) {if (shows[i].id != (userid + 'show')) {shows[i]. className='othershow'}document.getElementById(userid + 'show').className = 'shownow'}
}
发送信息时可以自定义不同的参数,从而判断出不同的消息类型。
//发送信息 $("#btn").bind("click", function () {if ($(".bottomtext").val() == "") {alert("不能发送空消息~");return;}else if (targetUser.length == 0) {alert("未选中目标用户~");return;}else {value = $(".bottomtext").val();var selfid=document.getElementById('userID').value;appendContent("自己", value,selfid);$(".bottomtext").val("");var time = [];var info = util.getbytes(value);//以下为与服务端定义的协议体var stream = new OStream(time);var bodyLen = 4 + 4 + info.length + 4;stream.writeInt32(bodyLen);stream.writeInt32(info.length);stream.write(info);stream.writeInt32(1);//发送时间 距离2016.01.01 00:00:00的总秒数engine.CustomizeOutter.send(0, stream.getBytesArray(), targetUser);}})
(2)处理文字聊天消息
当我们收到其他在线用户或者服务端发来的信息时,通过实现customizeHandler接口来获取和处理信息。
我们在用户登录时调用initialize方法时转入即可自动处理接收到的信息,接收到的信息我们通过判断信息类型来执行不同的操作。
function CustomizeHandler() {this.handleInformation = function (sourceUserID, informationType, info) {if (informationType == 0)//聊天消息{ } else if (informationType == 1)//视频消息{ } else if (informationType == 2) { } else if (informationType == 3) {}
(3)渲染显示文字聊天消息
通过appendOtherContent和appendContent函数将信息在页面中渲染出来通过传入的对象OppositeID不同将收到的信息渲染到不同的聊天窗口。并且通过selectUser来切换到发送信息的用户的窗口。
function appendContent(sendName, content, OppositeID) {Time = getTime();$("#" + OppositeID).append('<div class="selfstyle"><p class="selfname">' + sendName + ":" + Time + '</p><p>' + content + '</p></div>');$("#" + OppositeID).animate({ scrollTop: 99999 });}function appendOtherContent(sendName, content, OppositeID) {Time = getTime();selectUser(OppositeID);var showid = OppositeID + 'show'$("#" + showid).append('<div class="otherstyle"><p class="othername">' + sendName + ":" + Time + '</p><p>' + content + '</p></div>');$("#" + showid).animate({ scrollTop: 99999 });
3. 实现视频聊天
视频聊天功能可以让你与服务器上的在线用户进行视频聊天,通过OMCS服务插件来实现摄像头和麦克风的连接,所以在使用前必须打开OMCS视频服务Web插件才能正常使用。
(1)点击视频聊天后先通过CustomizeOutter 的send向对方发送消息类型为1的视频连接请求数据,同时打开视频聊天的窗口并且打开自己的摄像头和麦克风连接
(2)视频连接对象收到数据类型为1的视频连接请求后出接受视频连接的聊天框,可以选择接受或拒绝.
当视频连接对象选择接受视频聊天,则会同时连接自己和对方的摄像头麦克风;
当对方拒绝时,则关闭视频连接的请求。
选择过后将会发送一条消息类型为2的消息给视频的发起者。
(3)视频发起者收到数据为2的回复后,会进行判断对方的选择是接受还是拒绝,若是接受则开始连接对方的摄像头,拒绝则关闭自己的摄像头麦克风和视频连接窗口。
(4)当某一方关闭连接或者断开连接时会发送一条消息类型为3的消息发给另一方,收到类型为3的消息后会断开自己的摄像头和麦克风连接。
在连接过程中也可通过视频聊天窗口的控件,控制自己的摄像头麦克风的开启和关闭。
发送视频请求时间如下(接受拒绝和关闭同理)
$('#videomic').bind('click', function () { if (targetUser.length == 0) {alert("未选中视频聊天用户~");return;} else {value = 'null';console.log(value);document.getElementById('VideoMic').style.display = 'block';document.getElementById('VideoHeardTxt').innerHTML = '连接中...';document.getElementById('VideoSelf').src = 'img/video.jpg'document.getElementById('VideoOther').src = 'img/head.jpg'ConnertVideoSelf(userID, 'VideoSelf')appendContent(selfid, "我发送了视频请求");var time = [];var info = util.getbytes(value);//以下为与服务端定义的协议体var stream = new OStream(time);var bodyLen = 4 + 4 + info.length + 4;stream.writeInt32(bodyLen);stream.writeInt32(info.length);stream.write(info);stream.writeInt32(1);//发送时间 距离2016.01.01 00:00:00的总秒数var userID = document.getElementById('userID').value; engine.CustomizeOutter.send(1, null, targetUser);}})
视频麦克风连接事件如下
var microphoneConnector, dynamicCameraConnector;
var cameraArr = [];
var micArr = [];
function Connectvideo(destID, whichimg) {var a = document.getElementById(whichimg);this.dynamicCameraConnector = new DynamicCameraConnector();this.dynamicCameraConnector.ConnectEnded = connectEnded; //连接成功监听this.dynamicCameraConnector.Disconnected = disconnected; //连接关闭监听this.dynamicCameraConnector.OwnerOutputChanged = videoOutput;this.dynamicCameraConnector.SetAutoReconnect(true);this.dynamicCameraConnector.AutoReconnectSucceed = videocl;this.dynamicCameraConnector.SetViewer(a);this.dynamicCameraConnector.BeginConnect(destID);//开始摄像头的连接cameraArr.push(this.dynamicCameraConnector);this.microphoneConnector = new MicrophoneConnector();this.microphoneConnector.ConnectEnded = microphone;this.microphoneConnector.OwnerOutputChanged = micOutput;this.microphoneConnector.SetAutoReconnect(true);this.microphoneConnector.AutoReconnectSucceed = miccl;this.microphoneConnector.BeginConnect(destID);//开始麦克风的连接micArr.push(this.microphoneConnector);
}
视频聊天的几个特性:
(1)一方发起视频对话请求,对方同意后,即可开始视频对话。
(2)在对话的过程中,任何一方都可以挂断,以终止对话。
(3)在对话的过程中,任何一方掉线,都会自动终止对话。
(4)点击右下角较小视频窗口,会放大该视频显示窗口。
(5)Web版的视频聊天可以与pc版视频聊天互通。
三. 网页视频聊天Demo源码下载
1. 视频聊天Demo Web端 源码(JavaScript)
2. 视频聊天Demo 服务端+PC端 源码
当运行本Demo的 Web端时,如果尚未安装OMCS视频服务Web插件,网页会自动提示下载安装。
完成安装后,刷新网页,会提示启动插件,点击同意启动后,再次刷新网页即可进行正常登录了。Web插件以托盘形式运行,如下图所示:
如果不想自己编译服务端和PC客户端,可以直接下载我已经编译好的可直接运行的部署版本: VideoChat.Exe.rar
部署版本压缩包里的服务端可以放到公网的服务器上,双击exe即可运行。PC客户端修改VideoChat.exe.config配置文件中的IP为公网服务器的IP,即可运行PC客户端测试。
如此,PC客户端和Web端即可互通,以进行文字聊天和视频聊天。
四. 注意事项
1. 首先将服务端部署到服务器上,双击exe运行起来,然后再登录Web端和PC客户端测试。
2. 一台电脑只能运行一个Demo Web端。
3. 测试视频聊天时,两个用户最好在不同的房间,以防止声音相互干扰。
4. Web版与在线用户聊天时,聊天内容并不是保存在云端的所以用户下线后记录会被清空。
如何实现网页视频聊天?相关推荐
- 企业如何远程招聘到靠谱的程序员?--Codassium网页视频聊天工具
招聘合适的人才一直是很多企业的痛,而要招聘到靠谱的程序员更不是那么容易的一件事,特别是对于创业公司来说更是如此.你需要了解对方的气质是否契合公司的文化氛围,还要了解他有没有真实的编程能力. 如果对方没 ...
- 几行代码轻松实现网页视频聊天
网络上视频主播的火热带动了网络视频聊天室开发行业的火热.现在网上企业或者工作室在弄网页的视频聊天室.通过个人学习,借用别人的开发Demo(AnyChat SDK,网上随便搜索一下就可以下载的),加上几 ...
- 仿六间房网页视频聊天室 网页视频直播系统源码
完全和56 ,六间房一致的部署方式,无需安装插件 主播,家族,靓号,个人中心,排行榜,任务系统全支持 完备的管理后台,完备的联盟运营体系,完善的主播提成代理提成体系 可直接转播外站视频,不用耗费自己流 ...
- 仿六间房 新浪秀场网页视频聊天室 网页视频直播系统
完全和56 ,六间房一致的部署方式,无需安装插件 主播,家族,靓号,个人中心,排行榜,任务系统全支持 完备的管理后台,完备的联盟运营体系,完善的主播提成代理提成体系 可直接转播外站视频,不用耗费自己流 ...
- 类似YY 9158网页版多人语音视频聊天室远程教学系统源码
仿六间房网页视频聊天室 网页视频直播系统源码 开发采用FMS加flash只需在网页上就可发布视频直播,无需安装插件儿 主要应用远程教育,培训,远程视频直播(类似6间房聊天室) 视频采用H264压缩一路 ...
- WebRTC实现网页版多人视频聊天室
因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...
- 网页的视频聊天室开发
现在网上很多朋友在弄网页的视频聊天室 通过学习,我自己也做了个简单的小例子,几十行JavaScript脚本就能轻松实现视频通话:也不用去下载指定的什么浏览器,因为IE.firefox.chrome等w ...
- 基于webRTC的1V1在线视频聊天(网页版DEMO)
给大家分享一个基于webRTC的1V1在线视频聊天DEMO: https://webrtc.jiuhoutech.com/ DEMO效果如下: 说明: 1. 可以显示本地画面以及对方画面 2. 可以发 ...
- 实时音视频聊天中超低延迟架构的思考与技术实践
1.前言 从直播在线上抓娃娃,不断变化的是玩法的创新,始终不变的是对超低延迟的苛求.实时架构是超低延迟的基石,如何在信源编码.信道编码和实时传输整个链条来构建实时架构?在实时架构的基础之上,如果通过优 ...
- 5分钟快速打造WebRTC视频聊天转
原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...
最新文章
- 免费公开课 | 数据科学家,从入门到精进!【今晚福利】
- 【技术人员访谈数学王子】塞德里克·维拉尼的多面人生
- Dijkstra算法的思想和数学归纳法
- getjsonobject字符串解析出错_【干货分享】达梦DISQL工具使用解析之 DISQL环境变量设置...
- 一个给计算机写程序的人是谁,如果计算机是中国人发明的 写代码会是一种什么情况 程序员看了都头疼...
- ubuntu等linux系统给windows共享文件
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
- 我在51cto博客安家了!
- mybatis3源码2-查询
- 【TensorFlow-windows】(六) CNN之Alex-net的测试
- 11300001数据集配置错误_Power BI 中的数据刷新(二)
- Java基础:Map
- OAI LTE系统搭建 -- OAI EPC
- 转载python3爬虫(2)下载有固定链接的视频
- python 赚钱 知乎_2020年,小红书、知乎与B站谁能赚钱?
- 公司网站无意使用了”方正字体”,被”索赔
- 手机黑圆点怎么打_两个字中间的圆点怎么打?黑色圆点符号怎么打出来?
- 用openCV取出图片中的四边形
- 如何处理Java异常及常见异常
- Matlab_回归分析_逐步回归
热门文章
- python3官方说明文档_Python3 官方文档翻译 - 4.7 函数定义
- PS亮度蒙版插件TKActions V5 Mac版
- 公网Kamailio 代理 freeswitch 和做 sbc
- js根据出生日期计算年龄及根据年龄计算出生日期
- 为什么要做特征共线性分析
- 微信 存储目录 计算机,电脑微信文件夹保存位置
- windows 安装应用时 弹出 another installation inprogress.you must complete that installation before continu
- Vue前端技术知识整理
- 东南亚外卖平台分析报告
- IntelliJ IDEA有些快捷键无法使用的解决方式