#browser api

Subscribe
A Browser API, or Application Programming Interface, is a set of commands, functions, protocols, and objects that allow developers to create web-based applications that can interact with the browser. It helps developers create interactive websites, as well as access and manipulate data stored in the browser. Some of the most common APIs used by JavaScript developers include DOM (Document Object Model), Fetch, WebGL (Graphics Library) and WebRTC (Real Time Communication).
Install Nothing: App UIs With Native Browser APIs
JSNation 2024JSNation 2024
31 min
Install Nothing: App UIs With Native Browser APIs
This Talk introduces real demos using HTML, CSS, and JavaScript to showcase new or underutilized browser APIs, with ship scores provided for each API. The dialogue element allows for the creation of modals with minimal JavaScript and is supported by 96% of browsers. The web animations API is a simple and well-supported solution for creating animations, while the view transitions API offers easy animation workarounds without CSS. The scroll snap API allows for swipers without JavaScript, providing a smooth scrolling experience.
Automate the Browser With Workers Browser Rendering API
JSNation 2024JSNation 2024
20 min
Automate the Browser With Workers Browser Rendering API
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!
Building a Network Stack for our Browser Extension
Node Congress 2024Node Congress 2024
19 min
Building a Network Stack for our Browser Extension
The Talk discusses the development of the Jam browser extension, which is a bug reporting tool. It explores the challenges of messaging between different execution environments within a browser and the need for message chunking to overcome size constraints. The Talk also explains how the development team rebuilt the system using a TCP/IP network stack approach, which allowed them to solve messaging difficulties similar to networking problems. The benefits of this approach include a smoother rollout, simpler debugging, and a focus on feature development without worrying about messaging constraints.
Beyond JavaScript: Maximizing React With Web APIs
React Summit US 2023React Summit US 2023
10 min
Beyond JavaScript: Maximizing React With Web APIs
Watch video: Beyond JavaScript: Maximizing React With Web APIs
This Talk explores how to use browser and web APIs to enhance React applications, covering categories such as Fetch API, Device APIs, Storage APIs, Audio and Video APIs, and Shape API. It explains how web APIs are implemented in React applications and suggests using native JavaScript functions or NPM modules like React Speech Recognition. The Talk demonstrates the use of Battery and Face Detection APIs in a React application, including features like getting battery percentage, live coordinates, and speech-to-text functionality. It also mentions the possibility of creating augmented reality face filters with the face detection API. The conclusion highlights the availability of resources on Mozilla docs and a GitHub repository for further learning and code samples.
Harnessing the Power of Messagechannel and Broadcastchannel
React Advanced 2023React Advanced 2023
11 min
Harnessing the Power of Messagechannel and Broadcastchannel
Watch video: Harnessing the Power of Messagechannel and Broadcastchannel
This talk explores hidden web APIs for communicating between iframes and web workers. It discusses the disadvantages of a naive messaging approach and introduces the message channel API as a solution. The speaker also presents a library called message-channel-shake that simplifies message channel implementation. The talk covers various technologies like React, broadcast channel, and transferable objects.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
Web Push Notifications Done Right
JSNation 2023JSNation 2023
11 min
Web Push Notifications Done Right
Let's talk about web push notifications and their benefits. Web push notifications have higher opt-in and click rates compared to traditional methods. The web push API should be used responsibly, with subscription requests initiated only after explicit user action. Improve engagement by using emojis in notifications. Connect with the speaker on LinkedIn for more information about the web push API.
Create AR Face Filters With the Chrome Face Detection API
JSNation 2023JSNation 2023
30 min
Create AR Face Filters With the Chrome Face Detection API
The Chrome Face Detection API is part of the bigger shape detection API and includes text detection and barcode detection. Enabling the API is as simple as opening a specific URL and enabling the experimental feature. The API provides features like detecting faces and processing landmarks, rendering glasses on faces, and applying face filters. It can handle multiple faces and images in videos, but performance depends on hardware and device processing speed. The API is currently in progress and feedback is being requested for potential production capabilities.
WebHID API: Control Everything via USB
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.
MIDI in the Browser... Let's Rock the Web!
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.
WebBluetooth – the Missing Link
JSNation 2022JSNation 2022
24 min
WebBluetooth – the Missing Link
This Talk introduces the Web Bluetooth API and its role in bridging the gap between browsers and peripheral devices. It covers how to interact with devices using the API, explores creating BLE devices like a buzzer and a small car, and discusses the limitations and availability of the Web Bluetooth API. The Talk also highlights the potential of the Web Audio API for hardware development and mentions the current lack of support for the Web Bluetooth API on iOS devices.
Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
JSNation Live 2021JSNation Live 2021
34 min
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
Service workers provide resilience and make sites faster by intercepting requests and responses, caching assets, and providing fallbacks. They can be used to show critical information when a site goes offline, cache pages for offline access, and improve performance. Service workers can also be used to build multi-page apps with more resilience and less complexity. Caching API responses and gradually adding more complex features are recommended when adopting service workers. Single-page apps are not always the best choice, and different approaches fit different use cases.