5890-手柄怎么用
2023年4月6日发(作者：低级格式化)
3分钟实现⽹页版多⼈⽂本、视频聊天室（含完整源码）
基于SimpleWebRTC快速实现⽹页版的多⼈⽂本、视频聊天室。
1实现⽅法
复制下⾯的代码，保存为⼀个html⽂件
修改⾥⾯的nick：‘wuhan’为⾃⼰的名字，⽤firefox或chrome打开，即可开始测试。
2效果
界⾯简陋了点，上⾯是收发消息，下⾯是本地和远程的视频图：
3原理
先简单介绍下SimpleWebRTC，它是WebRTC的⼀个封装类库。
WebRTC的⽬的是为了简化基于浏览器的实时数据通信的开发⼯作量，但实际应⽤编程还是有点复杂，尤其调⽤RTCPeerConnection必须
对怎样建⽴连接、交换信令的流程和细节有较深⼊的理解。因此有⾼⼈为我们开发了WebRTC封装库，将WebRTC的调⽤细节封装起来，
包装成更简单的API，使开发应⽤程序更简单。封装库的还有⼀个⽬的是为了屏蔽不同浏览器之间的差异，⽐如上⾯说的API名称的差异。当
然，这些库都是开源的，能够依据⾃⼰的须要⼜⼀次改动。
3.1视频聊天
这是官⽅第⼀个demo，三步创建视频聊天：
3.1.1html页⾯
3.1.2创建webRTC对象
varwebrtc=newSimpleWebRTC({
//theid/elementdomelementthatwillhold"our"video
localVideoEl:'localVideo',
//theid/elementdomelementthatwillholdremotevideos
remoteVideosEl:'remotesVideos',
//immediatelyaskforcameraaccess
autoRequestMedia:true
});
3.1.3进⼊房间
//wehavetowaituntilit'sready
('readyToCall',function(){
//youcannameitanything
om('wuhan');
});
3.2⽂本聊天
这个是最基本的功能，但官⽅⽂档⾥居然没有介绍，很奇怪。
3.2.1html内容
3.2.2发消息
//Sendachatmessage
$('#send').click(function(){
varmsg=$('#text').val();
All('chat',{message:msg,nick:});
$('#messages').append('
You:
'+msg+'n');
$('#text').val('');
});
3.3.3收消息
//Awaitmessagesfromothers
('message',function(data){
if(==='chat'){
('chatreceived',data);
$('#messages').append('
'++':
'+e+'n');
}
});
发布评论