3分钟实现⽹页版多⼈⽂本、视频聊天室（含完整源码）基于SimpleWebRTC快速实现⽹页版的多⼈⽂本、视频聊天室。
1 实现⽅法
复制下⾯的代码，保存为⼀个html⽂件
<!DOCTYPE html>
<html>
<head>
<script src="code.jquery/jquery-1.9.1.js"></script>
<script src="simplewebrtc/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:'111.172.238.250:8888'
jquery源码在线nick: 'wuhan'
});
// we have to wait until it's ready
<('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: fig.nick });
$('#messages').append('<br>You:<br>' + msg + '\n');
$('#text').val('');
});
});
//For Text Chat ------------------------------------------------------------------
// Await messages from others
<('message', function (data) {
if (pe === 'chat') {
console.log('chat received', data);
$('#messages').append('<br>' + data.payload.nick + ':<br>' + ssage+ '\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名称的差异。当然，这些库都是开源的，能够依据⾃⼰的须要⼜⼀次改动。
3.1 视频聊天
这是官⽅第⼀个demo，三步创建视频聊天：
3.1.1 html页⾯
<!DOCTYPE html>
<html>
<head>
<script src="//simplewebrtc/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
<('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: fig.nick });
$('#messages').append('<br>You:<br>' + msg + '\n');
$('#text').val('');
});
3.3.3 收消息
// Await messages from others
<('message', function (data) {
if (pe === 'chat') {
console.log('chat received', data);
$('#messages').append('<br>' + data.payload.nick + ':<br>' + ssage+ '\n');      }
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。