- Learn
- Guida Titanium
- Fotocamera e Galleria Fotografica
Fotocamera e Galleria Fotografica
Titanium è dotato di una API estrememente semplice e potente per l’accesso alla fotocamera e alla galleria delle immagini. Con la stessa funzione infatti possiamo scattare foto o girare filmati, e abbiamo la possibilità di accedere al file risultante per poterne elaborare il contenuto, salvarlo sul filesystem oppure inviarlo sulla rete.
Il metodo per chiamare la fotocamera è Titanium.Media.showCamera e come argomento richiede un oggetto CameraOptionsType contenente le proprietà e i metodi di callback per gestire i tre possibili eventi legati all’uso della fotocamera: esito positivo, eventuale situazione di errore e annullameno dell’operazione. Per accedere alla galleria chiameremo invece il metodo Titanium.Media.openPhotoGallery, che come argomento vuole un oggetto di tipo PhotoGalleryOptionsType.
Quello che rende interessante questa API è che i due oggetti che possiamo passare come argomento hanno una struttura simile e quindi possono, con i dovuti accorgimenti, essere considerati intercambiabili.
La struttura della chiamata pertanto è:
var options = {
success : function(event) {
// l'operazione è andata a buon fine
},
cancel : function() {
// l'operazione è stata annullata
},
error : function(error) {
// si è verificato un errore
},
saveToPhotoGallery : true,
allowEditing : true,
mediaTypes : [Ti.Media.MEDIA_TYPE_VIDEO, Ti.Media.MEDIA_TYPE_PHOTO]
};
Titanium.Media.showCamera(options); // attiva la fotocamera
// oppure...
Titanium.Media.openPhotoGallery(options); // attiva la gallery
Esaminiamo in dettaglio i metodi e le proprietà a disposizione:
- saveToPhotogallery: se impostato a true, la foto o il video verranno salvati nella gallery.
- allowEditing: questo parametro è valido solo su iOS, e specifica se il contenuto appena ottenuto dalla fotocamera può essere editato con gli strumenti di sistema forniti dal device.
- mediaTypes: anche questo parametro è valido solo su iOS, e specifica la natura del contenuto che vogliamo catturare.
-
success:
è la callback che verrà chiamata quando la fotocamera
avrà terminato con successo l’operazione. Riceve un parametro event
che contiene informazioni sulla natura del contenuto multimediale che è stato
catturato (o selezionato).
L’esempio precedente illustra una callback che verifica se l’operazione di cattura è andata a buon fine e il tipo di media è una fotografia; in caso affermativo, l’immagine catturata verrà visualizzata dall’oggetto $.image (di tipo Ti.UI.ImageView).success : function(event) { // l'operazione è andata a buon fine if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) { $.image.image = event.media; } }
- cancel: è la callback che viene chiamata se l’utente annulla l’operazione.
-
error: è la callback che viene eseguita quando si verifica un errore.
In questo esempio, se il device non è disponibile (come nel caso del simulatore iOS che non dispone di fotocamera) viene mostrato un messaggio di errore. Per gestire tutti gli altri tipi di errore, verrà mostrato un popup con l’oggetto errore in formato JSON.error : function(err) { // si è verificato un errore if (error.code == Titanium.Media.NO_CAMERA) { alert("no available camera"); } else { alert('errore ' + JSON.stringify(err)); } }
Se usiamo Android, dobbiamo fare attenzione al fatto che la funzione
Titanium.Media.showCamera non permette di registrare video,
per cui occorrerà ricorrere alla creazione di un Intent.
Registrare un video su Android
In questo esempio abbiamo una view Alloy con due pulsanti e un oggetto Ti.Media.VideoPlayer. Registreremo il video alla pressione del pulsante Record e lo visualizzeremo alla pressione del pulsante Play. Il videoplayer ha una proprietà url che conterrà l’indirizzo locale del video che verrà registrato.
<Alloy>
<Window class="container">
<Button id="record" title="Record" top="0" onClick="onRecord"></Button>
<Button id="play" title="Play" onClick="onPlay" visible="false"></Button>
<VideoPlayer id="player" ns="Ti.Media" bottom="2" url=""
height="300" width="300" backgroundColor="blue" autoplay="false" />
</Window>
</Alloy>
Per registrare il video creeremo un Intent la cui azione associata è la registrazione un video. Utilizzeremo questo Intent per avviare una Activity che avrà il compito di far partire la registrazione e di ritornare all’app in caso di successo (o fallimento). Se l’operazione avrà esito positivo, il video sarà memorizzato nella gallery del dispositivo e avrà una URI per poterlo indirizzare. Passando la URI al videoplayer potremo visualizzare la registrazione appena effettuata.
function onRecord() {
// intent
var intent = Titanium.Android.createIntent({
action : 'android.media.action.VIDEO_CAPTURE'
});
// start activity
$.index.activity.startActivityForResult(intent, function(e) {
if (e.resultCode == Ti.Android.RESULT_OK) {
if (e.intent.data != null) {
var videoURL = e.intent.data;
// success e.intent.data contains the Video URI
if (videoURL != null) {
$.play.visible = true;
// assign url to videoplayer
$.player.url = videoURL;
}
} else {
Ti.API.error('Error retrieving the video URI');
}
} else if (e.resultCode == Ti.Android.RESULT_CANCELED) {
Ti.API.trace('recording was canceled');
} else {
Ti.API.error('error recording the video');
}
});
};
function onPlay() {
// play recorded video
$.player.play();
};
$.index.open();
Il codice sorgente degli esempi utilizzati è allegato a questo articolo e disponibile su GitHub: potrete scaricare l’app per fotocamera e gallery ed il registratore di filmati per Android.
Se vuoi aggiornamenti su JavaScript, mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Cloud Party 2015 Bologna: AngularJS – le direttive
Le direttive sono la ciliegina sulla torta di AngularJS, uno dei loro ruoli è quello di costruire componenti riutilizzabili e […]