iCall is a multi-user video platform where you can connect with your friends, based on a WebRTC connection. The app makes it possible to have a video connection, chat functionality, and a command to send random Cat Facts using the catfacts API. The app will be made with NodeJS, Express, Express-Handlebars, Socket.io and PeerJS. Check out my NPM Packages to see which other packages I've used.
You can visit the project iCall application here
Location based volume
Location based rooms (map)
Trending Twitter hashtags
Video platform with Cat Facts
The concept I chose to develop is the video platform in combination with the CatFacts API.
The API I will use for this application is the CatFacts API. I chose this API to keep the application funnier. The response returned by the API is an array with 5 different results. Based on a random index number, a random fact is retrieved.
For this CatFacts API you don't need to obtain an API key. By just fetching the correct link you will get a response in your code.
Fetch the API data
// Utils/fetch.js
const fetcher = async (endpoint) => {
const data = await fetch(endpoint)
const response = await data.json()
return response
}
// Utils/socket.js
async function getRandomCatFact() {
const response = await fetcher('https://cat-fact.herokuapp.com/facts')
const num = Math.floor(Math.random() * 5) + 1
const catFact = {
message: `${response[num].text}`,
user: 'CatFacts',
}
return catFact
}Response
{
status: { verified: true, sentCount: 1 },
type: 'cat',
deleted: false,
_id: '58e007cc0aac31001185ecf5',
user: '58e007480aac31001185ecef',
text: 'Cats are the most popular pet in the United States: There are 88 million pet cats and 74 million dogs.',
__v: 0,
source: 'user',
updatedAt: '2020-08-23T20:20:01.611Z',
createdAt: '2018-03-01T21:20:02.713Z',
used: false
}- Communicate based on webcam view and audio
- Chat functionality
- Register/Login authentication with Google
- Inviting users to conference room
- Randomnized Cat Facts
Below is a list of features I'd love to add my videocall platform. The features are split up using the MoSCoW method.
- Video connection with webcam
- Video connection with audio
- Have seperated rooms
- Connect with CatFacts API
- Chat function with usernames
- Text command for API
- Add styling
- Possible to stop webcam sharing
- Possible to stop audio sharing
- Invite users
- End call button
- Smooth transitions
- Disconnecting feedback
- Add User Authentication
- Homepage of the product/service
- Smaller video views, clickable to expand
- User accounts with database
- Video call history
- List of current participants
- Screensharing
- DotEnv
- Express
- Express-Handlebars
- Express-Openid-Connect
- Express-Sessions
- Express Socket.io Session
- Moment
- Node-fetch
- Peer
- Socket.io
- Uuid
- Nodemon
- Eslint
- Prettier
Clone the repository
git clone https://github.com/joordy/real-time-web-2021.gitNavigate to the repository and install the packages
npm installStart local dev environment
npm run devBuild export for deployment
npm run build- PeerJS - Simple peer-to-peer with WebRTC. (n.d.). PeerJS. https://peerjs.com/
- MDN. (2021f, March 30). MediaStream.getVideoTracks() - Web APIs | MDN. https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getVideoTracks
- Socket.io. (n.d.). Socket.IO enables real-time, bidirectional and event-based communication. https://www.socket.io/
- Auth0. (n.d.). Auth0: Secure access for everyone. But not just anyone. https://auth0.com/#!
- J. Sturkenboom (n.d.). ju5tu5/barebonechat. GitHub. https://github.com/ju5tu5/barebonechat
This is a repository which is licensed as MIT. Developed by Jordy Fronik ©️ 2021.