npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@amanisystemsinc/instaconnect

v1.3.0

Published

instaconnect React component. This is a webrtc package which exports the video, text and allinone module(including audio, chat and screenshare)

Downloads

103

Readme

instaconnect

react components to initiate video, audio, screenshare chat using webrtc

NPM

Install

npm install --save @amanisystemsinc/instaconnect

Usage

This package is used as a core dependency inside @amanisystemsinc/instawidget package. And it is also used as a core package to build the instaconnect dashboard.

Two components that are exported from the module have some important props to pass into.

  • props and their default value for TextChat component

    • className = "show-chat" Whether the chat section will be visible or not when integrated = true. You can use hide-chat to hide the chat section
    • socketURL = You can use http://localhost:8000 locally if you spin up the socket server locally, code for which is given below.
    • integrated = false This means whether the chat section is integrated with the Video component. It is handled internally, so you don't have to do anything here.
    • handleSend = (chatData)=>chatData This is a function which is passed down to VoiceMailDialog when user is not online or busy.
    • chatStyle = { height: "100vh" } This style applied to the container and only applied if integrated = true
    • roomId = "1234chat" Any string can be passed here as roomId
  • props and their default value for TextChat component

    • socketURL = You can use http://localhost:8000 locally if you spin up the socket server locally, code for which is given below.
    • room_id = "1234" Any string can be passed here as roomId
    • activeRecordButton = true This will give a Recored button to record the call
    • recordingsHandler = (location) => location This is function which will give access to the recording url
    • handleSend = (chatData)=>chatData This is a function which is passed down to VoiceMailDialog when user is not online or busy.
    • audioOnly = false This will determine whether the call will be only audio or video+audio
import instaconnect from "@amanisystemsinc/instaconnect";
const { AllinOne, TextChat } = instaconnect();

class Example extends Component {
  render() {
    return <AllinOne />;
  }
}

function MyComponent(){
  //Some code
  return (
    <>
    {/* Your other component */}
    <TextChat>
    </>
  )
}

Usage in plain HTML file as vanilla JS

  • Step 1: Add a DOM Container to the HTML
    Technically you can add those component to any existing html page, but as they are created to display on a single page it is good to create a new html file e.g. videochat.html. You can redirect to this page upon clicking on a link or icon that you can create on your own as you want.
    Add an empty <div> tag to mark the spot where you want to display something with React. For example:
<!-- ... existing HTML ... -->

<div id="video_chat_container"></div>
<!-- ... existing HTML ... -->

We gave this <div> a unique id HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.

  • Step 2: Add the Script Tags and necessary css
    Next, add three <script> tags to the HTML page right before the closing </body> tag and css inside <link> tag in <head> of HTML :
 <!-- ... Load css inside head ... -->
 <link rel="stylesheet" href="https://unpkg.com/@amanisystemsinc/instaconnect/umd/main.2b062894.css"
    />
 <!-- ... other HTML ... -->
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="https://unpkg.com/@amanisystemsinc/instaconnect/umd/instaconnect.min.js"></script>
</body>

The first two tags load React. The third one will load your component code.

  • Step 3: Open another script tag and use the components like this
<script>
  const e = React.createElement;
  const { AllinOne } = instaconnect();
  const domContainer = document.querySelector("#video_chat_container");
  ReactDOM.render(e(AllinOne), domContainer);
</script>
  • Step 4(Optional): Tip: Minify JavaScript for Production
    Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. If you already minify the application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in production.min.js:
<script
  src="https://unpkg.com/react@17/umd/react.production.min.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
  crossorigin
></script>

If you don’t have a minification step for your scripts, here’s one way to set it up.

Setting up the backend Server

You need to set up socket.io version 3.0.3 in the backend server using express and initialize the socket like this

const http = require("http");
//WITH HTTPS
// const https = require("https");
// const fs = require("fs");
// const key = fs.readFileSync(__dirname + "/certs/privkey.pem");
// const cert = fs.readFileSync(__dirname + "/certs/fullchain.pem");
// const ca = fs.readFileSync(__dirname + "/certs/chain.pem");
// const option = {
//   key: key,
//   cert: cert,
//   ca: ca,
// };

const express = require("express");

const cors = require("cors");

const app = express();
//WITH HTTPS
// const server = https.createServer(app, option);
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

app.get("/", (req, res) => res.send("Hello world"));

io.on("connection", (socket) => {
  //---------------------------------------

  socket.on("join", function (data) {
    socket.join(data.roomId);
    socket.room = data.roomId;

    const sockets = io.of("/").in().adapter.rooms.get(data.roomId);

    if (sockets.size === 1) {
      socket.emit("init");
    } else {
      if (sockets.size === 2) {
        io.to(data.roomId).emit("ready");
      } else {
        socket.room = null;
        socket.leave(data.roomId);
        socket.emit("full");
      }
    }
  });

  //----------------------------------------

  socket.on("signal", (data) => {
    io.to(data.room).emit("desc", data.desc);
  });
  socket.on("disconnect", () => {
    const roomId = Object.keys(socket.adapter.rooms)[0];

    if (socket.room) {
      io.to(socket.room).emit("disconnected");
    }
  });
  socket.on("callend", ({ room_id }) => {
    // console.log("room_id", room_id);
    io.to(room_id).emit("callended");
  });

  //------------------------------------------

  socket.on("join-chat", function (data) {
    socket.join(data.roomId);
    socket.room = data.roomId;

    const sockets = io.of("/").in().adapter.rooms.get(data.roomId);

    if (sockets.size === 1) {
      socket.emit("init-chat");
    } else {
      if (sockets.size === 2) {
        io.to(data.roomId).emit("start-chat", "Type your message...");
        socket.emit("your id", socket.id);
      } else {
        socket.room = null;
        socket.leave(data.roomId);
        socket.emit("full-chat");
      }
    }
  });

  //---------------------------------
  socket.on("send message", (body) => {
    io.to(body.roomId).emit("message", body);
  });
});

let PORT = process.env.PORT || 8000;
server.listen(PORT, () => console.log(`server is listening on port ${PORT}`));

License

MIT © amanisystemsinc