shadcn.io is not affiliated with official shadcn/ui
Camera Denied Error Block for React
A full-screen page for a blocked camera and microphone: what the app can use, a Check again that reads the permission state, a drawn address bar with its popover, and the steps for three browsers in tabs.
Installation
Overview
Walk people through unblocking their camera, with this camera denied page for React with Base UI. It's the screen Panelpost, a video-interview tool, shows before a call: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail, split in two by a divider. At the start the heading, one sentence, a list of what the app can use (camera and microphone, each with a shape and a word), the Shine Button "Check again", and a Switch that is a demo control, "Pretend access is blocked", on when the page opens. Check again asks the browser's permissions API for both and reports what it says; it never opens the camera. At the end a drawn address bar with a camera icon marked 1 and the permission popover under it with its camera switch marked 2, then Tabs with the steps for Chrome, Safari and Firefox, named in text and never drawn, and the system settings for macOS and Windows. For interviews, calls, classes and any app that needs a camera.
FAQ
What is real here, and what stays in the page?
Check again calls navigator.permissions.query for camera and microphone, which only reads a state; the page never calls getUserMedia, so no camera or microphone opens and no prompt appears. The address bar, the popover and the steps are drawings and typed text. In your app, request the camera from your own button, and render this page when that request fails with NotAllowedError.
What does the Pretend access is blocked switch do?
It is a demo control and it is on when the page opens, so the error is what you see. With it on, both rows read Blocked; with it off they show what your browser says (turning the switch off reads it, and Check again reads it any time), and the heading changes to say the camera isn't blocked. Check again always reports your browser's real answer, and says when the switch is overriding it.
Why does it sometimes say Not shared?
Not every browser lets a page ask about the camera and microphone this way: some throw for one or both names. The page catches that and says "won't say" rather than guessing. The steps still apply.
How do the browser tabs work with the keyboard?
Tab reaches the tab list and the arrow keys move between Chrome, Safari and Firefox, with Home and End for the first and last. The three step lists share one cell, so choosing a browser never changes the page's height. Base UI selects a tab as soon as the arrow keys focus it.
Will the steps match my users' browsers?
They describe the controls these browsers use today, but menus move between versions, so check each against the versions you support and edit the text. The numbers 1 and 2 in the steps match the marks on the drawing.
What changes on a phone?
The heading, the list and Check again come first, so the button is on the first screen; the drawing is shortened to the address bar, and the popover and the caption are dropped (the caption is still read aloud). The status line reserves two lines so a long answer never moves the page.
Related
- Pro
Clipboard Denied Error
Browser and deviceA panel for when the browser blocks copying: a read-only box that selects itself, Select all text, a Copy button that really tries the clipboard, the keys as words for Mac or Windows, and steps to allow it.
- Pro
Location Denied Error
Browser and deviceA full-screen page for blocked location: type a town instead, nine towns filtered as you type, three stores and their distances beside a drawn map, and a Check again that reads the permission state.
- Pro
Notification Denied Error
Browser and deviceA panel for blocked push notifications: two channel cells, Push (its state and the one-line fix, read from the browser) and Email instead, plus what the digest brings.
- Pro
Role Ladder Permission Denied Error
Locked and removedA full-screen permission page for a design-system manager: a role ladder of four rising steps with you at Viewer and Admin marked as needed, 'Two roles up' in words, and a Request access dialog that records a note and an owner in local state.
- Pro
Cookies Disabled Error
Browser and deviceA full-screen page for a browser with cookies off: a check that reads the browser and writes nothing, what four essential cookies hold, and the steps for three browsers in an accordion.
- Pro
Browser Unsupported Error
Browser and deviceA full-screen update-your-browser page with five real feature checks in a table (ES modules, CSS grid, :has(), WebGL, structuredClone), a Switch to pretend, and the browsers that have all five.