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
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.git
Navigate to the repository and install the packages
npm install
Start local dev environment
npm run dev
Build 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.