一步一步搭建客服系统 (1) 3分钟实现网页版多人文本、视频聊天室（含完整源码)

时间 2019-11-18

标签一步搭建客服系统 3分实现网页多人文本视频聊天室完整源码栏目 HTML 繁體版

原文原文链接

基于SimpleWebRTC快速实现网页版的多人文本、视频聊天室。html

1 实现方法

复制下面的代码，保存为一个html文件jquery

 
  <!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或opera打开，便可开始测试。git

2 效果

界面简陋了点，上面是收发消息，下面是本地和远程的视频图：github

做者：疯吻IT 出处：http://fengwenit.cnblogs.comweb

3 原理

先简单介绍下SimpleWebRTC，它是WebRTC的一个封装类库。chrome

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，三步建立视频聊天：app

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 文本聊天

这个是最基本的功能，但官方文档里竟然没有介绍，很奇怪。dom

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'); 
   
        } 
   
    });

一步一步搭建客服系统 (1) 3分钟实现网页版多人文本、视频聊天室 （含完整源码)