addCameraView

Content:
- Properties
- Methods

Adds a camera view into your app to take pictures and record videos.

rvw = ui.addCameraView( parent, options, width, height ) → ui object: CameraView

The capture method returns the image data. To save the image in DroidScript, you can use the WriteFile method like this:

// capture an image
img = cam.capture("jpeg", "base64")
filePath = "image.jpeg"
app.WriteFile(filePath, img, "base64")

Likewise, the record method requires a callback to be called when the video data is ready. To save videos in DroidScript, you can use the WriteFile method like this:

// record a video
cam.record("mp4", "base64", onRecord)

// in your callback function
onRecord( data ) {
filePath = "video.mp4"
app.WriteFile(filePath, data, "base64")
}

Note: Don't forget to add permission to "Camera" and/or "Microphone" when you are taking videos.

These are the setter and getter properties for CameraView component.

Example - Camera app in DroidScript click to expand contents

//Force this app to portrait mode
cfg.Portrait

//Make sure to add Camera permission
_AddPermissions("Camera")

//Main class for the app
class Main extends App
{
    //Called when app starts
    onStart()
    {
        //Create a main layout of type Frame
        this.main = ui.addLayout("main", "Frame", "FillXY")

        //Add a camera view that fills the parent width and height
        //The Fill option makes the image preview fills the entire camera view, otherwise the actual resolution will be viewed.
        this.cam = ui.addCameraView(this.main, "Fill", 1, 1)

        //Create a horizontal layout that will be displayed in the bottom of the screen
        this.layBtm = ui.addLayout(this.main, "Linear", "Horizontal,Vcenter", 1, 0.1)
        this.layBtm.childSpacing = "Between"
        this.layBtm.setPosition(0, 0.9)
        this.layBtm.padding = [1, null, 1, null, "rem"]

        //Create a camera switch toggle icon at the left
        this.toggleCam = ui.addButton(this.layBtm, "flip_camera_android", "icon")
        this.toggleCam.textColor = "#fff"
        this.toggleCam.setOnTouch( this.onSwitchCam )

        //Create a snap button which is a bit larger
        this.snapBtn = ui.addButton(this.layBtm, "camera", "icon")
        this.snapBtn.textColor = "#fff"
        this.snapBtn.iconSize = "2.5rem"
        this.snapBtn.setOnTouch( this.captureImg )

        //Create a preview image and pass it to the previewImage prop of the camera view
        this.prevImg = ui.addImage(this.layBtm, "", "avatar,initial", null)
        this.cam.previewImage = this.prevImg
        this.prevImg.setSize(2.5, 2.5, "rem")
        this.prevImg.cornerRadius = "50%"
        this.prevImg.backColor = "black"

        //Start the camera preview
        this.cam.startPreview()
    }

    //Handle switching of camera source
    onSwitchCam() {
        let src = this.cam.source == "front" ? "back" : "front"
        this.cam.source = src
        this.cam.updatePreview()
    }

    //Handle capture and save the image
    captureImg() {
        const img = this.cam.capture("jpg", "base64")

        //Create unique filename
        const name = "img-" + new Date().getTime() + ".jpg"
        const path = "/Internal/DCIM/" + name

        //Save the image data
        app.WriteFile(path, img, "base64")

        ui.showPopup( "Image has been saved!" )
    }
}

Copy All

Example - Video recorder in DroidScript click to expand contents

//Force this app to portrait mode.
cfg.Portrait

//Make sure to add Camera permission
_AddPermissions("Camera")

//Main class for the app
class Main extends App
{
    //Called when app starts
    onStart()
    {
        this.time = 0

        //Create a main layout of type Frame
        this.main = ui.addLayout("main", "Absolute", "FillXY")

        //Add a camera view that fills the parent width and height
        //The Fill option makes the image preview fills the entire camera view, otherwise the actual resolution will be viewed.
        this.cam = ui.addCameraView(this.main, "Fill,Video", 1, 1)

        this.timer = ui.addText(this.main, "", "Center,Caption", 1)
        this.timer.textColor = "#fff"
        this.timer.setPosition(0, 0.025)

        //Create a horizontal layout that will be displayed in the bottom of the screen
        this.layBtm = ui.addLayout(this.main, "Linear", "Horizontal", 1, 0.1)
        this.layBtm.setPosition(0, 0.9)

        //Create a snap button which is a bit larger
        this.vidBtn = ui.addButton(this.layBtm, "videocam", "icon")
        this.vidBtn.textColor = "#fff"
        this.vidBtn.iconSize = "2.5rem"
        this.vidBtn.setOnTouch( this.handleRecord )

        //Start the camera preview
        this.cam.startPreview()
    }

    //Handle switching of camera source
    handleRecord() {
        //Start recording if icon is videocam
        if(this.vidBtn.icon == "videocam") {
            this.cam.record("mp4", "base64", this.onRecord)
            this.interval = setInterval(() => {
                this.timer.text = (++ this.time) + " sec"
            }, 1000)
        }
        // otherwise stop the recording
        else this.cam.stop()

        //Switch button icon
        this.vidBtn.icon = this.cam.recording ? "stop" : "videocam"
    }

    //Handle on record and save the video data
    onRecord( data ) {

        // Clear interval
        clearInterval( this.interval )
        this.interval = null
        this.timer.text = ""
        this.time = 0

        //Create unique filename
        const name = "vid-" + new Date().getTime() + ".mp4"
        const path = "/Internal/DCIM/" + name

        //Save the video data
        app.WriteFile(path, data, "base64")

        ui.showPopup( "Video has been saved!" )
    }
}

Copy All

Properties

The following properties are available on the CameraView object:

capabilities → Object

focusDistance → Number

focusMode → String

frameRate → Number

imageHeight → Number

img → Object

iso → Number

sound → Boolean

source → String

width → Number

Methods

The following methods are available on the CameraView object:

capture( type, format ) → Object

getPixelData( format, left, top, width, height ) → Object

record( type, format, cb )

setOnError( cb )

setOnReady( cb )

setPictureSize( width, height )

startPreview()

stop()

updatePreview()

Example - Camera app in DroidScript click to expand contents

Example - Video recorder in DroidScript click to expand contents

Properties

Methods

loading