Hey there, I’m Amir!
Having recently joined the innovative team at Nimble Ape as a Software Engineer, I’m truly delighted to be part of this dynamic company. I’m eager to introduce you to a project that originated during my interview journey – the React Selfie App. This endeavor not only allowed me to showcase my coding skills but also led me to an exploration into the world of browser APIs, which I find truly fascinating. Walk alongside me as I guide you through the process of crafting this inventive application.
The Challenge:
The Nimble Ape team asked me to create a fun and engaging web application that takes selfies, using React, Vite and the getUserMedia API.
The Result:
Here you can see the final version, complete with the additional features of a ‘mirror’ effect, the ability to delete stored selfies and to select which camera you’d like to use:
Check out the React Selfie app:
And here’s the Github repo so you can see how I built it:
More on the APIs:
For anyone wanting to create a similar app, let me tell you about some of the different APIs in the mix for the React Selfie App:
Permissions API was key for building the app, allowing me to find out if permission has been given to access the webcam, mic and so on.
getUserMedia API plays a pivotal role in granting the app access to the user’s camera and microphone. It’s this API that fuels the seamless and interactive interface.
Here’s a peek at some code that demonstrates how I used these powerful APIs:
// Sample code snippet demonstrating the getUserMedia API
const initializeCamera = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.current.srcObject = stream;
} catch (error) {
console.error('Error accessing camera:', error);
}
};
In this snippet, we leverage the getUserMedia API to initiate the user’s camera and stream the video to the app’s interface. This is just a glimpse of how modern web technologies can be combined to create a seamless, user-centric experience in a real-time browser-based app like the React Selfie App.
Try it out for yourself 🙂 And if you need help with your RTC project, don’t hesitate to get in touch with the team.
Stay tuned for more tech experiments!