Back

addCameraView

JS Py
Hello World
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

//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!" )
    }
}
# 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()
        src = this.cam.source == "front" ? "back" : "front"
        this.cam.source = src
        this.cam.updatePreview()

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

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

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

        ui.showPopup( "Image has been saved!" )
Copy All       Run      

Example - Video recorder in DroidScript

//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!" )
    }
}
# 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
        name = "vid-" + new Date().getTime() + ".mp4"
        path = "/Internal/DCIM/" + name

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

        ui.showPopup( "Video has been saved!" )
Copy All       Run      

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()
Number: Fraction of the parent width [0-1].
Number: Fraction of the parent height [0-1].
Number: Starting pixel from the left.
Number: Starting pixel from the top.
Number: The width of the image portion in pixels.
Number: The height of the image portion in pixels.
Number: The image width in pixels. See `capabilities` for minimum and maximum values.
Number: The image height in pixels. See `capabilities` for minimum and maximum values.
String: “Comma separated options for the camera view. Available values are "Front"”, “ "Back"”, “ "Video"”, “ "Fill" and "Stretch". "Video" option includes audio.”
String: “The image type. Values are "jpg" or "jpeg""”, “ "png"”, “ "webp"”, “ "gif". Default is "jpg".”
String: “The returned data format. Can be "base64"”, “ "bytes"(regular array)”, “ "uint8array"(typed array) or "arraybuffer". Default is "base64"”
String: “Values are "rgba" array”, “ or "pngbase64" or "jpgbase64".”
String: “Video output encoding format. Values can be "mp4"”, “ "ogg" and "webm".Default is "mp4"”
String: “Return video data format. Values can be "blob"”, “ "base64"”, “ "bytes" (regular array)”, “ "objecturl"”, “ "arraybuffer"”, “ "uint8array" (typed array). Default is "base64"”
Object: The parent layout where to add the camera view.
function()
function( error )
rvw.capabilities
Returns the capabilities of the camera. You can inspect this object to set camera constraints.
rvw.capture
Capture an image. This will return an image data which you can save or manipulate.
rvw.focusDistance
Sets or returns the focus distance. See capabilities for min and max values.
rvw.focusMode
Sets or returns the camera focus mode. Available values are "manual", "single-shot", "continuous"
rvw.frameRate
Sets or returns the video frame rate. See capabilites for min and max values.
rvw.getPixelData
Returns the pixel data of the image preview or a given portion of it.
rvw.imageHeight
Sets or returns the image height in pixels.
rvw.img
Sets the preview image taken on capture. Must be a UI image component.
rvw.iso
Sets or returns the camera iso. See capabilities for max and min values.
rvw.record
Record a video.
rvw.setOnError
Add a callback handler when an error occured.
rvw.setOnReady
Add a callback handler when the camera is ready.
rvw.setPictureSize
Sets the size of the image.
rvw.sound
Sets or returns a boolean value whether the sound is enabled or disabled
rvw.source
The camera source to be use. Values can be "front" or "back".
rvw.startPreview
Start streaming the camera.
rvw.stop
Stop recording a video.
rvw.updatePreview
Update the camera preview. Call it when you have updated the constraints of the camera such as setting the source from back to front, or setting zoom level etc.
rvw.width
Sets or returns the image width in pixels.