Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

הצגת רכיב ה-HTML ‏ <usermedia>

Mari Viana

Minh Le

תאריך פרסום: 29 ביוני 2026

אחרי ההשקה של <geolocation> element ב-Chrome 144, הרכיב הבא בחבילת רכיבי היכולות הוא רכיב ה-HTML‏ <usermedia>. האלמנט הזה זמין מגרסה Chrome 151, ומסמן את השלב הבא במעבר מבקשות הרשאה כלליות לאמצעי בקרה ממוקדים ופונקציונליים לגישה לזרמי נתונים מהמצלמה והמיקרופון. המעבר מהנחיות שמופעלות על ידי סקריפט לחוויה מוצהרת ומופעלת על ידי המשתמשים, <usermedia> מצמצם את כמות קוד ה-boilerplate, משפר את האבטחה ומספק למשתמשים שדחו בעבר את הגישה נתיב שחזור חלק, וכך פותר את הבעיה של פרצות בהרשאות שנמשכה זמן רב.

מניהול הרשאות לשליטה ביכולות

הרכיב <usermedia> הוא אמצעי הבקרה המיוחד הבא שיושק בחבילת רכיבי היכולות, אחרי ההשקה המוצלחת של <geolocation>. המעבר הזה מההצעה המקורית והכללית <permission>– חלק מיוזמת PEPC – מאפשר לדפדפן לטפל בצורה יעילה יותר במורכבויות ובהתנהגויות הייחודיות של יכולות חומרה שונות. ההצעה הראשונית התמקדה בעיקר בניהול מצבי הרשאה, כמו אישור או דחייה, אבל רכיבי היכולת פועלים כמתווכי נתונים.

רכיב <geolocation> מספק לאתר אובייקט מיקום, ו-<usermedia> מנהל את כל התהליך של גישה למצלמה ולמיקרופון. הוא מתעד את כוונת המשתמש, מנהל את ההנחיה בדפדפן ומעביר את אובייקט MediaStream לאפליקציה. השינוי הזה מבטל את הצורך בשיחות נפרדות של getUserMedia(), מפשט את ההטמעה ומבטיח לדפדפן אות מהימן לגבי כוונת המשתמש.

אימות הקונספט

נתונים מהעולם האמיתי שהתקבלו מניסוי המקור הראשוני הראו שהאמצעים לשליטה בהרשאות בהקשר ובאופן יזום על ידי המשתמשים משפרים באופן משמעותי את שיעורי ההצלחה של המשתמשים.

חברת סיסקו (Cisco) הבחינה בכך שרק כ-10% מהמשתמשים שדחו את ההרשאות בהתחלה הסכימו להעניק אותן באמצעות בקשות ההסכמה הקודמות, אבל שיעור ההסכמה עלה ליותר מ-65% עם הרכיב החדש.
Zoom דיווחה על ירידה של 46.9% בשגיאות של צילום במצלמה או הקלטה במיקרופון, כמו חסימות ברמת המערכת, בעקבות השימוש ברכיב כדי להנחות את המשתמשים בתהליך השחזור.
ב-Google Meet נרשמה ירידה של 17% במשוב על בעיות במיקרופון ועלייה של 131% במספר המשתמשים שהצליחו לשחזר את ההרשאות אחרי שדחו את הגישה בהתחלה.

למה כדאי להשתמש ברכיב `<usermedia>`?

האלמנט <usermedia> מבוסס על התבניות שנקבעו על ידי <geolocation>, והוא מתייחס לאתגרים המרכזיים של בקשת יכולות מתקדמות. בקשות למדיה מסתמכות על קריאות חיוניות ל-JavaScript, שלעתים קרובות מפעילות הנחיות לא רלוונטיות. אם חוסמים את האתר בטעות, כדי לבטל את ההחלטה הזו צריך להיכנס להגדרות הדפדפן, וזו פעולה מורכבת שלעתים קרובות גורמת לכך שאנשים לא משתמשים בתכונות.

רכיב <usermedia> פותר את הבעיות האלה באמצעות הפתרונות הבאים:

כוונה ותזמון ברורים: ההנחיה מופיעה רק אחרי הקשה פיזית על רכיב שנשלט על ידי הדפדפן, ולכן היא מספקת אות מהימן של כוונה. כך הדפדפן יכול לעקוף חסימות אוטומטיות של התראות שקטות, שלרוב גורמות לכך שבקשות רגילות שמופעלות על ידי סקריפט ייכשלו.
שחזור פשוט: אם הגישה נדחתה בעבר, הקשה על הרכיב מפעילה תהליך שחזור מיוחד שמאפשר להפעיל מחדש את המצלמה או המיקרופון באופן מיידי בדף, בלי לנווט בהגדרות הדפדפן מורכבות.
גישה ישירה לסטרימינג: בתור מתווך נתונים, הרכיב חושף את סטרימינג המדיה באופן ישיר. כך מצמצמים את כמות קוד שחוזר על עצמו (boilerplate) שנדרשת לניהול קריאות חוזרות (callback) ומצבי שגיאה באפליקציה.

תכונה	‫`getUserMedia()` JS API	`<usermedia>` רכיב HTML
אירוע שמפעיל את בקשת ההרשאה	הרצת סקריפט ציוויתי (`getUserMedia`)	המשתמש לוחץ על הרכיב שבשליטת הדפדפן
תפקיד בדפדפן	ההנחיה נקבעת על סמך המצב והיוריסטיקה	משמשת כמתווכת נתונים (מנהלת את ההסכמה ואת העברת הנתונים)
האחריות של האתר	קריאה ידנית ל-JavaScript API, טיפול בפונקציות קריאה חוזרת וניהול שגיאות	האזנה לאירוע `stream` וגישה למאפיין `stream`
יעד מרכזי	גישה בסיסית למצלמה ולמיקרופון	גישה חלקה, ניהול הרשאות ושחזור עם פחות חיכוך

הטמעה

שילוב הרכיב דורש הרבה פחות קוד סטנדרטי מאשר ב-JavaScript API מדור קודם. בהתאם לתבנית ההצהרתית שנקבעה על ידי הרכיב <geolocation>, אפשר להוסיף את התג <usermedia> ל-HTML ולהגדיר את דרישות החומרה באמצעות השיטה setConstraints().

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

מאפיינים ותכונות מרכזיים

‫stream: מאפיין לקריאה בלבד שמספק את האובייקט MediaStream אחרי שהמשתמש העניק גישה בהצלחה.
‫setConstraints(): שיטה שמאפשרת למפתחים לעדכן העדפות חומרה, כמו deviceId או רזולוציה, לפני האינטראקציה של המשתמש.
‫error: מאפיין לקריאה בלבד שמחזיר DOMException (לדוגמה, NotAllowedError) אם הבקשה נכשלת או נדחית.
‫onstream: גורם מטפל באירועים שמופעל מיד אחרי שמתקבלים רכיבי המדיה.
‫onerror: גורם מטפל באירועים שמופעל כשניסיון להשגת זרם נכשל.
oncancel: גורם מטפל באירועים שמופעל כשהמשתמש מבטל או סוגר את בקשת ההרשאה במהלך ההצטרפות.

מגבלות על סגנונות

כדי לשמור על אמון המשתמשים ולמנוע דפוסי עיצוב מטעים, חלות על רכיב <usermedia> אותן מגבלות סגנון מחמירות כמו על רכיבי יכולת אחרים:

קריאות: הדפדפן בודק את צבעי הטקסט והרקע כדי לוודא שיש ניגודיות מספקת (לפחות 3:1) כדי שהבקשה תמיד תהיה קריאה. כדי למנוע מצב שבו הרכיב שקוף בצורה מטעה, צריך להגדיר את ערוץ האלפא (opacity) לערך 1.
גודל ומרווח: הדפדפן אוכף גבולות מינימליים ומקסימליים ל-width, ל-height ול-font-size. הוא משבית שוליים שליליים או היסטים של קווי מתאר כדי למנוע הסתרה ויזואלית של הרכיב.
תקינות חזותית: הדפדפן מגביל אפקטים של עיוות. לדוגמה, transform תומך רק בתרגומים דו-ממדיים ובשינוי גודל יחסי.
‫CSS pseudo-classes: הרכיב תומך בסגנון מבוסס-מצב, כמו :granted (שמופעל כשההרשאה פעילה והזרם נרכש), וגם במצבי אינטראקציה רגילים כמו :hover ו-:active.

אסטרטגיה של שיפור הדרגתי והעברה

בהתאם לדפוס העיצוב שנקבע על ידי <geolocation>, האלמנט <usermedia> נועד לפעול בצורה חלקה גם במקרים של ירידה בביצועים. דפדפנים שלא תומכים ברכיב יתייחסו אליו כאל HTMLUnknownElement ויעבדו את רכיבי הצאצא שלו. כך תוכלו לספק חוויית שימוש חלופית לכל המשתמשים.

תבנית חלופית בהתאמה אישית

כדי לזהות באופן אוטומטי תמיכה ברכיב <usermedia> ב-JavaScript:

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

משתמשים בלוגיקת הזיהוי הזו כדי להוסיף לחצן רגיל בתוך רכיב <usermedia> כדי להפעיל את API מדור קודם של getUserMedia():

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

העברה למשתתפים בגרסת מקור לניסיון

למפתחים ששילבו את רכיב <permission> הניסיוני והכללי במהלך תקופת גרסת המקור לניסיון, המעבר אל <usermedia> אמור להיות מינימלי.

עדכון תג: מחליפים את <permission type="camera microphone"> ב-<usermedia> כדי לוודא שכל הבוררים שמטרגטים את הרכיבים הקודמים <permission> יעודכנו לשימוש ברכיב <usermedia> במקום זאת.
זיהוי תכונות: בדיקות עדכון מ-HTMLPermissionElement ל-HTMLUserMediaElement

מה בהמשך

רכיב <usermedia> מטפל בבקשות משולבות של אודיו ווידאו, אבל מפת הדרכים של רכיבי היכולת העתידיים כוללת:

‫<camera>: מתמקד במיוחד בתרחישים של וידאו בלבד.
‫<microphone>: מתמקד בתרחישים של אודיו בלבד.

אפשר לראות איך האלמנטים האלה, שספציפיים ליכולות, עוזרים למפתחים ליצור חוויות מדיה אינטואיטיביות ומהימנות יותר. מידע נוסף זמין במדריך הטכני של רכיבי היכולת.