一步一步搭建客服系統 (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'); 
   
        } 
   
    });