凤凰彩票app 3分钟即可实现网络版的多人文本,视频聊天室(包括完整的源代码)

日期:2021-02-03 05:07:00 浏览量: 101

基于SimpleWebRTC,可以快速实现基于Web的多人文字和视频聊天室

1种实现方法

复制以下代码并将其保存为html文件




    
    
    
    


    

修改内部的昵称:“武汉”是您的名字,用Firefox或chrome打开它,就可以开始测试。

2效果

界面有点简陋,顶部是用于发送和接收消息,下面是本地和远程视频图像:

视频聊天网

3条原则

首先简要介绍SimpleWebRTC,它是WebRTC的软件包库。

WebRTC的目的是简化基于浏览器的实时数据通信的开发工作量,但是实际的应用程序编程仍然有点复杂,尤其是在调用RTCPeerConnection时,您必须对如何建立一个更深入的了解。连接和交换信令程序和详细信息。因此,一些专家为我们开发了WebRTC打包库视频聊天网亚博yabo ,该库封装了WebRTC的调用详细信息,并将其打包到一个更简单的API中,从而使开发应用程序更加容易。程序包库的另一个目的是屏蔽不同浏览器之间的差异,例如上述API名称的差异。当然yabo2020 ,这些库是开源的,可以根据需要再次更改。

当前在互联网上有两个WebRTC打包库凤凰彩票官网 ,一个是webrtc.io亚博直播 ,URL是视频聊天网亚博电竞 ,有特定的说明和用法,有很多使用它的演示;另一个是SimpleWebRTC,URL是,看起来像webrtc。 io更易于使用。

3.1个视频聊天

这是第一个官方演示。通过三个步骤创建视频聊天:

3.1.1个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内容



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('
You:
' + 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('
' + data.payload.nick + ':
' + data.payload.message+ '\n'); } });