@teamcognito/instaconnect
v1.0.2
Published
instaconnect React component. This is a webrtc package which exports the video, text and allinone module(including audio, chat and screenshare)
Downloads
5
Keywords
Readme
instaconnect
webrtc react components to initiate video, audio, screenshare and others
Install
npm install --save @teamcognito/instaconnect
Usage
Three components have some important props to pass into.
props.
----->
socketURL
default value is "http://localhost:8000" (if you have a local backend running on this port which contains the code for socket.io).iceServersArray
: An array of stun and turn servers configuration details.Video
andAllinOne
components also has a proproom_id
, default value of which is '1234', which is not required if those component are being rendered under a url containing parameter asroomId
, that it can access likethis.props.match.params.roomId
.roomId
prop is very important if not provided in a proper way may cause fatal error.
import instaconnect from "@teamcognito/instaconnect";
const { AllinOne, TextChat, Video } = instaconnect();
class Example extends Component {
render() {
return <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 andcss
inside<link>
tag in<head>
of HTML :
<!-- ... Load css inside head ... -->
<link rel="stylesheet" href="https://unpkg.com/@teamcognito/instaconnect/umd/main.283a48be.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/@teamcognito/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
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.emit("your id", socket.id);
socket.on("send message", (body) => {
io.emit("message", body);
});
});
License
MIT © teamcognito-tech-llp