APIs Web insoupçonnées

Thomas, Web Developer.

Sous-titres

// Create a subtitle track
const track = video.addTextTrack('captions', 'Français', 'fr');
// Add a time-coded line (cue)
cosnt cue = new VTTCue(1.224, 3.740, 'Tu connais pas Sheraf ?');
// Ajust its properties
cue.align = right;
// Add the cue to the track
track.addCue(cue);

Battery manager

// Getting battery infos is async
navigator.getBattery().then(batteryManager => {
    // Extract information from the battery manager
    const { charging, chargingTime, dischargingTime, level } = batteryManager;
});

Game Pad

// Listen for gamepad connection
window.addEventListener('gamepadconnected', event => {
    // Get the gamepad object
    const { buttons, axes } = event.gamepad;
    // Get the value of a button
    const a = buttons[0].pressed; // true
    // Get the value of a stick
    const vertical = axes[1]; // 0.657
});

Visibilité de l'onglet

// You can listen for visibility change
document.addEventListener('visibilitychange', event => {
    document.visibilityState;
    // 'hidden'|'visible'|'prerender'|'unloaded'

    document.hidden;
    // boolean
})

Notifications

🚨

// You have to request permission first
Notification.requestPermission().then(result => {
    if (result === 'granted') {
        // If acces has been granted, you can notify the user
        new Notification('Mulder, it\'s me.');
    }
});

Speech Synthesis

// Create a sentence
const sentence = new SpeechSynthesisUtterance('Hellow world!');
// Choose a voice
sentence.voice = window.speechSynthesis.getVoices()[2];
// Read the sentence
window.speechSynthesis.speak(sentence);

JAVA

window.navigator.javaEnabled(); // boolean

User media

// Get the stream...
navigator.mediaDevices
    .getUserMedia({ video: true, audio: true })
    // ...and set it as the video source
    .then(stream => video.srcObject = stream);

Number of processor core

const { hardwareConcurrency } = navigator;

Drop

// Listen for drop events
addEventListener('drop', event => {
    const { type, files, getData } = event.dataTransfer;

    if (types.includes('Files')) {
        // Get droped files
        files.forEach(file => file.type);
    } else {
        // Or get content
        const value = getData('text/plain');
    }
});

Geolocation

// Watch for location changes
navigator.geolocation.watchPosition(position => {
    const { longitude, latitude } = position.coords;
});
// You can also get position at time t
this.geolocation.getCurrentPosition(position => position.coords);

Device orientation

// Listen for change
addEventListener('deviceorientation', event => {
    // Get orientation data
    const { alpha, beta, gamma } = event;
});

Merci !