3分钟实现网页版多人文本视频聊天室 （含完整源码)
Posted 狼来了
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3分钟实现网页版多人文本视频聊天室 （含完整源码)相关的知识，希望对你有一定的参考价值。
基于SimpleWebRTC快速实现网页版的多人文本、视频聊天室。
1 实现方法
复制下面的代码，保存为一个html文件
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://simplewebrtc.com/latest.js"></script>
<script>
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: \'localVideo\',
// the id/element dom element that will hold remote videos
remoteVideosEl: \'remoteVideos\',
// immediately ask for camera access
autoRequestMedia: true,
//url:\'http://111.172.238.250:8888\'
nick: \'wuhan\'
});
// we have to wait until it\'s ready
webrtc.on(\'readyToCall\', function () {
// you can name it anything
webrtc.joinRoom(\'room1\');
// Send a chat message
$(\'#send\').click(function () {
var msg = $(\'#text\').val();
webrtc.sendToAll(\'chat\', { message: msg, nick: webrtc.config.nick });
$(\'#messages\').append(\'<br>You:<br>\' + msg + \'\\n\');
$(\'#text\').val(\'\');
});
});
//For Text Chat ------------------------------------------------------------------
// Await messages from others
webrtc.connection.on(\'message\', function (data) {
if (data.type === \'chat\') {
console.log(\'chat received\', data);
$(\'#messages\').append(\'<br>\' + data.payload.nick + \':<br>\' + data.payload.message+ \'\\n\');
}
});
</script>
<style>
#remoteVideos video {
height: 150px;
}
#localVideo {
height: 150px;
}
</style>
</head>
<body>
<textarea id="messages" rows="5" cols="20"></textarea><br />
<input id="text" type="text" />
<input id="send" type="button" value="send" /><br />
<video id="localVideo"></video>
<div id="remoteVideos"></div>
</body>
</html>
修改里面的nick：‘wuhan’为自己的名字，用firefox或chrome打开，即可开始测试。
2 效果
界面简陋了点，上面是收发消息，下面是本地和远程的视频图：
3 原理
先简单介绍下SimpleWebRTC，它是WebRTC的一个封装类库。
WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量，但实际应用编程还是有点复杂，尤其调用RTCPeerConnection必须对怎样建立连接、交换信令的流程和细节有较深入的理解。因此有高人为我们开发了WebRTC封装库，将WebRTC的调用细节封装起来，包装成更简单的API，使开发应用程序更简单。封装库的还有一个目的是为了屏蔽不同浏览器之间的差异，比如上面说的API名称的差异。当然，这些库都是开源的，能够依据自己的须要又一次改动。
眼下网上找到的有两种WebRTC封装库，一个是webrtc.io，网址是https://github.com/webRTC/webRTC.io，上面有具体说明和用法，有非常多demo使用它；还有一个是SimpleWebRTC，网址是https://github.com/HenrikJoreteg/SimpleWebRTC，貌似比webrtc.io用起来更简单。
3.1 视频聊天
这是官方第一个demo，三步创建视频聊天：
3.1.1 html页面
<!DOCTYPE html>
<html>
<head>
<script src="//simplewebrtc.com/latest.js"></script>
</head>
<body>
<video height="300" id="localVideo"></video>
<div id="remotesVideos"></div>
</body>
</html>
3.1.2 创建web RTC对象
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: \'localVideo\',
// the id/element dom element that will hold remote videos
remoteVideosEl: \'remotesVideos\',
// immediately ask for camera access
autoRequestMedia: true
});
3.1.3 进入房间
// we have to wait until it\'s ready
webrtc.on(\'readyToCall\', function () {
// you can name it anything
webrtc.joinRoom(\'wuhan\');
});
3.2 文本聊天
这个是最基本的功能，但官方文档里居然没有介绍，很奇怪。
3.2.1 html内容
<textarea id="messages" rows="5" cols="20"></textarea><br /> <input id="text" type="text" /> <input id="send" type="button" value="send" /><br />
3.2.2 发消息
// Send a chat message
$(\'#send\').click(function () {
var msg = $(\'#text\').val();
webrtc.sendToAll(\'chat\', { message: msg, nick: webrtc.config.nick });
$(\'#messages\').append(\'<br>You:<br>\' + msg + \'\\n\');
$(\'#text\').val(\'\');
});
3.3.3 收消息
// Await messages from others
webrtc.connection.on(\'message\', function (data) {
if (data.type === \'chat\') {
console.log(\'chat received\', data);
$(\'#messages\').append(\'<br>\' + data.payload.nick + \':<br>\' + data.payload.message+ \'\\n\');
}
});
以上是关于3分钟实现网页版多人文本视频聊天室 （含完整源码)的主要内容，如果未能解决你的问题，请参考以下文章
游戏开发实战Unity从零开发多人视频聊天功能，无聊了就和自己视频聊天（附源码 | Mirror | 多人视频 | 详细教程）
游戏开发实战Unity从零开发多人视频聊天功能，无聊了就和自己视频聊天（附源码 | Mirror | 多人视频 | 详细教程）