PWA: uso del dispositivo

Lo primero necesitamos conocer las características principales del dispositivo que esta usando el usuario. Para ello uso un objeto que recoge las características accesibles desde el navegador, tal como explico en el artículo «Cual es tu dispositivo».

Controlar si se está conectado.

Para conocer si estamos conectados a internet usamos el objeto window.navigator, en concreto la propiedad onLine: window.navigator.onLine

Desde el objeto sis podemos preguntar si esa condición se cumple con la línea:

sis.get('conn');

También podemos tener un listener que estará comprobando si estamos conectados:

function updateIndicator() { console.log(window.navigator.onLine); }
window.addEventListener('online',  updateIndicator);
window.addEventListener('offline', updateIndicator);

La cámara

Para manejar la cámara usamos un campo input tipo file y que tiene la propiedad capture=”camera”:

<input id="camera" class="photo-input" type="file" accept="image/*" capture="camera">

Un div con una etiqueta img, que hará las funciones de una caja contenedora para la foto:

<div id="foto" class="photo-caja"><img id="photo" src="" width="100%"></div>

Y un botón que dispara el evento del input file:

<div id="cameraopen" class="boton-cuad"><span class="icon-camera-1"></span></div>

En el js de funciones añadimos el código para que funcione la captura:

const camera = document.querySelector('#camera');
	const photo = document.querySelector('#photo');
	const open = document.querySelector('#cameraopen');
	// cuando se pulsa en el boton
	open.addEventListener('click', function(){ camera.click(); });
	// Cuando se elige una imagen o se usa la cámara
	camera.addEventListener('change', function(e) {
	// la colocamos en la caja
	photo.src = URL.createObjectURL(e.target.files[0]);
});

Capturar audio

Esto no funciona en los dispositivos de Apple.

Lo primero de todo es hacer uso del método MediaDevices.getUserMedia() solicitando al usuario permisos:

// Declare global variables.
const globalStream = null;
// Active permisions of navigator for record audio.
navigator.mediaDevices
.getUserMedia({ audio: true, video: false })
.then((stream) => { 
globalStream = stream;
});

Como segundo paso debemos instanciar un objeto «MediaRecorder» con la configuración que deseemos, en este caso he utilizado un mimeType tipo «audio/webm»:

// Define config.
const config = {mimeType: 'audio/webm'};
const globalStream = null;
// Init instance MediaRecorder.
const mediaRecorder = new MediaRecorder(globalStream, config);  

En tercer lugar debemos declarar dos listerner, el primero «dataavailable» es el que irá obteniendo información en forma de chunks (trozo o pieza de información) mientras estamos realizando la grabación y nos permitirá almacenar todos estos chunks en un array. El segundo listener «stop» nos permitirá utilizar el array de chunks y generar a partir del mismo un Blob (un objeto binario) con el que finalmente podremos generar una instancia URL de un objeto, será entonces cuando podamos asignar dicho objeto URL a un elemento html como un enlace «a» o un elemento audio «audio»:

// Declare array empty for save chunks.
let recordedChunks = [];
// Event for save data recorered into array chunks.
mediaRecorder.addEventListener('dataavailable', (e) => {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
});
// Event stop where you can execute custom actions.
mediaRecorder.addEventListener('stop', function() {
console.log('addEventListener stop');
// Create object url from blob.
const objectRef = URL.createObjectURL(new Blob(recordedChunks));
});

El objeto «mediaRecorder» tiene dos métodos que son los que podremos utilizar para comenzar la grabación «start» y para pararla «stop»:

// Start recorder event of media recorder instance.
mediaRecorder.start();
// Stop recorder event of media recorder instance.
mediaRecorder.stop();