Speaking of Bixin source code, why not talk about Bixin source code to realize the chat room function?

Speaking of Bixin source code, why not talk about Bixin source code to realize the chat room function?
Bixin source code is the abbreviation of "Bixin accompany play source code". In Bixin source code, the chat room function is a very important module. It can promote user circulation and accelerate social interaction. This article will talk about how to realize Bixin accompany play source code. The chat room function module in , the software and implementation effects to be used in this article:
1. Based on: SimpleWebRTC
2. Client: web version
3. Effect: multi-person chat room, which can realize video and text

1. How to implement the "chat room" of Bixin source code
Save the following code as an html file

<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>

How to test - modify nick: 'wuhan' as your own name, open with firefox or chrome
  
Second, what effect can be achieved

The focus of the "chat room" of Bixin source code is to send and receive messages and remote video and video. The implementation of the method in this article may still need to be optimized in effect.

3. The development principle of Bixin source code
1. What is SimpleWebRTC?
SimpleWebRTC is an encapsulation class library of WebRTC. The purpose of WebRTC is to simplify the development workload of browser-based real-time data communication, but the actual application programming is still a bit complicated. The details have a deeper understanding.
2. Easier way to use
Therefore, some experts have developed a WebRTC packaging library, which encapsulates the calling details of WebRTC into a simpler API, making it easier to develop applications. Another purpose of encapsulating the library is to shield the differences between different browsers, such as the difference in API names mentioned above. Of course, these libraries are all open source and can be changed again according to your needs.
3. How to get
There are two WebRTC packaging libraries found on the Internet, one is webrtc.io, which is used by many demo s; the other is SimpleWebRTC, which is easier to use than webrtc.io.

Fourth, compare the source code and video chat
Create a video chat in three steps:
1. html page

<html>
    <head>
        <script src="//simplewebrtc.com/latest.js"></script>
    </head>
    <body>
        <video height="300" id="localVideo"></video>
        <div id="remotesVideos"></div>
    </body>
</html>

2. Create a web RTC object

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. Enter the room

	// we have to wait until it's ready
webrtc.on('readyToCall', function () {
  // you can name it anything
  webrtc.joinRoom('wuhan');
});
  

4. html content

	<textarea id="messages" rows="5" cols="20"></textarea><br />
<input id="text" type="text" />
<input id="send" type="button" value="send" /><br />

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

6. Receive messages

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

After the above work is completed, Bixin source code basically realizes the video and chat on the web page. This article is reprinted from the blog garden netizen's article "The Wolf is Coming". Cloud Leopard Technology only reprints and organizes it. For the original link, see the "Copyright" module.

Tags: stream

Posted by Serpent7 on Sat, 21 May 2022 13:43:52 +0300