extension-camera
Add Camera Capture to React Apps
Web camera integration requires permission handling, preview state, and device controls. This skill guides Claude, Codex, and Claude Code through the provided React hook.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "extension-camera" from https://skillstore.io/skills/caffeinelabs-extension-camera.md and its manifest at https://skillstore.io/api/skills/caffeinelabs-extension-camera/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "extension-camera". Add a basic camera preview to a React form.
النتيجة المتوقعة:
- A responsive preview connected to the hook video reference.
- Start and stop controls that follow loading and active states.
- Visible messages for permission and support errors.
جارٍ استخدام "extension-camera". Design a mobile photo capture workflow.
النتيجة المتوقعة:
- A rear-camera default for document or product capture.
- A capture action available only while the camera is active.
- Camera switching shown only on supported devices.
جارٍ استخدام "extension-camera". Review camera error handling.
النتيجة المتوقعة:
The review identifies missing permission feedback, premature controls, collapsed preview dimensions, retry gaps, and unsupported desktop switching.
التدقيق الأمني
آمنAll four external-command findings are false positives caused by Markdown backticks around TypeScript examples. The hardcoded URL is a documentation link and does not initiate network traffic. No prompt injection, exfiltration, or other semantic security issue was found.
عوامل الخطر
⚙️ الأوامر الخارجية (4)
🌐 الوصول إلى الشبكة (1)
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/caffeinelabs-extension-camera?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/caffeinelabs-extension-camera?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/caffeinelabs-extension-camera/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/caffeinelabs-extension-camera.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>الاستشهادات الأكاديمية (APA · BibTeX · CFF)
اقتباس APA
caffeinelabs. (2026). extension-camera security audit report (audit version 1) [Author version 0.1.4]. Skillstore. https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1اقتباس BibTeX
@techreport{caffeinelabs-caffeinelabs-extension-camera-2026,
author = {caffeinelabs},
title = {extension-camera security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1},
note = {Author version 0.1.4}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "extension-camera security audit report (audit version 1)"
version: "0.1.4"
type: report
authors:
- name: "caffeinelabs"
date-released: "2026-07-22"
url: "https://skillstore.io/skills/caffeinelabs-extension-camera/audits/1"
identifiers:
- type: other
value: "skillstore:caffeinelabs-extension-camera:audit:1"
description: "Skillstore immutable audit report identifier"
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: متوسطما الذي يمكنك بناؤه
Build a Camera Form
Add a responsive preview and photo capture controls to a React form.
Create Mobile Capture
Implement rear-camera capture and supported camera switching for a mobile workflow.
Cover Camera States
Add loading, permission, unsupported-browser, and retry states to a camera interface.
جرّب هذه الموجّهات
Add a React camera preview using @caffeineai/camera. Include start and stop controls, responsive dimensions, and visible permission errors.
Create a camera component that previews video and captures a photo. Disable actions until initialization completes and handle a failed capture.
Build a mobile camera interface with front and rear modes. Enable switching only when supported and preserve stable preview dimensions.
Review this camera component: [component]. Correct permission, timeout, loading, retry, cleanup, and desktop switching behavior using the documented hook.
أفضل الممارسات
- Disable camera actions while initialization or switching is in progress.
- Give the preview explicit dimensions and a stable responsive aspect ratio.
- Explain camera use clearly and rely on browser permission controls before capture.
تجنب
- Do not start the camera on pages where users do not expect capture.
- Do not hide permission, support, timeout, or device errors.
- Do not assume camera switching works on every desktop or mobile device.
الأسئلة المتكررة
Which framework does this skill support?
Does camera access require permission?
Can users switch cameras?
Which image formats are available?
Does the skill upload captured photos?
How should unsupported browsers be handled?
تفاصيل المطور
المؤلف
caffeinelabsالترخيص
MIT
إصدار المؤلف
v0.1.4
مراجعة Skillstore
r1
مرجع
70c19b3c1d1efbdf7557d8f9aaa5ec54489edc36
حداثة الصيانة
٢٢/٧/٢٠٢٦
الاستخدام
0 تنزيلات · 0 مشاهدات
بنية الملفات
📄 SKILL.md