browser api

# Code Examples from "Top 5 Underestimated Native Browser Features You Should Be Using"

## 1. Bluetooth: Connecting to Devices Wirelessly 📡

### Example: Connecting to a Bluetooth Device

```typescript
async function connectToBluetooth() {
  try {
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['battery_service'] }]
    });

    const server = await device.gatt?.connect();
    const service = await server?.getPrimaryService('battery_service');
    const characteristic = await service?.getCharacteristic('battery_level');

    const batteryLevel = await characteristic?.readValue();
    console.log('Battery level:', batteryLevel?.getUint8(0));
  } catch (error) {
    console.error('Bluetooth connection failed', error);
  }
}

connectToBluetooth();
```

## 2. Camera Access: Beyond Just Selfies 📸

### Example: Capturing Video Stream

```typescript
async function startVideo() {
  const videoElement = document.querySelector('video');

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoElement.srcObject = stream;
  } catch (error) {
    console.error('Error accessing the camera', error);
  }
}

startVideo();
```

## 3. Microphone: Adding Voice Interaction to Your Apps 🎤

### Example: Capturing Audio and Converting to Text

```typescript
function startVoiceRecognition() {
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    console.log('You said:', transcript);
  };

  recognition.start();
}

startVoiceRecognition();
```

## 4. Geolocation: Not Just for Maps Anymore 🌍

### Example: Getting User Location

```typescript
function getLocation() {
  navigator.geolocation.getCurrentPosition((position) => {
    console.log('Latitude:', position.coords.latitude);
    console.log('Longitude:', position.coords.longitude);
  }, (error) => {
    console.error('Error getting location', error);
  });
}

getLocation();
```

## 5. Battery Status API: Optimize for Battery Life 🔋

### Example: Monitoring Battery Status

```typescript
async function monitorBattery() {
  const battery = await navigator.getBattery();

  function updateBatteryStatus() {
    console.log(`Battery Level: ${battery.level * 100}%`);
    console.log(`Is Charging: ${battery.charging}`);
  }

  updateBatteryStatus();

  battery.addEventListener('levelchange', updateBatteryStatus);
  battery.addEventListener('chargingchange', updateBatteryStatus);
}

monitorBattery();
```

## 6. Web NFC API: Tap into the World of Near Field Communication 📱

### Example: Reading an NFC Tag

```typescript
async function readNFC() {
  try {
    const nfcReader = new NDEFReader();
    await nfcReader.scan();
    nfcReader.onreading = (event) => {
      const message = event.message.records[0];
      console.log('NFC Tag content:', message.data);
    };
  } catch (error) {
    console.error('NFC reading failed', error);
  }
}

readNFC();
```

## 7. Payment Request API: Simplifying Online Payments 💳

### Example: Initiating a Payment Request

```typescript
async function initiatePayment() {
  const supportedInstruments = [{
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }];

  const details = {
    total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } }
  };

  try {
    const request = new PaymentRequest(supportedInstruments, details);
    const paymentResponse = await request.show();
    await paymentResponse.complete('success');
    console.log('Payment successful', paymentResponse);
  } catch (error) {
    console.error('Payment failed', error);
  }
}

initiatePayment();
```

## 8. Web Share API: Enable Social Sharing Natively 🔗

### Example: Sharing a URL

```typescript
function shareContent() {
  if (navigator.share) {
    navigator.share({
      title: 'Check this out!',
      text: 'This is an awesome website!',
      url: 'https://example.com',
    })
    .then(() => console.log('Content shared successfully'))
    .catch((error) => console.error('Error sharing content', error));
  } else {
    console.log('Web Share API is not supported in this browser');
  }
}

shareContent();
```

## 9. Clipboard API: Access the User’s Clipboard Directly ✂️

### Example: Copying Text to Clipboard

```typescript
async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (error) {
    console.error('Failed to copy text', error);
  }
}

copyToClipboard('Hello, World!');
```

## 10. Device Orientation API: Create Interactive Experiences Based on Device Movement 📱

### Example: Detecting Device Orientation

```typescript
function handleOrientation(event: DeviceOrientationEvent) {
  console.log('Alpha (Z-axis):', event.alpha);
  console.log('Beta (X-axis):', event.beta);
  console.log('Gamma (Y-axis):', event.gamma);
}

window.addEventListener('deviceorientation', handleOrientation);
```

## 11. Vibration API: Feel the Buzz 📳

### Example: Simple Vibration

```typescript
function vibrateDevice() {
  if (navigator.vibrate) {
    navigator.vibrate(200); // Vibrates for 200 milliseconds
    console.log('Device vibrated');
  } else {
    console.log('Vibration API not supported');
  }
}

vibrateDevice();
```

### Example: Patterned Vibration

```typescript
function vibratePattern() {
  if (navigator.vibrate) {
    navigator.vibrate([100, 200, 100, 200, 500]); // Vibration pattern: vibrate, pause, vibrate, pause, long vibrate
    console.log('Device vibrated in pattern');
  } else {
    console.log('Vibration API not supported');
  }
}

vibratePattern();
```