在网页里实现文字聊天是比较容易的,但若要实现视频聊天,就比较麻烦了。这里,我们将实现一个简单的网页版视频聊天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版与在线用户聊天时,聊天内容并不是保存在云端的所以用户下线后记录会被清空。

如何实现网页视频聊天?相关推荐

  1. 企业如何远程招聘到靠谱的程序员?--Codassium网页视频聊天工具

    招聘合适的人才一直是很多企业的痛,而要招聘到靠谱的程序员更不是那么容易的一件事,特别是对于创业公司来说更是如此.你需要了解对方的气质是否契合公司的文化氛围,还要了解他有没有真实的编程能力. 如果对方没 ...

  2. 几行代码轻松实现网页视频聊天

    网络上视频主播的火热带动了网络视频聊天室开发行业的火热.现在网上企业或者工作室在弄网页的视频聊天室.通过个人学习,借用别人的开发Demo(AnyChat SDK,网上随便搜索一下就可以下载的),加上几 ...

  3. 仿六间房网页视频聊天室 网页视频直播系统源码

    完全和56 ,六间房一致的部署方式,无需安装插件 主播,家族,靓号,个人中心,排行榜,任务系统全支持 完备的管理后台,完备的联盟运营体系,完善的主播提成代理提成体系 可直接转播外站视频,不用耗费自己流 ...

  4. 仿六间房 新浪秀场网页视频聊天室 网页视频直播系统

    完全和56 ,六间房一致的部署方式,无需安装插件 主播,家族,靓号,个人中心,排行榜,任务系统全支持 完备的管理后台,完备的联盟运营体系,完善的主播提成代理提成体系 可直接转播外站视频,不用耗费自己流 ...

  5. 类似YY 9158网页版多人语音视频聊天室远程教学系统源码

    仿六间房网页视频聊天室 网页视频直播系统源码 开发采用FMS加flash只需在网页上就可发布视频直播,无需安装插件儿 主要应用远程教育,培训,远程视频直播(类似6间房聊天室) 视频采用H264压缩一路 ...

  6. WebRTC实现网页版多人视频聊天室

    因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...

  7. 网页的视频聊天室开发

    现在网上很多朋友在弄网页的视频聊天室 通过学习,我自己也做了个简单的小例子,几十行JavaScript脚本就能轻松实现视频通话:也不用去下载指定的什么浏览器,因为IE.firefox.chrome等w ...

  8. 基于webRTC的1V1在线视频聊天(网页版DEMO)

    给大家分享一个基于webRTC的1V1在线视频聊天DEMO: https://webrtc.jiuhoutech.com/ DEMO效果如下: 说明: 1. 可以显示本地画面以及对方画面 2. 可以发 ...

  9. 实时音视频聊天中超低延迟架构的思考与技术实践

    1.前言 从直播在线上抓娃娃,不断变化的是玩法的创新,始终不变的是对超低延迟的苛求.实时架构是超低延迟的基石,如何在信源编码.信道编码和实时传输整个链条来构建实时架构?在实时架构的基础之上,如果通过优 ...

  10. 5分钟快速打造WebRTC视频聊天转

    原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...

最新文章

  1. 免费公开课 | 数据科学家,从入门到精进!【今晚福利】
  2. 【技术人员访谈数学王子】塞德里克·维拉尼的多面人生
  3. Dijkstra算法的思想和数学归纳法
  4. getjsonobject字符串解析出错_【干货分享】达梦DISQL工具使用解析之 DISQL环境变量设置...
  5. 一个给计算机写程序的人是谁,如果计算机是中国人发明的 写代码会是一种什么情况 程序员看了都头疼...
  6. ubuntu等linux系统给windows共享文件
  7. mybatis入门基础(二)----原始dao的开发和mapper代理开发
  8. 我在51cto博客安家了!
  9. mybatis3源码2-查询
  10. 【TensorFlow-windows】(六) CNN之Alex-net的测试
  11. 11300001数据集配置错误_Power BI 中的数据刷新(二)
  12. Java基础:Map
  13. OAI LTE系统搭建 -- OAI EPC
  14. 转载python3爬虫(2)下载有固定链接的视频
  15. python 赚钱 知乎_2020年,小红书、知乎与B站谁能赚钱?
  16. 公司网站无意使用了”方正字体”,被”索赔
  17. 手机黑圆点怎么打_两个字中间的圆点怎么打?黑色圆点符号怎么打出来?
  18. 用openCV取出图片中的四边形
  19. 如何处理Java异常及常见异常
  20. Matlab_回归分析_逐步回归

热门文章

  1. python3官方说明文档_Python3 官方文档翻译 - 4.7 函数定义
  2. PS亮度蒙版插件TKActions V5 Mac版
  3. 公网Kamailio 代理 freeswitch 和做 sbc
  4. js根据出生日期计算年龄及根据年龄计算出生日期
  5. 为什么要做特征共线性分析
  6. 微信 存储目录 计算机,电脑微信文件夹保存位置
  7. windows 安装应用时 弹出 another installation inprogress.you must complete that installation before continu
  8. Vue前端技术知识整理
  9. 东南亚外卖平台分析报告
  10. IntelliJ IDEA有些快捷键无法使用的解决方式