Detailed code for building a multi-person video chat service based on webrtc on Ubuntu
|
WebRTC, which stands for Web Real-Time Communication, is a web real-time communication technology. Simply put, it is to introduce real-time communication in the web browser, including audio and video calls. During the epidemic, I couldn't go anywhere, so I studied webrtc video live broadcast technology at home. I found some tutorials on the Internet, but none of them worked smoothly. It may be that the articles were written relatively old, some open source components used have been updated, and some configurations are no longer the same, so there will be problems following the previous steps. After a while of struggling, I finally got it running. Let me record it. A simple chat room html page This page uses simple-webrtc to implement webrtc communication. simple-webrtc is an encapsulation of several webrtc core objects, so it is relatively simple to use this.
<!DOCTYPE html>
<html>
<head>
<title>webrtc chat room</title>
<style>
video
height: 200px;
width: 200px;
border: 1px solid cornflowerblue;
border-radius: 3px;
margin: 10px;
}
</style>
</head>
<body>
<div>
roomid: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="join room">
</div>
<div>
nick name: <input id ="nickname" readonly="readonly" type = "text" value="">
</div>
<h3>
self:
</h3>
<video id="localVideo"></video>
<div id="remoteVideos">
<h3>
remote clients:
</h3>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script src="js/simplewebrtc-with-adapter.bundle.js"></script>
<script lang="javascript">
$("#nickname").val(new Date().getTime());
var qs = function (key) {
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
};
var roomid = qs("roomid");
if (roomid) {
$('#roomid').val(roomid);
}
else {
$('#roomid').val('99999');
}
// $('#roomid').val(roomid);
var smUrl = 'https://webrtc.xxx.com:8800';
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:smUrl,
nick: $('#nickname').val(),
});
webrtc.on('readyToCall', function () {
// you can name it anything
console.log('connected .');
});
webrtc.on("createdPeer", function (peer) {
console.log('createdPeer', peer, peer.nick);
if (peer.nick) {
alert('client ' + peer.nick + ' joined');
}
});
webrtc.on("joinedRoom", (roomName )=>{
console.log('joinedRoom', roomName );
alert('joined room ' + roomName );
});
webrtc.on("leftRoom", (roomName )=>{
console.log('leftRoom', roomName );
});
webrtc.on("videoAdded", (videoEl, peer )=>{
console.log('videoAdded', videoEl, peer);
if (peer.nick) {
alert('client ' + peer.nick + ' joined');
}
});
webrtc.on("videoRemoved", (videoEl, peer )=>{
console.log('videoRemoved', videoEl, peer);
});
$('#btnStart').click(function(){
var roomId = $('#roomid').val();
webrtc.joinRoom(roomId);
// alert('join room '+ roomId + ' success')
})
//$('#btnStart').click();
</script>
</body>
</html>Install nginx and deploy the chat room page Install nginx: Configure nginx:
server {
listen 80;
listen 443;
server_name webrtc.xxx.com;
location / {
index index.html;
root html/www;
}
ssl on;
ssl_certificate /ssl/xxx.crt;
ssl_certificate_key /ssl/xxx.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
}After installing nginx, deploy the above HTML page to the server using nginx. Please note that you need to use https, because Chrome is set up not to use https and cannot call the camera and microphone. Install and configure the signalmaster signaling service The signaling service is used to transmit webrtc client information between clients. Because webrtc needs relevant information of the other client when establishing a p2p connection, a channel is needed to forward information between clients. SignalMaster is a nodejs-based service that uses socket.io to implement websocket persistent connections. Install signalmaster: Configure signalmaster:
cd signalmaster
cd config
vim-development.json
//edit{
"isDev": true,
"server": {
"port": 8800,
"/* secure */": "/* whether this connects via https */",
"secure": true,
"cert": "/ssl/xxx.crt",
"key": "/ssl/xxx.key",
"password": null
},
"rooms": {
"/* maxClients */": "/* maximum number of clients per room. 0 = no limit */",
"maxClients": 0
},
"stunservers": [
{
"urls": "stun:webrtc.xxx.com:3478"
}
],
"turnservers": [
{
"urls": ["turn:webrtc.xxx.com:3478"],
"username": "abc",
"credential": "123",
"secret": "",
"expiry": 86400
}
]
}
~The main thing to note here is that you also need to configure an SSL certificate, and you can use the nginx certificate above. In addition, if trunserver has set a password, you also need to configure the correct username and password. Install and configure coturn penetration service Our clients are generally within the local area network, so intranet penetration is required when establishing a p2p connection. Use coturn to establish turnserver as the penetration service. Install coturn: # deps apt-get install -y \ emacs-nox \ build-essential \ libssl-dev sqlite3 \ libsqlite3-dev \ libevent-dev \ g++ \ libboost-dev \ libevent-dev # download wget https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz tar xvf 4.5.0.7.tar.gz # build & install cd coturn-4.5.0.7 ./configure --prefix=/opt make make install #env echo "export PATH=/opt/bin:$PATH" >> ~/.bashrc source ~/.bashrc Configure coturn:
cd coturn-4.5.0.7
vim coturn.conf
#server
listening-port=3478
listening-ip=
relay-ip=
alt-listening-port=0
external-ip=
realm=abc
# server-name={YOUR_SERVER_NAME}
no-tls
no-dtls
mobility
no-cli
verbose
fingerprint
# auth
lt-cred-mech
stale-nonce=3600
# user
# This is a demonstration. No database is configured. Use use={name}:{password} to configure # userdb=/opt/var/db/turndb
# For multiple users, write multiple lines user=abc:123The main thing to note here is the IP configuration: listening-ip = intranet ip, relay-ip = intranet ip, external-ip = external ip. If user is configured, the signaling server must also be configured with the corresponding username and password. Run all services Run the signaling service: cd signalmaster node server.js Run the penetration server: cd coturn-4.5.0.7 turnserver -c coturn.conf Just visit the static page deployed by nginx. Open two web pages and try it with yourself. It is best to ask other friends to try it. Sometimes when the penetration service is not configured properly, you can try it with yourself, but not with others.
refer to Coturn: TURN and STUN Server coturn Summarize This is the end of this article about building a webrtc-based multi-person video chat service example code on Ubuntu. For more relevant Ubuntu webrtc video chat content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Vue calculated property implementation transcript
>>: Jmeter connects to the database process diagram
Recommend
Example code for using CSS to darken the font color of the selected area when scrolling
When encapsulating the date picker, you need to d...
In-depth analysis of Vue's responsive principle and bidirectional data
Understanding object.defineProperty to achieve re...
How to use ElementUI pagination component Pagination in Vue
The use of ElementUI paging component Pagination ...
HTML data submission post_PowerNode Java Academy
The HTTP request methods specified by the HTTP/1....
Question about custom attributes of html tags
In previous development, we used the default attr...
Element Table table component multi-field (multi-column) sorting method
Table of contents need: Problems encountered: sol...
Correct modification steps for Docker's default network segment
background A colleague is working on his security...
How to quickly install Nginx in Linux
Table of contents What is nginx 1. Download the r...
Linux system file sharing samba configuration tutorial
Table of contents Uninstall and install samba Cre...
Use iframe to submit form without refreshing the page
So we introduce an embedding framework to solve th...
MySQL spatial data storage and functions
Table of contents 1. Data Type 1. What is MySQL s...
Analyze how uniapp dynamically obtains the interface domain name
background The interface domain name is not hard-...
HTML table cross-row and cross-column operations (rowspan, colspan)
Generally, the colspan attribute of the <td>...
Linux beginners in virtual machines configure IP and restart the network
For those who are new to virtual machines or have...