- Create a Gatsby site.
PWA that teach you with video analyse how to sit straight. I am doing this project to improve a) back posture and b) improve my react hooks skills. Unfortunately, non active windows can not process camera views.
-
Start developing.
Navigate into your new site’s directory and start it up.
gatsby develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000!
The posture monitoring web application supports Picture-in-Picture (PiP) mode for real-time posture feedback. This feature allows you to keep an eye on your posture even when you navigate away from the main tab.
-
Automatic Activation:
- PiP mode will automatically activate when you navigate away from the main tab. This ensures that you continue to receive posture monitoring feedback while multitasking in other tabs or windows.
-
Manual Activation:
- You can manually enable PiP mode by clicking on the PiP activation element within the application. Look for the clickable element labeled "PIP for non-active browser checking" in the setup section.
-
Disabling PiP Mode:
- When PiP mode is activated, a message or notification will appear, allowing you to disable it if you prefer. Simply click on the message to exit PiP mode.
-
Exiting PiP Mode:
- You can also exit PiP mode from within the PiP window itself by using the controls provided by your browser.
The PiP mode feature is compatible with modern browsers that support the Picture-in-Picture API, including Chrome, Edge, and Safari.
When PiP mode is activated, a message or notification will be displayed, allowing you to disable it if you prefer. Additionally, a button or control is provided to exit PiP mode from within the overlay.
- Ensure that PiP activation does not interfere with other functionalities.
- Optimize for minimal CPU and memory usage when in PiP mode.
For more information, refer to the Picture-in-Picture API Documentation.