digitallysavvy

import AgoraRTC from 'agora-rtc-sdk-ng'

// Create the Agora Client
const client = AgoraRTC.createClient({ 
  codec: 'vp9',
  mode: 'live',
  role: 'host'
})

document.addEventListener('DOMContentLoaded', async () => { 

digitallysavvy

import AgoraRTC from 'agora-rtc-sdk-ng'

// declare audio and video tracks
const [audioTrack, videoTrack] = null

// Initialize the audio and video tracks
if (!audioTrack || !videoTrack) {
  [ audioTrack, videoTrack ] = await AgoraRTC.createMicrophoneAndCameraTracks({ audioConfig: 'music_standard', videoConfig: '360p_7' })
}

digitallysavvy

Architectures

WebRTC (Web Real-Time Communication), an open-source protocol developed by Google, is supported by all major browsers, eliminating the need for third-party audio and video streaming plugins.

However, it's important to understand that while WebRTC facilitates easy setup and direct communication for small-scale applications, it introduces complexities as businesses scale. WebRTC technology was designed for connecting Peer-2-Peer without intermediary servers meaning it can't handle large audiences on its own. There are a few different approaches to implementing scalable backends for WebRTC.

Mesh

Connects participants directly to each other, creating a web-like mesh network. Mesh infrastructures are ideal for: Small group video calls (2–4 participants); P2P file sharing applications; Low-latency gaming applications where direct connection is crucial

graph LR

digitallysavvy

import { Route, Routes, useNavigate } from 'react-router-dom'
import { ConnectForm } from './components/ConnectForm'
import { LiveVideo } from './components/LiveVideo'

import AgoraRTC, {
  AgoraRTCProvider,
  useRTCClient,
} from "agora-rtc-react";

import './App.css'

digitallysavvy

import { useState } from "react";
import { useParams, useNavigate } from "react-router-dom";

import {
    LocalUser,
    RemoteUser,
    useJoin,
    useLocalCameraTrack,
    useLocalMicrophoneTrack,
    usePublish,

digitallysavvy

function publishMessage(message, callback) {
    var msgConfig = {
        channel : channelName,
        sendByPost: true,
        message: { 
            uuid: UID,
            title: "text",
            description: message
        }
    }

digitallysavvy

function initPubNub(pubKey, subKey, uid, channel) {
    console.log(pubKey, subKey)
    pubNub = new PubNub({
        publishKey : pubKey,
        subscribeKey : subKey,
        uuid: uid,
        logVerbosity: true,
        ssl: true
    });

digitallysavvy

<!-- Chat UI -->
<div class="chatContainer">
  <div class="chat">
    <div class="chat_header"></div>
    <div id="chat_fullscreen" class="chat_conversion chat_converse">
      <!-- msgs will be dynamically added below -->
    </div>
    <div class="chatUi_field">
      <textarea id="chatTextInput" name="chat_message" placeholder="Send a message" class="chat_field chat_message"></textarea>
      <a id="chatUi_send" class="chatUi"><i class="zmdi zmdi-mail-send"></i></a>        

digitallysavvy

// init the session when user clicks join
$( "#join-channel" ).click(function( event ) {
  var agoraAppId = $('#form-appid').val();
  var token = $('#form-token').val();
  var channelName = $('#form-channel').val();
  var pubKey = $('#form-publishKey').val();
  var subKey = $('#form-subscribeKey').val();
  var uid = $("#form-uid").val();
  $("#modalForm").modal("hide");
  initClientAndJoinChannel(agoraAppId, token, channelName, uid);

digitallysavvy

<!-- Join Form - Modal Overlay -->
<div class="modal fade" id="modalForm">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Join Channel</h4>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>