@mobinx/easymeet v1.0.6

EasyMeetjs: The easiest yet flexible and robust webrtc libraty for react and javascript with typescript support

EasyMeetjs is a robust and versatile TypeScript library that provides a solid foundation for building WebRTC-based applications. It simplifies the complexities of WebRTC, enabling developers to easily incorporate real-time communication features into their projects.From simple audio video calling to real time peer to peer file transfer , everything can be done in just 40 lines! 😉😉

Key Features:

• Peer-to-Peer Connection Management: Seamlessly handles the creation, management, and closure of WebRTC peer connections, facilitating direct communication between users.
• Media Handling (Audio/Video/Screen Sharing): Supports capturing, sending, and receiving audio, video, and screen share streams, enriching the communication experience.
• Data Channels: Enables the exchange of arbitrary data between peers, extending the possibilities beyond just audio and video.
• File Transfer: Implements a file transfer mechanism leveraging data channels, allowing users to share files directly.
• State Management and Event Handling: Maintains and updates the state of peers, media streams, and file transfers, providing callbacks to react to changes.
• Well-Structured and Comprehensive: Encapsulates the complexities of WebRTC, offering a convenient interface for developers to build upon.

Installation:

npm install @mobinx/easymeet

Usage: (React Next.js - using meterd iceServers and ably as socket server)

Meet.tsx

"use client"
import Ably from "ably";
import { useEasyMeet } from "@mobinx/easymeet/react";
import { useEffect, useRef, useState } from "react";
import { FileState } from "@mobinx/easymeet";

const ably = new Ably.Realtime({ key: 'your-ably-api-key', clientId: Math.random().toString(36).substring(7) })
ably.connection.once('connected').then(() => {
    console.log('Connected to Ably!');
})
const channel = ably.channels.get('quickstart');
channel.presence.enter("mobin");



async function sendmsg(msg: any, to: any) {
  await channel.publish("greeting", {
    data: msg,
    clientId: ably.auth.clientId,
    to: to,
  });
  console.log("message sent: ", msg);
}

const VIdeo = ({ stream }: { stream: MediaStream }) => {
  let viref = useRef<HTMLVideoElement | null>(null);
  let [isPlay, setIsPlay] = useState(false);
  useEffect(() => {
    if (viref.current) {
      viref.current.srcObject = stream;
      viref.current?.play();
      viref.current.onplaying = () => {
        console.log("playing");
        setIsPlay(true);
      };
      viref.current.onpause = () => {
        console.log("pause");
        setIsPlay(false);
        viref.current?.play();
      };

      if (viref.current.paused) {
        viref.current.play();
      }
    }
  });

  return (
    <video
      ref={viref}
      playsInline
      autoPlay
      muted
      style={{ width: "100%" }}
      controls={true}
    ></video>
  );
};

const AUdeo = ({ stream }: { stream: MediaStream }) => {
  let viref = useRef<HTMLAudioElement | null>(null);
  let [isPlay, setIsPlay] = useState(false);
  useEffect(() => {
    if (viref.current) {
      viref.current.srcObject = stream;
      viref.current?.play();
      viref.current.onplaying = () => {
        console.log("playing");
        setIsPlay(true);
      };
      viref.current.onpause = () => {
        console.log("pause");
        setIsPlay(false);
        viref.current?.play();
      };

      if (viref.current.paused) {
        viref.current.play();
      }
    }
  });

  return (
    <audio
      ref={viref}
      playsInline
      autoPlay
      style={{ width: "100%" }}
      controls={true}
    ></audio>
  );
};

export default function Meet({ iceServers }: { iceServers: any }) {
  const isInit = useRef<boolean | null>(null);
  const {
    isSystemReady,
    joinExistingPeer,
    joinNewPeer,
    leavePeer,
    sendFile,
    fileSharingCompleted,
    fileSharingState,
    onSocketMessage,
    sendDataChannelMsg,
    newDataChannelMsg,
    toggleAudio,
    toggleCamera,
    toggleScreenShare,
    isAudioOn,
    isVideoOn,
    isScreenShareOn,
    audioStream,
    videoStream,
    screenShareStream,
    peers,
  } = useEasyMeet(ably.auth.clientId, iceServers, sendmsg);
  const [myMsg, setMyMsg] = useState<string>("");
  const [allMsg, setAllMsg] = useState<{ from: string; msg: string }[]>([]);
  const [fileProgress, setFileProgress] = useState<
    {
      id: string;
      progress: number;
      url?: string | null;
      fileState?: FileState;
    }[]
  >([]);
  useEffect(() => {
    console.log(peers);
  }, [peers]);
  useEffect(() => {
    if (fileSharingState) {
      setFileProgress((prev) => {
        let tempArray = [];
        prev.map((item) => {
          if (item.id != fileSharingState.fileId) {
            tempArray.push(item);
          }
        });
        tempArray.push({
          id: fileSharingState.fileId,
          progress: fileSharingState.progress,
          fileState: fileSharingState,
        });
        return tempArray;
      });
    }
  }, [fileSharingState]);
  useEffect(() => {
    console.log(fileSharingCompleted);
    if (fileSharingCompleted) {
      setFileProgress((prev) => {
        let tempArray = [];
        prev.map((item) => {
          if (item.id != fileSharingCompleted.file.fileId) {
            tempArray.push(item);
          }
        });
        tempArray.push({
          id: fileSharingCompleted.file.fileId,
          progress: 100,
          url: fileSharingCompleted.objectUrl,
          fileState: fileSharingCompleted.file,
        });
        return tempArray;
      });
    }
  }, [fileSharingCompleted]);
  useEffect(() => {
    if (newDataChannelMsg) {
      setAllMsg((prev) => prev.concat([newDataChannelMsg]));
    }
  }, [newDataChannelMsg]);
  useEffect(() => {
    async function init() {
      if (!isInit.current) {
        if (isSystemReady) {
          console.log("isSystemReady");
          await channel.subscribe("greeting", async (message) => {
            if (message.clientId === ably.auth.clientId) {
              return;
            }
            if (message.data.to === ably.auth.clientId) {
              console.log("message received from: " + message.clientId);
              await onSocketMessage(message.data.data, message.clientId!, null);
            }
          });
          channel.presence.subscribe("enter", async function (member) {
            if (member.clientId === ably.auth.clientId) {
              return;
            }
            console.log("informAboutNewConnection", member);
            joinNewPeer(member.clientId);
          });

          channel.presence.subscribe("leave", async function (member) {
            if (member.clientId === ably.auth.clientId) {
              return;
            }
            console.log("leave", member);
            leavePeer(member.clientId);
          });
          channel.presence.get().then((other_users: any) => {
            console.log("userconnected", other_users);
            if (other_users) {
              for (var i = 0; i < other_users.length; i++) {
                if (other_users[i].clientId !== ably.auth.clientId)
                  joinExistingPeer(other_users[i].clientId, false);
              }
            }
          });

          isInit.current = true;
        }
      }
    }

    init();
  }, [
    isSystemReady,
    joinExistingPeer,
    joinNewPeer,
    leavePeer,
    onSocketMessage,
  ]);

  return (
    <div className="flex flex-row space-x-3">
      my id: {ably.auth.clientId}
      <input
        value={myMsg}
        onChange={(e) => setMyMsg(e.target.value)}
        className="bg-gray-200"
      />
      <button
        onClick={() => {
          sendDataChannelMsg(myMsg, "all");
          setAllMsg((prev) =>
            prev.concat([{ from: ably.auth.clientId, msg: myMsg }])
          );
          setMyMsg("");
        }}
      >
        send
      </button>
      <input
        type="file"
        onChange={async (e) => {
          const file = e.target.files?.[0];
          if (file) {
            peers.forEach((peer) => {
              sendFile(peer.socketId, file);
            });
          }
        }}
      />
      <button className="mx-2" onClick={async () => await toggleAudio()}>
        {isAudioOn ? "mute" : "unmute"}
      </button>
      <button onClick={async () => await toggleCamera()}>
        {isVideoOn ? "camera off" : "camera on"}
      </button>
      <button onClick={async () => await toggleScreenShare()}>
        {isScreenShareOn ? "stop screen share" : "start screen share"}
      </button>
      <div>
        {isVideoOn && <VIdeo stream={videoStream!} />}
        {isScreenShareOn && <VIdeo stream={screenShareStream!} />}
      </div>
      <hr />
      {allMsg.map((msg, key) => (
        <div key={key}>
          {msg.from} : {msg.msg}
        </div>
      ))}
      <hr />
      <hr />
      <div>
        {fileProgress.map((item, key) => {
          return (
            <div key={key}>
              id: {item.fileState?.fileName}
              <progress max="100" value={item.progress}></progress>
              {item.url && (
                <a href={item.url} download={item.fileState?.fileName}>
                  download
                </a>
              )}
            </div>
          );
        })}
      </div>
      <div>
        {peers.map((peer, key) => (
          <div key={key}>
            Peer Id: {peer.socketId}
            {peer.isScreenShareOn && <VIdeo stream={peer.screenShareStream!} />}
            {peer.isVideoOn && <VIdeo stream={peer.videoStream!} />}
            {peer.isAudioOn && <AUdeo stream={peer.audioStream!} />}
          </div>
        ))}
      </div>
    </div>
  );
}

page.tsx

import Image from "next/image";
import dynamic from "next/dynamic";

const Meet = dynamic(() => import("./Meet"), { ssr: false });


export default async function Home() {
  const response = await fetch("your-metered-api-key");
  const iceServers = await response.json();
  console.log(iceServers);
  return (
    <div>
      <Meet iceServers={iceServers} />
    </div>
  );
}

Usage: (Html with Jquery , Meterd and ably)

index.html

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width" />
    <title>Multi Conn App</title>
    <script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
    <script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
    <!-- <script src="scripts/jquery.signalR-2.2.2.min.js"></script> -->
    <!-- <script src="https://localhost:44338/signalr/hubs"></script> -->
    <script src="https://unpkg.com/@mobinx/easymeet@1.0.4/dist/easy-meet.min.js"></script>
    <!-- <script type="module">
        import WebrtcBase from './dist/index.js';
       
    </script> -->
    <script src="app.js"></script>



    <script>

        $(function () {

            const urlParams = new URLSearchParams(window.location.search);

            var meeting_id = urlParams.get('mid');

            // if (!meeting_id) {
            //     var murl = window.location.origin + "?mid=" +  (new Date()).getTime();
            //     $('#meetingid').attr('href',murl).text(murl);
            //     $("#meetingContainer").hide();
            //     $("#meetingbox").show();
            //     return;
            // }

            // var user_id = urlParams.get('uid');
            // if (!user_id) {
            //     user_id = window.prompt('Enter your nick!');
            // }

            // if (!user_id || !meeting_id) {
            //     alert('user id or meeting id missing');
            //     return;
            // }
            $("#meetingContainer").show();
            $("#meetingbox").hide();

            // MyApp._init(user_id,meeting_id);

        });
    </script>
</head>

<body>



    <div id="meetingContainer" style="display: none;">
        <h1 id='meetingname'></h1>
        <input type="file" id="fileinput" />
        <button id="btnsendfile">Send File</button>
        <div id="fileprogress"></div>
        <div>

            <input type="text" id="msgbox" />
            <button id="btnsend">Send</button>

            <div id='messages'></div>

            <div id='divUsers' style="display:none">
                <div id="me" class="userbox">
                    <h2></h2>
                    <div>
                        <video autoplay muted id="localVideoCtr"></video>
                        <video autoplay muted id="localScreenVideoCtr"></video>

                    </div>
                </div>
                <div id="otherTemplate" class="userbox" style="display:none">
                    <h2></h2>
                    <div>
                        <video autoplay muted id="remoteVideoCtr111 " class="video"></video>
                        <video autoplay muted id="remoteVideoCtr111" class="screen"></video>

                        <audio autoplay controls id="remoteAudioCtr111" class="audio"></audio>
                    </div>
                </div>
            </div>
        </div>

        <div style="clear: both;"></div>
        <div class="toolbox" style="display:none">
            <button id="btnMuteUnmute">UnMute</button>
            <button id="btnStartStopCam">Start Camera</button>
            <button id="btnStartStopScreenshare">Screen Share</button>
        </div>
    </div>
    <br>
    <br>



</body>

</html>

app.js

(async () => {

    const response = await fetch("https://virsys.metered.live/api/v1/turn/credentials?apiKey=ca9f4e60bf446fc29401ccb1fa904d110708");
    const iceServers = await response.json();
    let isWrtcInit = false;
    const ably = new Ably.Realtime({ key: 'YSXfdw.ksCpsA:Bf6jKYu4LPPpMfiFkSMJrZ4q4ArLDkuBf7bJCPxKQUo', clientId: Math.random().toString(36).substring(7) });
    ably.connection.once('connected').then(async () => {
        console.log('Connected to Ably!');
    })
    const myid = ably.auth.clientId;
    console.log('myid: ', myid);
    const channel = ably.channels.get('quickstart');
    let easymeet = new EasyMeet.WebrtcBase(ably.auth.clientId, iceServers, sendmsg,);
    document.title = myid;

    async function sendmsg(msg, to) {
        await channel.publish('greeting', { data: msg, clientId: myid, to: to });
        console.log('message sent: ', msg);
    }



    await channel.subscribe('greeting', async (message) => {

        // clientid ==  sender from
        // id == receiver (to)
        if (message.clientId === myid) {
            //checking i am not worikng on my own msg
            return;
        } else {

            if (message.data.to === myid) {
                //checking if the msg is for me
                console.log('message received from: ' + message.clientId);
               
                console.log(message);
                await easymeet.onSocketMessage(message.data.data, message.clientId);

            }

        }

    });

    let _localVideoPlayer = document.getElementById('localVideoCtr');
    let localScreenVideoCtr = document.getElementById('localScreenVideoCtr');

    easymeet.onFileStateChange((fileState) => {

        console.log(fileState);
        if (document.getElementById('fileprogress' + fileState.fileId) == null) {
            let progress = document.createElement('progress');
            progress.id = 'fileprogress' + fileState.fileId;
            progress.value = parseInt(fileState.progress);
            progress.max = 100;
            $("#fileprogress").append(progress);
        }
        else {
            document.getElementById('fileprogress' + fileState.fileId).value = parseInt(fileState.progress);
        }

        // $("#fileprogress").append(`<div>${(fileState.progress) + "%  " + parseInt(fileState.transferSpeed) + "kb/s" }  </div>`)
    })
    easymeet.onFileTransferCompleted((fileState, objectURl) => {
        console.log(fileState, objectURl);
        $("#fileprogress").append(`<div>Completed</div>`)
        document.getElementById('fileprogress' + fileState.fileId).value = 100;

        // // $("#fileprogress").append(`<div>${JSON.stringify(fileState)}</div>`)
        $("#fileprogress").append(`<a href="${objectURl}" download="${fileState.fileName}">${objectURl}</a>`)
    })

    $("#btnsendfile").on('click', async function () {
        let file = document.getElementById('fileinput').files[0];
        console.log(file);
        (easymeet.getAllPeerDetails()).forEach(element => {
            console.log(element.socketId);
            easymeet.sendFile(element.socketId, file);
        });

    });
 

    easymeet.onCameraVideoStateChange((state, stream) => {
        if (state) {
            _localVideoPlayer.srcObject = stream;
        }
        else {
            _localVideoPlayer.srcObject = null;
        }

    })
    easymeet.onScreenShareVideoStateChange((state, stream) => {
        if (state) {
            localScreenVideoCtr.srcObject = stream;
        }
        else {
            localScreenVideoCtr.srcObject = null;
        }

    })

    $("#btnMuteUnmute").on('click', async function () {
        await easymeet.toggleAudio()

    });
    $("#btnStartStopCam").on('click', async function () {
        await easymeet.toggleCamera();
    });

    $("#btnStartStopScreenshare").on('click', async function () {
        await easymeet.toggleScreenShare();
    })

    easymeet.onDataChannelMsg((from, msg) => {
        console.log("onDataChannelMsg", from, msg);
        $("#messages").append("<li>" + from + ": " + msg + "</li>");
    })

    easymeet.onPeerStateChange((peerstate) => {
        if (peerstate) {
            console.log("peerstate", peerstate);
            for (let peerz in peerstate) {
                let pr = peerstate[peerz];
                let remoteElm = document.getElementById(peerstate[peerz].socketId);
                if (!remoteElm) {
                    AddNewUser(peerstate[peerz].socketId, peerstate[peerz].socketId);
                }
                let video = remoteElm.querySelector('.video'), audio = remoteElm.querySelector('audio'), screen = remoteElm.querySelector('.screen');
                if (pr.isAudioOn) {
                    if (audio) {
                        audio.srcObject = peerstate[peerz].audioStream;
                        audio.play();
                    }
                }
                else {
                    if (audio) {
                        audio.srcObject = null;
                    }
                }
                if (pr.isVideoOn) {
                    if (video) {
                        video.srcObject = peerstate[peerz].videoStream;
                    }
                }
                else {
                    if (video) {
                        video.srcObject = null;
                    }
                }

                if (pr.isScreenShareOn) {
                    if (screen) {
                        screen.srcObject = peerstate[peerz].screenShareStream;
                    }
                }
                else {
                    if (screen) {
                        screen.srcObject = null;
                    }
                }



            }
        }
    })


    channel.presence.subscribe('enter', async function (member) {
        if (member.clientId === myid) {
            return;
        }
        console.log("informAboutNewConnection", member);
        AddNewUser(member.clientId, member.clientId);
        easymeet.createConnection(member.clientId, true);
    });

    channel.presence.subscribe('leave', async function (member) {
        if (member.clientId === myid) {
            return;
        }
        $('#' + member.clientId).remove();
        easymeet.closeConnection(member.clientId);
    });
    channel.presence.get(function (err, other_users) {
        console.log("userconnected", other_users);
        $('#divUsers .other').remove();
        if (other_users) {
            for (var i = 0; i < other_users.length; i++) {
                AddNewUser(other_users[i].clientId, other_users[i].clientId);
                easymeet.createConnection(other_users[i].clientId, false);
            }
        }
        $(".toolbox").show();
        $('#messages').show();
        $('#divUsers').show();
    });


    $('#btnResetMeeting').on('click', function () {
        socket.emit('reset');
    });

    $('#btnsend').on('click', function () {
        //_hub.server.sendMessage($('#msgbox').val());
        easymeet.sendDataChannelMsg("all", $('#msgbox').val());

    });

    $('#divUsers').on('dblclick', 'video', function () {
        this.requestFullscreen();
    });


    function AddNewUser(other_user_id, connId) {
        var $newDiv = $('#otherTemplate').clone();
        $newDiv = $newDiv.attr('id', connId).addClass('other');
        $newDiv.find('h2').text(other_user_id);
        $newDiv.find('video').attr('id', 'v_' + connId);
        $newDiv.find('audio').attr('id', 'a_' + connId);
        $newDiv.show();
        $('#divUsers').append($newDiv);
    }
    channel.presence.enter("mobin");
})();

Public API for core library (vanilla js)

Public Methods:

This table provides a detailed description of all public methods available in the WebrtcBase class from @mobinx/easymeet:

like

let webrtc = new EasyMeet.WebrtcBase("you-socket-id", iceServers, sendmsg /*the function used by easymeet system for sending msg to other over socket, takes msg and to ,two perameter , see usages example avobe */);

Public Method of React Hook (useEasyMeet)

You can use those from @mobinx/easymeet/react

import {useEasyMeet} from "@mobinx/easymeet/react"
let {startCamera, isVideoOn , isAudioOn , peers, fileSharingState ...and more} = useEasyMeet("you-socket-id", iceServers, sendmsg /*the function used by easymeet system for sending msg to other over socket, takes msg and to ,two perameter , see usages example avobe */)

Contributing:

Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions, bug fixes, or new features.

License:

This project is licensed under the MIT License.

Acknowledgements:

• WebRTC - The underlying technology powering this library.

Contact:

For any inquiries or support, please contact MobinX at mobin0219@gmail.com.