3 minutes to achieve the Web version of multi-person text, video chat room (including full source)

Based on SIMPLEWEBRTC fast implementation of the Web version of the multi-person text, video chat room.

1 Implementation Methods

Copy the following code, save as an HTML file

<! DOCTYPE html>
Modify the inside of the nick: ' Wuhan ' for their own name, with Firefox or Chrome open, you can start testing.
2 effects
The interface is simple, the above is sending and receiving messages, the following is a local and remote video map:
3 principle
A brief introduction to the next SIMPLEWEBRTC, which is a package class library of WEBRTC.
The purpose of WEBRTC is to simplify the development effort of browser-based real-time data communication, but the practical application of programming is somewhat complex, especially when calling Rtcpeerconnection must have a deeper understanding of how to establish a connection, the process of exchanging signaling, and the details. As a result, we have developed the WEBRTC package library for us, encapsulating the call details of WEBRTC and wrapping it into a simpler API, making it easier to develop applications. Another purpose of the encapsulation Library is to block differences between different browsers, such as the API names mentioned above. Of course, these libraries are open source, can be based on their own need to change again.
Now found on the internet there are two kinds of WebRTC package library, one is Webrtc.io, the URL is https://github.com/webRTC/ Webrtc.io, there are specific instructions and usage, there are very many demo use it, and another is SIMPLEWEBRTC, the URL is Https://github.com/HenrikJoreteg/SimpleWebRTC, It seems to be easier to use than Webrtc.io.
3.1 Video Chat
This is the official first demo, three steps to create a video chat:
3.1.1 HTML page
<! DOCTYPE html>
　　
3.1.2 Creating a Web RTC Object
var webrtc = new SIMPLEWEBRTC ({  //The id/element DOM element that would hold "our" video  Localvideoel: ' Localvideo ',  //The id/element DOM element that would hold remote videos  remotevideosel: ' Remotesvideos ',  //Immediate Ly ask for camera Access  autorequestmedia:true});
　　
3.1.3 Into the room
We have to wait until it's Readywebrtc.on (' Readytocall ', function () {  //You can name it anything  Webrtc.joi Nroom (' Wuhan ');});
　　
3.2 Text Chat
This is the most basic function, but the official document is not actually introduced, very strange.
3.2.1 HTML Content
<textarea id= "Messages" rows= "5" cols= "" ></textarea><br/><input id= "text" type= "text"/> <input id= "Send" type= "button" value= "Send"/><br/>
　　
3.2.2 Send a message
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 Receiving Messages
Await messages from others  webrtc.connection.on (' message ', function (data) {      if (data.type = = = ' Chat ') {          C Onsole.log (' Chat received ', data);          $ (' #messages '). Append (' <br> ' + data.payload.nick + ':<br> ' + data.payload.message+ ' \ n ');      }  );
　　
3 minutes to achieve the Web version of multi-person text, video chat room (including full source)