📸 Camera Deep Dive: Photos, Videos, and Your Gallery

Your users want to take selfies. Upload profile pictures. Scan documents. Record testimonials.

The camera is the gateway to your app becoming personal.

NativePHP makes it ridiculously easy. Let's dive in.

In this post:

Taking Photos
Recording Video
Picking from Gallery
Handling Events

#Taking Photos

One line opens the native camera.

#PHP (Livewire)

Copied!

use Native\Mobile\Facades\Camera;
use Native\Mobile\Events\Camera\PhotoTaken;
 
public function takePhoto()
{
    Camera::getPhoto()->id('profile-photo');
}
 
#[On('native:' . PhotoTaken::class)]
public function handlePhoto(string $path, string $id)
{
    if ($id === 'profile-photo') {
        $this->profilePhoto = $path;
    }
}

use Native\Mobile\Facades\Camera;
use Native\Mobile\Events\Camera\PhotoTaken;

public function takePhoto()
{
    Camera::getPhoto()->id('profile-photo');
}

#[On('native:' . PhotoTaken::class)]
public function handlePhoto(string $path, string $id)
{
    if ($id === 'profile-photo') {
        $this->profilePhoto = $path;
    }
}

#JavaScript (Vue/React/Inertia)

Copied!

import { Camera, On, Off, Events } from '@nativephp/mobile';
 
const takePhoto = async () => {
  await Camera.getPhoto().id('profile-photo');
};
 
On(Events.Camera.PhotoTaken, ({ path, id }) => {
  if (id === 'profile-photo') {
    profilePhoto.value = path;
  }
});

import { Camera, On, Off, Events } from '@nativephp/mobile';

const takePhoto = async () => {
  await Camera.getPhoto().id('profile-photo');
};

On(Events.Camera.PhotoTaken, ({ path, id }) => {
  if (id === 'profile-photo') {
    profilePhoto.value = path;
  }
});

#Recording Video

Same pattern, different method.

#PHP (Livewire)

Copied!

use Native\Mobile\Events\Camera\VideoRecorded;
 
public function recordVideo()
{
    Camera::recordVideo()->maxDuration(30)->id('testimonial');
}
 
#[On('native:' . VideoRecorded::class)]
public function handleVideo(string $path, string $id)
{
    $this->videoPath = $path;
}

use Native\Mobile\Events\Camera\VideoRecorded;

public function recordVideo()
{
    Camera::recordVideo()->maxDuration(30)->id('testimonial');
}

#[On('native:' . VideoRecorded::class)]
public function handleVideo(string $path, string $id)
{
    $this->videoPath = $path;
}

#JavaScript (Vue/React/Inertia)

Copied!

import { Camera, On, Off, Events } from '@nativephp/mobile';
 
const recordVideo = async () => {
  await Camera.recordVideo().maxDuration(30).id('testimonial');
};
 
On(Events.Camera.VideoRecorded, ({ path, id }) => {
  videoPath.value = path;
});

import { Camera, On, Off, Events } from '@nativephp/mobile';

const recordVideo = async () => {
  await Camera.recordVideo().maxDuration(30).id('testimonial');
};

On(Events.Camera.VideoRecorded, ({ path, id }) => {
  videoPath.value = path;
});

#Picking from Gallery

Sometimes users already have the perfect photo.

#PHP (Livewire)

Copied!

use Native\Mobile\Events\Gallery\MediaSelected;
 
public function pickImages()
{
    Camera::pickImages()->multiple()->maxItems(5)->id('gallery');
}
 
#[On('native:' . MediaSelected::class)]
public function handleMedia(array $files, string $id)
{
    $this->selectedImages = $files;
}

use Native\Mobile\Events\Gallery\MediaSelected;

public function pickImages()
{
    Camera::pickImages()->multiple()->maxItems(5)->id('gallery');
}

#[On('native:' . MediaSelected::class)]
public function handleMedia(array $files, string $id)
{
    $this->selectedImages = $files;
}

#JavaScript (Vue/React/Inertia)

Copied!

import { Camera, On, Off, Events } from '@nativephp/mobile';
 
const pickImages = async () => {
  await Camera.pickImages().multiple().maxItems(5).id('gallery');
};
 
On(Events.Gallery.MediaSelected, ({ files, id }) => {
  selectedImages.value = files;
});

import { Camera, On, Off, Events } from '@nativephp/mobile';

const pickImages = async () => {
  await Camera.pickImages().multiple().maxItems(5).id('gallery');
};

On(Events.Gallery.MediaSelected, ({ files, id }) => {
  selectedImages.value = files;
});

#Handling Events

Event	Fires When
`PhotoTaken`	User captures a photo
`PhotoCancelled`	User cancels capture
`VideoRecorded`	User finishes recording
`VideoCancelled`	User cancels recording
`MediaSelected`	User picks from gallery

#PHP Events

Copied!

use Native\Mobile\Events\Camera\PhotoCancelled;
 
#[On('native:' . PhotoCancelled::class)]
public function photoCancelled(string $id)
{
    $this->showingCamera = false;
}

use Native\Mobile\Events\Camera\PhotoCancelled;

#[On('native:' . PhotoCancelled::class)]
public function photoCancelled(string $id)
{
    $this->showingCamera = false;
}

#JavaScript Events

Copied!

import { On, Off, Events } from '@nativephp/mobile';
 
On(Events.Camera.PhotoCancelled, ({ id }) => {
  showingCamera.value = false;
});

import { On, Off, Events } from '@nativephp/mobile';

On(Events.Camera.PhotoCancelled, ({ id }) => {
  showingCamera.value = false;
});

The camera is just the beginning. Every native feature you add makes your app feel less like a web app and more like something that belongs on the device.

What will you capture? 📸