nativescript-videorecorder

NativeScript VideoRecorder

Install

tns plugin add nativescript-videorecorder

QuickStart

JavaScript

var vr = require('nativescript-videorecorder');

var options = {
    saveToGallery: true,
    duration: 30,
    format: 'mp4',
    size: 10,
    hd: true,
    explanation: 'Why do i need this permission'
}

var videorecorder = new vr.VideoRecorder(options);

videorecorder.record().then((data)=>{
  console.log(data.file)
}).catch((err)=>{
  console.log(err)
})

TypeScript

import { VideoRecorder, Options as VideoRecorderOptions } from 'nativescript-videorecorder';

const options: VideoRecorderOptions = {
    hd: true
    saveToGallery: true
}
const videorecorder = new VideoRecorder(options)

videorecorder.record().then((data) => {
    console.log(data.file)
}).catch((err) => {
    console.log(err)
})

VideoRecorder

Options

Option object can be given to the constructor of VideoRecorder or as VideoRecorder::record parameter (as an override).

• hd?: boolean - If true, highest quality of device, if false MMS quality (default: false)
• saveToGallery?: boolean - Enable to save the video in the device Gallery, otherwise it will be store within the sandbox of the app (default: false)
• duration?: number - Limit the duration of the video, 0 for unlimited (default: 0)
• position?: 'front' | 'back' | 'none' - Force which device camera should be used, 'none' for no preferences (default: none)

Additional parameters for Android:

• size?: number - Limit the size of the video, 0 for unlimited (default: 0)
• explanation?: string - Why permissions should be accepted, optional on api > 23

Additional parameters for iOS:

• format?: 'default' | 'mp4' - allows videos to be played on android devices (default: 'default') recommended for cross platform apps

VideoRecorder attributes:

• options: Options Option object (see above section), can be set from the constructor

VideoRecorder methods:

• record(options?: Options): Promise<{ file?: string } > Return a Promise with an object containing the filepath as file key. It may not be there if the video has been saved to the gallery. An optional options parameter can be given to override instance options, this is deprecated.
• requestPermissions(): Promise Return a Promise, resolved if permissions are OK (ask for permissions if not), rejected if user didn't have accepted the permissions. This method is implicitely called by record()
• isAvailable(): boolean Check if device has a camera and is compatible with what has been set in options

Promises above can be rejected with:

• { event: 'denied'} - Permissions have not been accepted
• { event: 'cancelled'} - Video capture have been canceled
• { event: 'failed'} - Generic error

AdvancedVideoView

AdvancedVideoView does not open the device camera application, but rather allows you to embed the camera view in your app. You can then add buttons over it to start/stop recording. It allows for a deeper level of UI customization.

Requires API 21+ on Android 🤖

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:recorder="nativescript-videorecorder/advanced">
<recorder:AdvancedVideoView quality="highest" cameraPosition="front" id="camera"/>

const advancedView = page.getViewById("camera");
advancedView.startRecording();

Api

Method	Default	Type	Description
start()		void	Starts the camera preview
stop()		void	Stop the camera preview
startRecording()		void	Start recording camera preview.
stopRecording()		void	Stop recording camera preview.
toggleCamera()		void	Toggles between front or the back camera.
toggleTorch()		void	Toggles the torch (iOS only for now)
duration		int	Get the current recording video duration.
cameraPosition	BACK	void	Gets or Sets camera position
outputOrientation	PORTRAIT	void	Gets or Sets output video orientation
isTorchAvailable		boolean	ReadOnly: is the torch supported for this camera
torch	false	boolean	Enable/Disable torch (iOS only for now)
quality	MAX_480P	void	Gets or sets Video Quality

outputOrientation

Be careful to not change orientation while recording, it's not supported.

Possible values : portrait, portraitUpsideDown, landscapeLeft, landscapeRight, you can also use the Orientation enum.

This property let you manage the orientation of the output file correctly, it means you can trust your gravity sensors to detect orientation and set it on the camera. With this, you can properly change orientation even when device orientation is locked.