Image Capture API 演示 - 拍照并获取原始帧
使用 ImageCapture.takePhoto() 拍摄高分辨率照片,或抓取实时帧并下载。
UD5工具箱
测试浏览器权限接口:摄像头、地理位置、桌面通知
使用 getUserMedia API 请求摄像头访问权限,实时预览视频流。
使用 Notification API 请求发送桌面通知的权限并测试。
navigator.permissions.query()。navigator.permissions.query({name: '权限名'}) 可以获取权限状态为 granted(已授权)、denied(已拒绝)或 prompt(待询问)。该API还能监听权限状态变化,非常适合在调用敏感功能前做预检。
chrome://settings/content 进行管理。about:preferences#privacy 中管理。edge://settings/content 管理。
navigator.permissions.query({name: 'camera'}) 等方法可以静默获取权限状态,不会弹出任何权限请求对话框。这适用于:onchange 事件,实时响应用户在浏览器设置中修改权限的操作。使用 ImageCapture.takePhoto() 拍摄高分辨率照片,或抓取实时帧并下载。
使用摄像头实时扫描或上传图片解码二维码,快速获取内部文本或链接,前端识别安全快速。
获取摄像头和麦克风,录制视频片段并回放或下载,展示 API 基本用法。
向任意输入URL发送请求,清晰显示响应状态码、头信息和体,类似轻量级Postman。
记录页面交互触发的所有DOM事件及其目标、冒泡阶段,以日志和瀑布形式展示。
枚举连接的显示器,并在特定的屏幕上打开新窗口,体验现代多显示器Web应用。
在线响应式布局测试器,同时预览常见设备分辨率的网页显示效果,帮助检查前端适配。
使用 ImageDecoder API 解码图片并逐帧显示(若为动图),展示底层编解码能力。
发起请求获取当前URL或任意允许CORS的URL的Response Headers,展示详情。
显示当前页面动画的帧率、单帧耗时和丢帧比例,辅助流畅度调试。
定义字段名称和类型(姓名、邮箱、数字范围等),批量生成符合规则的 JSON 模拟数据。
扫描 URL,对 CSP、HSTS、X-Frame-Options 等安全头的设置进行 A+ 到 F 的等级评定。
上传图片,绘制其亮度及红绿蓝通道的直方图,辅助曝光评估。
实时显示touchstart/move/end事件的所有属性:坐标、力度、半径与角度,辅助手势开发。
获取 URL 的响应头,评估 CSP、HSTS、X-Content-Type-Options 等设置,生成详细的安全评分报告。
显示当前页面动画的实时 FPS 图表,检测掉帧和卡顿,辅助性能优化。
上传图片,显示红、绿、蓝及亮度通道的直方图,辅助评估曝光与色彩分布。
编写 HTML 和 import map,在浏览器中直接导入裸标识符模块并执行。
纯前端二维码识别,支持摄像头实时扫描和图片上传解码。
设置不同验证属性和自定义消息,测试HTML5表单验证触发效果。
请求用户允许读取系统剪贴板,并展示内容,显示权限状态变化。
搜索知名品牌名称,显示其标志性的官方HEX颜色代码。
在单页内模拟MPA过渡效果,自定义进场/出场动画,体验View Transitions API丝滑切换。
从上传的图片中提取主要颜色或指定像素的RGB/HEX值,生成图片调色板,辅助配色设计。
输入多个维度的数值,自动绘制蜘蛛网雷达图,支持多组数据叠加比较。
应用屏幕唤醒锁并监听其释放事件,展示前后台切换时的状态变化。
对长列表应用 content-visibility:auto,对比启用前后渲染时间和内存占用。
在色带任意位置点击添加色标并拖拽,感受渐变设计。
将光照不均匀的文档照片进行局部自适应阈值处理,清晰提取文字和线条。
测试navigator.clipboard读写功能,写入文本或读取系统剪贴板,验证安全限制。