[PAID] VideoRekorder: Record video with preview in custom layout without any external app ($8 or INR 501)

vknow360 · August 13, 2024, 11:38am

1. Overview

VideoRekorder is an advanced extension for App Inventor2 that allows users to record videos directly within a custom layout. It supports multiple features like switching between front and back cameras, adjusting video quality, and enabling flash. Users can start, pause, mute, and resume recordings effortlessly. The extension also includes events for handling errors and tracking recording status changes, such as when a video is successfully saved. It's an all-in-one solution for video recording without needing any external apps.

Latest Version: 1
Published: 2024-08-12T18:30:00Z
Last Updated: 2024-08-12T18:30:00Z
Min Api: Android 5 (api 21)
Aix size: 1.8 mb

2. Blocks

3. Documentation

Events

CameraSwitched	Event raised when camera is switched to front from back or vice-versa _{isFrontCamera \| boolean}
RecordingPaused	Event raised when recording is successfully paused
RecordingMuted	Event raised when recording is successfully muted
RecordingUnmuted	Event raised when recording is successfully unmuted
RecordingResumed	Event raised when recording is successfully resumed
VideoRecorded	Event raised when video is successfully recorded and saved to given path _{videoPath \| text}
ErrorOccurred	Event raised when any error occurs _{errorMsg \| text}
CameraPreviewStarted	Event raised when camera preview started showing in the layout
CameraPreviewStopped	Event raised when camera preview stopped showing in the layout

Methods

IsFeatureAvailable	Returns whether provided feature is supported or not _{feature \| text}
InitializeCamera	Initializes preview view in the provided layout and opens default camera. Back camera is always opened by default. _{container \| component}
StartRecording	Starts video recording with configurations set through properties. _{outputPath \| text}
SwitchCamera	Switches between front and back camera.
StopRecording	Stops currently running video recording and saves video.
PauseRecording	Pauses currently running video recording.
MuteRecording	Mutes currently running video recording.
UnMuteRecording	Unmutes currently running video recording.
ResumeRecording	Resumes video recording.
StopCamera	Stops camera preview and removes it from registered layout.
EnableFlash	Sets flash state. Use this method only after preview started. _{enable \| boolean}
IsFlashOn	Returns whether flash is on or not
GetSupportedVideoQualities	Returns supported video qualities for opened camera. Use this method only after preview started.
SetQuality	Set quality for video recording. Use this method only after preview started. _{quality \| text}

Properties

RecordAudio	Sets whether to record audio or not. Effective only when set before InitializeCamera method. Property Type : write-only Accepts : boolean
UseFrontCamera	Sets whether to open and use front camera or back camera. Effective only when set before InitializeCamera method. Property Type : write-only Accepts : boolean
FlashOn	Sets whether to enable flash or not in camera preview and video recording. Effective only when set before InitializeCamera method. Property Type : write-only Accepts : boolean
CameraOrientation	Sets orientation (rotation) used in camera preview and video recording. Effective only when set before InitializeCamera method. Property Type : write-only Accepts : number
Quality	Sets video quality used in camera preview and video recording. Effective only when set before InitializeCamera method. Property Type : write-only Accepts : text
FeatureBackCamera	Back camera feature Property Type : read-only Accepts : text
FeatureAutofocusCamera	Autofocus camera feature Property Type : read-only Accepts : text
FeatureCameraFlash	Camera flash feature Property Type : read-only Accepts : text
FeatureFrontCamera	Front camera feature Property Type : read-only Accepts : text
ScaleType	Sets preview scale type Property Type : write-only Accepts : number
ScaleTypeFillCenter	Scale type FILL_CENTER Property Type : read-only Accepts : number
ScaleTypeFitCenter	Scale type FIT_CENTER Property Type : read-only Accepts : number
AspectRatio	Sets aspect ratio of preview and video Property Type : write-only Accepts : number
AspectRatio4n3	Aspect ratio 4:3 Property Type : read-only Accepts : number
AspectRatio16n9	Aspect ration 16:9 Property Type : read-only Accepts : number
AspectRatioDefault	Aspect ratio default Property Type : read-only Accepts : number

4. Usage

Initialize Camera preview in layout

Property blocks are effective only when called before InitializeCamera block. Also, aspect ratio works best with FitCenter scale type.

GetSupportedVideoQualities returns a list of supported qualities for currently opened camera. (back or front)
In addition to these values, HIGHEST and LOWEST quality are always supported.

Change quality and switch camera on-demand
There are some limited features which can altered after opening camera.

Record Video

You can leave outputPath empty. A randomly generated file path will be used.

You can Pause and Resume recording using respective blocks.

Close camera when done recording
Make sure to close camera preview when you no longer need it.

This will trigger CameraPreviewStopped event, if camera was closed successfully.

5. Purchase Extension

6. Demo Video

Thank you.
Hope it helps!

TIMAI2 · August 13, 2024, 12:51pm

Stunning !!

vknow360 · August 13, 2024, 1:48pm

vknow360 · August 13, 2024, 1:48pm

Added demo video.

Peter · August 13, 2024, 2:59pm

This is cool!!!

vknow360 · August 13, 2024, 3:48pm

Thank you

3dmixer · August 15, 2024, 12:21pm

Good job as always

TIMAI2 · August 15, 2024, 12:23pm

Q1. What are the number settings for CameraOrientation, and what impact do they have on the video that is output ?

Q2. I notice that if I transfer a video taken with the phone in portrait poistion, that the video is rotated by 90 degrees (one way for the front camera, the other way for the rear camera?

Q3. I am not able to select HIGHEST or LOWEST video settings ?

vknow360 · August 15, 2024, 1:26pm

90, 180 and 270 are accepted values. I mean you can put values between them as well but in saved recording only these values will be used. Like any value between 45 and 135 will be converted into 90.
Orientation effects preview view and recording.

I am unable to understand this. Can you post a recording here (or in pm) ?

These quality options are always available for use, but not returned by GetSupportedVideoQualities block.
For example my phone has FHD , HD and SD options. So if I set quality to HIGHEST then best quality available (in this case FHD) will be used for recording, and SD will be used for LOWEST quality.

TIMAI2 · August 15, 2024, 1:39pm

Q2. cont'd

Here is the relevant output from ffmpeg:

###################################
Not using the extension, but using the device camera app:
###################################

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'PXL_20240814_202349394.mp4':
  com.android.capture.fps: 30.000000
  Duration: 00:00:05.96, start: 0.000000, bitrate: 19880 kb/s
  Stream #0:0(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 190 kb/s (default)
    Metadata:
      rotate          : 90
   
  Stream #0:1(eng): Video: hevc (Main) (hvc1 / 0x31637668), yuvj420p(pc, smpte170m/bt470bg/smpte170m), 1920x1080, 19685 kb/s, SAR 1:1 DAR 16:9, 30.02 fps, 30 tbr, 90k tbn, 90k tbc (default)
    Metadata:
      rotate          : 90

    Side data:
      displaymatrix: rotation of -90.00 degrees

###################################
Using the extension FRONT camera
###################################

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'FHD1723665514014.mp4':
  Duration: 00:00:06.36, start: 0.000000, bitrate: 16687 kb/s
  Stream #0:0(eng): Video: h264 (Baseline) (avc1 / 0x31637661), yuvj420p(pc, smpte170m/bt470bg/smpte170m), 1920x1080, 16585 kb/s, 30.02 fps, 30.02 tbr, 90k tbn, 180k tbc (default)
    Metadata:
      rotate          : 90
    Side data:
      displaymatrix: rotation of -90.00 degrees

###################################
Using the extension REAR camera (selfie...)
###################################

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'SDR1723665953763.mp4':
  Duration: 00:00:06.16, start: 0.000000, bitrate: 2984 kb/s
  Stream #0:0(eng): Video: h264 (Baseline) (avc1 / 0x31637661), yuvj420p(pc, smpte170m/bt470bg/smpte170m), 720x480, 2945 kb/s, 30.03 fps, 30 tbr, 90k tbn, 180k tbc (default)
    Metadata:
      rotate          : 270
    Side data:
      displaymatrix: rotation of 90.00 degrees

Screenshot of FRONT camera video on computer (using mplayer) - rotated 90 degrees anti-clockwise. Same output from camera app...

The video for the REAR camera is rotated 90 degrees clockwise

vknow360 · August 15, 2024, 1:51pm

I recorded a video using front camera and retrieved metadata.

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'recording_1723727629671.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: isommp42
    creation_time   : 2024-08-15T13:13:54.000000Z
    com.android.version: 14
  Duration: 00:00:03.76, start: 0.000000, bitrate: 1731 kb/s
  Stream #0:0[0x1](eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, smpte170m, progressive), 720x480, 1469 kb/s, 30.08 fps, 30.08 tbr, 90k tbn (default)
      Metadata:
        creation_time   : 2024-08-15T13:13:54.000000Z
        handler_name    : VideoHandle
        vendor_id       : [0][0][0][0]
      Side data:
        displaymatrix: rotation of 90.00 degrees
  Stream #0:1[0x2](eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 256 kb/s (default)
      Metadata:
        creation_time   : 2024-08-15T13:13:54.000000Z
        handler_name    : SoundHandle
        vendor_id       : [0][0][0][0]

I am not sure how to interpret this data.

So I checked again with MediaInfo and yes rotation is 270, but MediaPlayer on Windows 11 plays with correct rotation. Same on Android.

TIMAI2 · August 15, 2024, 1:57pm

Interestingly if i playback video on my computer with ffplay the orientation is correct:

ffplay -i FHD1723665514014.mp4

will see what my smart tv does... hmm plays back rotated

vknow360 · August 15, 2024, 2:05pm

Can you try recording video on a different phone?

TIMAI2 · August 15, 2024, 2:11pm

On a Nexus7 Android 6.01

Same output, same rotation

Note videos play back OK on Google Drive.

Seems video recording is blighted with the same issue and image/picture taking on Google devices, they look OK when android/google is handling it but anything else (e.g. AI2..?)

My guess is that if I try to rotate the camera with the extension, playback will just be wrong? I need to do some more testing...

vknow360 · August 15, 2024, 2:18pm

What does this mean?
No issues with camera app?

TIMAI2 · August 15, 2024, 2:19pm

Same issue with camera app

vknow360 · August 15, 2024, 2:26pm

Okay, so this issue is only on/due to Google devices?

On a normal phone, yes.

TIMAI2 · August 15, 2024, 2:54pm

If I rotate the phone to landscape and make a video, this plays back rotated everywhere except with mplayer

There is a parameter -vf rotate=1 that fixes playback for mplayer with the earlier video tests, and I can encode (as I probably will) to unrotate.

But expectation is, I guess, that a user should have some sort of WYSIWYG experience...

If I set the preview window to say 320x180 (16:9), and take a video, then I should get back a video of what I could see in the preview window, in the correct orientation? - but it seems Google messes with the metadata...

(experience based on using @Kumaraswamy 's Procam extension which takes an image of the preview window. Now this may not be possible for video...)

vknow360 · August 15, 2024, 4:04pm

I think I can handle orientation changes of phone and update video recording rotation at runtime, I'll see.