The folding webcam

A webcam that detects the folded posture and change its layout accordingly to improve user's experience.

Getting started

This is a webcam created by Samsung Internet to showcase the device posture API on a Samsung Galaxy Flip using WebRTC. You can follow the step by step codelab to recreate this yourself with the starter kit: https://github.com/SamsungInternet/webcam-fold-starterkit

More information here Device Posture API

Prerequisites

• Basic knowledge of HTML5, CSS and Javascript
• Samsung Internet Web Browser
• For testing: A foldable device / Samsung Remote Test Lab Account / Device Posture API Polyfill

Javascript implementation

Besides the css media query, an implementation of detecting the posture using javascript has been added. It uses the navigator.devicePosture interface and the onchange attribute to handle posture changes.

// Detecting each time the device change its posture

navigator.devicePosture.addEventListener("change", () => {
    console.log(`The current posture is: ${navigator.devicePosture.type}!`);
    
    //Saving the current posture
    let posture = navigator.devicePosture.type;
    if(posture=='folded'){
       // change the layout or do something else if it's folded
    }else{
      // if it returns to unfolded change the layout or do something else...
    }
})