DEV Community: Jefferson Xavier

Custom Authentication With Kong

Jefferson Xavier — Thu, 25 Aug 2022 02:08:00 +0000

The Kong Gateway

The Kong Gateway is an API Gateway to manage, configure and route requests to multiple APIs.

It's used to release a single address to access multiple APIs at the same time.

Objectives

This post presents a step by step to create a plugin with authentication using an external service. This solution is used when exists multiple services managed by Kong that extends the same authorization method.

The Original Problem

In our original problem the front-end needs to know how the addresses of all services to execute requests, and both services needs request the external authentication service to validate the authorization token.

Adding Kong

Now, the front-end knows just kong address and kong register all services to release requests. However, all services still require the external authentication service.

The Solution

Our solution, implements a Kong Plugin to validate the authentication in external service and just at success case the request to services is released.

Plugin Development

It's possible add some logics to execute during the Kong requests lifecycle. To do this, we add plugins with different purposes. In our case, we created a plugin named cutom-auth to request the external auth request and validate the authentication before requesting services.

The plugin structure contains two files developed in lua:

schema.lua: This file is used to define the plugin configurations. In our case we defined the external auth request URL and the paths to ignore authentication.
handler.lua: The core file to execute the plugin logic. Here is the request to external auth to validate authentication.

Bellow we can see the code of this two files:

schema.lua



local typedefs = require "kong.db.schema.typedefs"

return {

  name = "custom-auth",

  fields = {

    { protocols = typedefs.protocols_http },

    { consumer = typedefs.no_consumer },

    { config = {

      type = "record",

      fields = {

        { url = typedefs.url({ required = true }) },

        {

          public_paths = {

            type = "array",

            default = {},

            required = false,

            elements = { type = "string" },

          }

        },

      },

    }, },

  },

}

handler.lua



local http = require "resty.http"

local ngx = require "ngx"

local cjson = require "cjson"

local ExternalAuthHandler = {

  VERSION = "1.0",

  PRIORITY = 1000,

}

function ExternalAuthHandler:access(conf)

  local path = kong.request.get_path()

  local publicPaths = conf.public_paths;

for i, pub_path in ipairs(publicPaths) do

    if pub_path == path then

      return

    end

  end

local client = http.new()

kong.log("Validating Authentication: ", conf.url)

  local res, err = client:request_uri(conf.url, {

    ssl_verify = false,

    headers = {

      Authorization = kong.request.get_header("Authorization"),

    }

  })

if not res then

    kong.log.err("Invalid Authentication Response: ", err)

    return kong.response.exit(500)

  end

if res.status ~= 200 then

    kong.log.err("Invalid Authentication Response Status: ", res.status)

    return kong.response.exit(401)

  end

local json = cjson.encode(res.body)

  local user_info = cjson.decode(json)

  kong.service.request.set_header("X-UserInfo", ngx.encode_base64(user_info))

end

return ExternalAuthHandler

Explanation

In schema.lua we defined two params:

url: Used to set the external auth url to validate authentication. In our case, this request validates the authentication and returns the current user.
public_paths: Used to set the service public paths. The paths mapped here will not require authentication validation.

In handler.lua have some steps. The access method is the entry point to Kong execute this plugin in lifecycle.

The first operation is execute a GET in URL defined to validate the authentication. In case the request returns an error or an invalid status the Kong will be exit with status 500 or 401.

In case of success the X-UserInfo header will be added to the request with the current user data mapped in a base64 string. The services can be use this header to validate authorization or get user data if necessary.

Conclusion

With this plugin the Kong can validate authentication before requesting services and the structure of the diagram solution is finished.

We validated the use of this plugin in I9Partner Company using Kong and multiple internal services.

Here is an example of this plugin usage mapped in Konga.

You can follow the repository to this project here.

Reference

Authors

Jefferson Xavier
Thyaki Takuno

A I9Partner initiative.

Connecting MetaMask with a Private Blockchain

Jefferson Xavier — Fri, 18 Mar 2022 14:25:37 +0000

This post is the second in a series of posts that demonstrate how to create your own Private Blockchain. The previous post shows the step by step to create the private ethereum blockchain, we will connect to that blockchain using the MetaMask.

Below you can see the current structure of the private blockchain built:

You can read the previous post here.

MetaMask

The MetaMask is a crypto wallet to Ethereum. Can be used to start and manage private wallets to users in blockchain network. By default is set to the Ethereum Mainnet, but can be used to any others blockchains based on Ethereum.

Get Start

Follow the next steps to finish this tutorial:

Install MetaMask and create an account
Add My Blockchain network
Import the miner account created using Geth
Transfer funds between accounts

Install MetaMask and Create the First Account

The MetaMask can be installed like an extension to most popular browsers or a mobile app. In this post, we will use MetaMask like a extension in Brave. This process is similar for other browsers like Chrome or Firefox.

Go to download page and click at "Install Metamask For BROWSER_NAME". Follow the installation steps until finish.

A similar window should be open at the end of installation:

Click at "Get Started" to initialize MetaMask. In next step you can import or create a new wallet. Let's create a new one.

Define the MetaMask password and keep account recovery words in a safe place. Without your private key or that words it's impossible recover your blockchain account.

After that, you should see the inital MetaMask screen with your account created like this:

The account was created on the main ethereum network as shown in the upper right corner of the screen: Ethereum Mainnet.

Add My Blockchain Network

Let's add our Blockchain Network to MetaMask. Click on Ethereum Mainnet and select Add New Network option.

Define values to My Blockchain and click o Save button.

Network Name: My Blockchain
New RPC URL: http://127.0.0.1:8545
Chain ID: 1234
Currency Symbol: MYBL

Explanation:

Network Name: Any string to reference your blockchain name.
New RPC URL: The HTTP Server URL. In our the HTTP Server is running on Node1 in default port 8545.
Chain ID: The chainId defined in genesis block.
Currency Symbol: A symbol to reference the coin in your blockchain. If you not define it, the default value is ETH.

All Done!! Your blockchain network has been added and you should be see your account created in this network without balance.

Import Account

In previous post we create an account using Geth and we did the mining of some blocks with that account. Let's import that account to MetaMask to see balance and transfer funds to account created in this post.

Select "Import Account" option in MetaMask, choose "Select Type" as JSON File, choose account json file in your blockchain, type the password and click on "Import" button.

The account json file can be found in database of the Node1 in your blockchain, the path to this file contains the account address, something like this:

node1/keystore/UTC--2022-03-17T20-40-36.929865867Z--bd3156b239e2bb8d073406e67eba59a651be18f0

All Done! The account has been imported to MetaMask. You can see that account in inital page selecting the Account 2.

Transfer Funds

Let's transfer some value from Account 2 to Account 1 to validate the structure and finish this post.

First, go to Account 1 in MetaMask and copy the Account Public Address and back to Account 2. In my case the public address of the Account 1 is:

0xE4f4206F11C249aeCfE5AD8a4DDcfae60343d746.

In Account 2 click on "Send" button, paste the public address of the Account 1 and type the value to transfer. Click on "Next" button and then click on "Confirm" button.

The transaction will be with status "Pending", waiting for a block to be mined for validation.

Now, it's necessary start the mining to validate that transaction. Let's do this in our blockchain using Geth in Javascript Console from Node1. Type the command:

miner.start()

Waiting some seconds and verify your account in MetaMask again.

Obs: If you want, you can stop the mining in Node1 after the transaction validation. Type command to stop the mining:

miner.stop()

All Done!. The transaction was validated and the Account 1 received the 100 MYBL.

Blockchain Structure

Next Steps

You can create new accounts to your blockchain using MetaMask or Geth to increment your tests. Do more transactions, using other accounts to execute mining in Node1 or Node2. That's it.

References

Go Ethereum
MetaMask

Create your own private blockchain using Ethereum

Jefferson Xavier — Thu, 17 Mar 2022 21:04:50 +0000

In this post we will build a Ethereum Private Blockchain with multiple nodes using Geth.

The Ethereum private blockchain is a blockchain like ethereum, but the network used is not the Ethereum Main. When you use a private network all blockchain is totally apart from the Ethereum blockchain, it's possible change the configurations like mining difficult, access and other aspects.

At the end you will have your own Private Blockain executing in EVM (Ethereum Virtual Machine) with all the Ethereum features like transactions, smart contracts and others available in this network.

Get Start

Follow the next steps to build your Private Blockchain.

Install Geth
Define Genesis Block
Start the first blockchain node
Start the second blockchain node
Create the peer-to-peer connection
Mining Blocks and Create Transactions

Installing Geth (Go Ethereum)

Geth is a CLI with some resources to connect you to Ethereum network. It will be used to start our private network in local environment.

To install Geth in Ubuntu/Debian follow the following steps:



sudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install ethereum

You can see installation to other platforms here.

Check if geth was installed successfully with the following command.

geth -h

This shows all available commands using geth.

The Genesis Block

All blockchains start with the genesis block. This block define the initial configuration to a blockchain. The configuration to genesis block is defined in genesis.json file.

So, let's create a folder to start the private network and create the genesis.json file.



mkdir my-blockchain
cd my-blockchain
touch genesis.json

Add the following content to genesis.json file:



{
  "config": {
    "chainId": 1234,
    "homesteadBlock": 0,
    "eip150Block": 0,
    "eip155Block": 0,
    "eip158Block": 0,
    "byzantiumBlock": 0,
    "constantinopleBlock": 0,
    "petersburgBlock": 0,
    "ethash": {}
  },
  "difficulty": "4",
  "gasLimit": "8000000",
  "alloc": {}
}

Explanation:

chainId: An integer greater than zero that defines a unique id for your private network. The main network has ID 1. If you supply your own custom network ID which is different than the main network, your nodes will not connect to other nodes and form a private network.. You can find a community-run registry of Ethereum networks at https://chainid.network.
homesteadBlock: Homestead is the first official stable version of the Ethereum protocol. If you plan to use this release, the attribute should be set to 0.
difficulty: Determines the difficulty of generating blocks.
gasLimit: Indicates the current network-wide gas consumption limit per unit. Gas is the fuel that is used to pay transaction fees on the Ethereum network.
alloc: Is used to start some accounts with positive balance in the network. At this case we not defined any account.
The other attributes refer to the protocols and attributes that will be used on the network, we set the default values for the ethereum network.

Start Database (The Bootnode)

The bootnode is the first node created when the blockchain is started. To start the database to first node execute:

geth init --datadir node1 genesis.json

The folder node1 will be created with the database to bootnode.

The terminal result must be something like this:

The directory result should be something like this:

Start Node

geth --datadir node1 --networkid 1234 --http --allow-insecure-unlock --nodiscover

This command will be start the node in private network with id 1234. The flag --http is used to enable Web App Access, we will use this in next post to connect Metamask with that private network. The flag --allow-insecure-unlock is used to permit execute transfers without a web application, we will use this in tests to this network. The flag --nodiscover is used to prevent node from trying to connect to others automatically.

The terminal result must be something like this:

Done!! The blockchain in the private network is running. Let's go do some tests to verify this. Open other terminal window in the same folder my-blockchain and execute the following command:

geth attach node1/geth.ipc

This open a interactive javascript terminal to execute some tasks to this node. The terminal result should be something like this:

To see node informations execute the following command in this javascript terminal opened:

admin.nodeInfo

This command show all informations about this node, and you can verify the node is active. Keep this window open for some more tests ahead.

Adding member peers

Let's start the second node to our blockchain. To do this execute the following commands:



geth init --datadir node2 genesis.json
geth --datadir node2 --networkid 1234 --port 30304

The commands are very similar to the previous ones with some minor differences:

The folder to database in this case is node2.
The flags --http and --allow-insecure-unlock are not necessary.
The flag --port it's necessary to differentiate this node from the previous one. The first node is running on default port 30303.

Open a new javascript terminal to second node created and verify the informations executing:



geth attach node2/geth.ipc
admin.nodeInfo

The result should be something like this:

Connecting Peers

Now, let's create the peer-to-peer connection between the two nodes in blockchain.

Copy the enode from the nodeInfo of the second node, then execute the following command in javascript terminal of the first node:



admin.addPeer("enode://431fa50a676b35dd750a68656cf8a822edb2c083ddf2359b6c246216dfbef0f1dad517b53b9ba0a35f4d2f1d44274ae4fc4b2bdf69e774af892b097d082eff1c@127.0.0.1:30304?discport=0")

And to see all peers connected execute to both nodes the following command:



admin.peers

Any node must be have one peer connected.

Note the 30304 port referencing the second node in network. The result should be something like this:

Done!! Your blockchain is created with multiple nodes runing and connected. Let's create accounts and start mining to see data updated in both nodes.

Mining

To mine blocks it's necessary have a base account. Let's do this. In javascript terminal of the first node execute the command to create a new account and define the password required to this account, the public address from created account should be presented.



personal.newAccount()

You can see account balance executing:



eth.getBalance("0xbd3156b239e2bb8d073406e67eba59a651be18f0")

Now, you can start the mining in the first node. Before that run the command to see the current height of the blocks, must be 0, because no blocks have been mined yet:



eth.blockNumber

Start the mining, and stop after some seconds to see updated block.



miner.start() // Start Mining
miner.stop() // Stop Mining

Now Verify again the blockNumber and balance of account created. Some blocks must have been created and values must have been earned as a reward.

You can verify the blockNumber also in javascript terminal of the second node after some seconds, the value must be the same presented in the first node. This means that in fact the nodes are connected and are updated.

Blockchain Structure

Next Steps

You can try execute other commands to more specif tests in both nodes. See all Geth CLI options here. Explore the Geth Documentation.

Go to the next post to continue and MetaMask to your blockchain private network and execute some transactions.

Reference

Geth Documentation
Ethereum

WebRTC - A Simple Video Chat With JavaScript (Part 2)

Jefferson Xavier — Thu, 26 Nov 2020 13:23:19 +0000

This post is a second part of the WebRTC implementation to a Video Chat. The previous post we presented the implementation for a video conversation, in this part we will present the implementation of chat.

If you didn't see the previous post click here.

The RTCDataChannel

The RTCDataChannel is a interface from WebRTC resources that provides a channel which can be used for bidirectional peer-to-peer transfers of arbitrary data. The channels are associated with RTCPeerConnection.

We will use the RTCDataChannel to send text messages between connected users.

Creating de RTCDataChannel

The first step is create a channel using the createDataChannel. Whoever initiates the RTCPeerConnection should be also initiate the RTCDataChannel, in our case the RTCDataChannel is initiate when the Local Connection are initiate.

The complete start RTCPeerConnection stayed like this:

// Start a RTCPeerConnection to each client
socket.on('other-users', (otherUsers) => {
    // Ignore when not exists other users connected
    if (!otherUsers || !otherUsers.length) return;

    const socketId = otherUsers[0];

    // Ininit peer connection
    localConnection = new RTCPeerConnection();

    // Add all tracks from stream to peer connection
    stream.getTracks().forEach(track => localConnection.addTrack(track, stream));

    // Send Candidtates to establish a channel communication to send stream and data
    localConnection.onicecandidate = ({ candidate }) => {
      candidate && socket.emit('candidate', socketId, candidate);
    };

    // Receive stream from remote client and add to remote video area
    localConnection.ontrack = ({ streams: [ stream ] }) => {
      remoteVideo.srcObject = stream;
    };

    // Start the channel to chat
    localChannel = localConnection.createDataChannel('chat_channel');

    // Function Called When Receive Message in Channel
    localChannel.onmessage = (event) => console.log(`Receive: ${event.data}`);
    // Function Called When Channel is Opened
    localChannel.onopen = (event) => console.log(`Channel Changed: ${event.type}`);
    // Function Called When Channel is Closed
    localChannel.onclose = (event) => console.log(`Channel Changed: ${event.type}`);

    // Create Offer, Set Local Description and Send Offer to other users connected
    localConnection
      .createOffer()
      .then(offer => localConnection.setLocalDescription(offer))
      .then(() => {
        socket.emit('offer', socketId, localConnection.localDescription);
      });
  });

Focus on the new lines to create the RTCDataChannel:

// Start the channel to chat
localChannel = localConnection.createDataChannel('chat_channel');

// Function Called When Receive Message in Channel
localChannel.onmessage = (event) => console.log(`Receive: ${event.data}`);
// Function Called When Channel is Opened
localChannel.onopen = (event) => console.log(`Channel Changed: ${event.type}`);
// Function Called When Channel is Closed
localChannel.onclose = (event) => console.log(`Channel Changed: ${event.type}`);

We also declare as variables localChannel and remoteChannel at then start of the initConnection function to store the created channels.

After that, a RTCDataChannel is received to the Remote Connection through the ondatachannel function. The complete code to Remote Connection stayed like this:

// Receive Offer From Other Client
socket.on('offer', (socketId, description) => {
    // Ininit peer connection
    remoteConnection = new RTCPeerConnection();

    // Add all tracks from stream to peer connection
    stream.getTracks().forEach(track => remoteConnection.addTrack(track, stream));

    // Send Candidtates to establish a channel communication to send stream and data
    remoteConnection.onicecandidate = ({ candidate }) => {
      candidate && socket.emit('candidate', socketId, candidate);
    };

    // Receive stream from remote client and add to remote video area
    remoteConnection.ontrack = ({ streams: [ stream ] }) => {
      remoteVideo.srcObject = stream;
    };

    // Chanel Received
    remoteConnection.ondatachannel = ({ channel }) => {
      // Store Channel
      remoteChannel = channel;

      // Function Called When Receive Message in Channel
      remoteChannel.onmessage = (event) => console.log(`Receive: ${event.data}`);
      // Function Called When Channel is Opened
      remoteChannel.onopen = (event) => console.log(`Channel Changed: ${event.type}`);
      // Function Called When Channel is Closed
      remoteChannel.onclose = (event) => console.log(`Channel Changed: ${event.type}`);
    }

    // Set Local And Remote description and create answer
    remoteConnection
      .setRemoteDescription(description)
      .then(() => remoteConnection.createAnswer())
      .then(answer => remoteConnection.setLocalDescription(answer))
      .then(() => {
        socket.emit('answer', socketId, remoteConnection.localDescription);
      });
  });

Focus on the new lines to receive the RTCDataChannel:

// Chanel Received
remoteConnection.ondatachannel = ({ channel }) => {
      // Store Channel
      remoteChannel = channel;

      // Function Called When Receive Message in Channel
      remoteChannel.onmessage = (event) => console.log(`Receive: ${event.data}`);
      // Function Called When Channel is Opened
      remoteChannel.onopen = (event) => console.log(`Channel Changed: ${event.type}`);
      // Function Called When Channel is Closed
      remoteChannel.onclose = (event) => console.log(`Channel Changed: ${event.type}`);
    }

Log Message

In the previous post we created a div to present the chat messsages. We will use this area to log all messages received and sended.

First, create the logMessage function like this:

const logMessage = (message) => {
  const newMessage = document.createElement('div');
  newMessage.innerText = message;
  messagesEl.appendChild(newMessage);
};

After, change the channel functions changing the console.log functions to logMessage function, like this:

// Function Called When Receive Message in Channel
localChannel.onmessage = (event) => logMessage(`Receive: ${event.data}`);
    // Function Called When Channel is Opened
    localChannel.onopen = (event) => logMessage(`Channel Changed: ${event.type}`);
    // Function Called When Channel is Closed
    localChannel.onclose = (event) => logMessage(`Channel Changed: ${event.type}`);

Make same to remoteChannel.

Finally, we created a function for the click of the send button that will send the messages.

// Map the 'message-button' click
sendButton.addEventListener('click', () => {
    // GET message from input
    const message = messageInput.value;
    // Clean input
    messageInput.value = '';
    // Log Message Like Sended
    logMessage(`Send: ${message}`);

    // GET the channel (can be local or remote)
    const channel = localChannel || remoteChannel;
// Send message. The other client will receive this message in 'onmessage' function from channel
    channel.send(message);
  });

The final result is something like this:

Reference

WebRTC API

WebRTC in real world

Next Steps

You can see all code in GitHub

Thanks for your reading. Please, leave your comment with your contribution.

WebRTC - A Simple Video Chat With JavaScript (Part 1)

Jefferson Xavier — Wed, 11 Nov 2020 16:07:24 +0000

The WebRTC (Web Real-Time Communications) is a technology with a set of features that allow an user get audio/video medias and transmit this information at a peer to peer communication. It's also possible send any data like text or files with this connection.

This post provides a tutorial to implement a simple video sharing and whit chat without use any libraries or plugins beyond of resources from WebRTC.

Project Structure

This project consist of a server that works like an access point to clients start a web communication. WebSocket is used so that clients can know each other.

The client is a simple HTML to get a Video/Audio Stream and a input to send chat messages. The WebRTC communication is implemented in a Javascript file imported by this HTML.

The WebRTC Resources

MediaStream: Represents a stream of media content with tracks to audio and video. You can get a MediaStream object using the navigator.mediaDevices.getUserMedia() function.
RTCPeerConnection: Represents a connection between two peers. It's used to send the stream between clients.
RTCDataChannel: Represents a bidirectional data channel between two pairs of a connection. It's used to send chat messages between clients.

Show me the code

Let's start with the server code. First we go start a NodeJS project.



yarn init -y

Install the necessary dependencies. Express to create a server and socket.io to enables the WebSocket communication.



yarn add express socket.io

Create server.js to start our server and put the follow code:



const express = require('express');
const socketio = require('socket.io');
const cors = require('cors');
const http = require('http');

// Create server
const app = express();
const server = http.Server(app);

// Enable Cors to Socket IO
app.use(cors());

// Init Socket IO Server
const io = socketio(server);

// Called whend a client start a socket connection
io.on('connection', (socket) => {

});

// Start server in port 3000 or the port passed at "PORT" env variable
server.listen(process.env.PORT || 3000,
  () => console.log('Server Listen On: *:', process.env.PORT || 3000));

The initial project structure should be something like:

The WebSocket Structure

The objective of websocket is make the client knows each other no WebRTC connection.

The WebRTC connection is established in some steps describe bellow. All this steps are explained in client implementation section.

Create a RTCPeerConnection Instance;
Create a Offer to connection;
Send a Answer to offer request;
Signaling between clients.

So, to implement this it's necessary add some events to socket.

The first step is send to myself the others users connected to start the RTCPeerConnection with each them. After that, we have events to establish the connection with all steps describe above.

Below we have the complete code to this implementation.



// Array to map all clients connected in socket
let connectedUsers = [];

// Called whend a client start a socket connection
io.on('connection', (socket) => {
  // It's necessary to socket knows all clients connected
  connectedUsers.push(socket.id);

  // Emit to myself the other users connected array to start a connection with each them
  const otherUsers = connectedUsers.filter(socketId => socketId !== socket.id);
  socket.emit('other-users', otherUsers);

  // Send Offer To Start Connection
  socket.on('offer', (socketId, description) => {
    socket.to(socketId).emit('offer', socket.id, description);
  });

  // Send Answer From Offer Request
  socket.on('answer', (socketId, description) => {
    socket.to(socketId).emit('answer', description);
  });

  // Send Signals to Establish the Communication Channel
  socket.on('candidate', (socketId, signal) => {
    socket.to(socketId).emit('candidate', signal);
  });

  // Remove client when socket is disconnected
  socket.on('disconnect', () => {
    connectedUsers = connectedUsers.filter(socketId => socketId !== socket.id);
  });
});

The Client Code

Fist create a folder with name public and add the files index.html and main.js. The final project structure should look like this:

HML Code:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebRTC Example</title>

  <style>
    #video-grid {
      display: none;
      grid-template-columns: repeat(auto-fill, 400px);
      grid-auto-rows: 400px;
    }

    video {
      width: 100%;
      height: 100%;
    }
  </style>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/main.js" type="module"></script>
</head>
<body>
  <h1>Hello!</h1>

  <!-- My Video and Remote Video from connection -->
  <div id="video-grid">
    <video playsinline autoplay muted id="local-video"></video>
    <video playsinline autoplay id="remote-video"></video>
  </div>

  <!-- Input to send messages -->
  <div>
    <span style="font-weight: bold">Message: </span>
    <input type="text" id="message-input" title="Message to Send!">
    <button id="message-button">Send</button>
  </div>

  <!-- Area to Print Images -->
  <div class="messages"></div>
</body>
</html>

In main.js file the first step is start a MediaStream, like this:



console.log('Main JS!');

// Map All HTML Elements
const videoGrid = document.getElementById('video-grid');
const messagesEl = document.querySelector('.messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('message-button');
const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');

// Open Camera To Capture Audio and Video
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // Show My Video
    videoGrid.style.display = 'grid';
    localVideo.srcObject = stream;

    // Start a Peer Connection to Transmit Stream
    initConnection(stream);
  })
  .catch(error => console.log(error));

The result is something like this, with your video in local-video area.

The next steps are start a socket connection and init RTCPeerConnectin to each other users connected. When receive other-users socket event, the client will initiate a connection with each them.



const initConnection = (stream) => {
  const socket = io('/');
  let localConnection;
  let remoteConnection;

  // Start a RTCPeerConnection to each client
  socket.on('other-users', (otherUsers) => {
    // Ignore when not exists other users connected
    if (!otherUsers || !otherUsers.length) return;

    const socketId = otherUsers[0];

    // Ininit peer connection
    localConnection = new RTCPeerConnection();

    // Add all tracks from stream to peer connection
    stream.getTracks().forEach(track => localConnection.addTrack(track, stream));

    // Send Candidtates to establish a channel communication to send stream and data
    localConnection.onicecandidate = ({ candidate }) => {
      candidate && socket.emit('candidate', socketId, candidate);
    };

    // Receive stream from remote client and add to remote video area
    localConnection.ontrack = ({ streams: [ stream ] }) => {
      remoteVideo.srcObject = stream;
    };

    // Create Offer, Set Local Description and Send Offer to other users connected
    localConnection
      .createOffer()
      .then(offer => localConnection.setLocalDescription(offer))
      .then(() => {
        socket.emit('offer', socketId, localConnection.localDescription);
      });
  });
}

IMPORTANT: In real world the RTCPeerConnection must be initalized with configurations to iceServers with STUN and TURN servers, this is necessary to get the real IP to internet connection and avoid NAT blocks in network. See more about this in RTCPeerConnection and WebRTC in real world

Continuing our tutorial, now the other client will receive the offer request and must create a RTCPeerConnection with your answer.



// Receive Offer From Other Client
socket.on('offer', (socketId, description) => {
    // Ininit peer connection
    remoteConnection = new RTCPeerConnection();

    // Add all tracks from stream to peer connection
    stream.getTracks().forEach(track => remoteConnection.addTrack(track, stream));

    // Send Candidtates to establish a channel communication to send stream and data
    remoteConnection.onicecandidate = ({ candidate }) => {
      candidate && socket.emit('candidate', socketId, candidate);
    };

    // Receive stream from remote client and add to remote video area
    remoteConnection.ontrack = ({ streams: [ stream ] }) => {
      remoteVideo.srcObject = stream;
    };

    // Set Local And Remote description and create answer
    remoteConnection
      .setRemoteDescription(description)
      .then(() => remoteConnection.createAnswer())
      .then(answer => remoteConnection.setLocalDescription(answer))
      .then(() => {
        socket.emit('answer', socketId, remoteConnection.localDescription);
      });
  });

Lastly, the first client receive the answer and set the Remote Description. So, start the send candidates to create a communication channel to send the stream.



// Receive Answer to establish peer connection
socket.on('answer', (description) => {
  localConnection.setRemoteDescription(description);
});

// Receive candidates and add to peer connection
socket.on('candidate', (candidate) => {
  // GET Local or Remote Connection
  const conn = localConnection || remoteConnection;
  conn.addIceCandidate(new RTCIceCandidate(candidate));
});

The final result is something looks like the image below with showing Local and Remote videos.