Reaction Video Recording App for Kids with Carousel ABCs and YouTube using Xamarin Forms

This app idea / proof of concept is one of those things from my ever-growing Geeky Dad idea vault.  I wanted to develop a Reaction Video Recording App for Kids.

I’ve heard over the years that toddlers are quick to pick up technology especially tablets and smartphones.  It wasn’t until I saw my toddler swiping through pictures on my phone that I realized how quickly it starts.  With my desires (1) to build something educational for my toddler and (2) to learn Xamarin, I set forth on a quick weekend project.

Carousel View Scrolling

First, I wanted to see if it was possible to build an app that combined basic learning and carousel scrolling.  A carousel was easy using Xamarin Forms and Carousel View for Xamarin Forms.

CarouselView is extremely easy to implement.  You literally need to populate items within an OberservableCollection (snippet below) and with minimal XAML it displays in the app.  Basically I created a Page ViewModel, found 26 images for the letters and populated the collection.

Recording “React” Video from Front Facing Camera

In addition to a carousel I wanted to up the ante by recording the audio and video from the front facing camera.  This was not a simple exercise, especially using Xamarin Forms.  You will need to be comfotable and knowledgeable with terms such as Dependency Injection, Delegates and most importantly iOS AVFoundation.

For the most part Dependency Injection is straight forward in Xamarin Forms.  It is effectively how you as coder would call platform specific actions, such as Record Video, from a shared resource such as the XAML front end.  Below snippet shows call from XAML to DependencyService.

The flow is XAML/Shared Code to Interface within Shared Code to Implementation within Platform to Platform specific Service.

Interface within Shared Code (IRecordVideo)

Note that functions need at least one variable passed in, even if you do not need one.

Platform-specific Implemention of Interface (RecordVideoImpl)

Platform-specific, iOS, Service (CameraService)

Gotchas include learning the iOS way to record video in the Xamarin framework.  Above CameraService is not the cleanest or best example to do things with iOS AVFoundation but it’s the way I got things working on my iPhone.  Sometimes I need to close app and relaunch to record a second time.  One thing is for certain, I learned a lot about iOS video and audio recording using Xamarin.

I plan to post the complete code to Github. But first I need to clean several areas up.  The code is by no means a production ready app, it has its bugs and quirks.

Maybe in time I will add more carousel modules or make it cloud-based but for now nothing beats doing the ABCs or watching Youtube while recording my son’s reaction at the same time.


Leave a Reply

Your email address will not be published. Required fields are marked *