كيفية استخدام getUserMedia ()

الMediaDevicesكائن مكشوف بواسطةnavigator.mediaDevicesيعطيناgetUserMediaطريقة.

تحذير: ملفnavigatorيعرض الكائن أgetUserMedia()الطريقة أيضًا ، والتي قد لا تزال تعمل ولكنها تعملإهمال. تم نقل API داخلmediaDevicesالغرض لأغراض الاتساق.

هذه هي الطريقة التي يمكننا بها استخدام هذه الطريقة.

لنفترض أن لدينا زرًا:

<button>Start streaming</button>

ننتظر حتى ينقر المستخدم على هذا الزر ، وندعوnavigator.mediaDevices.getUserMedia()طريقة.

نقوم بتمرير كائن يصف قيود الوسائط التي نريدها. إذا أردنا إدخال فيديو سوف نتصل

navigator.mediaDevices.getUserMedia({
  video: true
})

يمكننا أن نكون دقيقين للغاية مع تلك القيود:

navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1.333,
    minFrameRate: 60,
    width: 640,
    heigth: 480
  }
})

يمكنك الحصول على قائمة بجميع القيود التي يدعمها الجهاز عن طريق الاتصالnavigator.mediaDevices.getSupportedConstraints().

إذا كنا نريد الصوت فقط يمكننا تمريرهaudio: true:

navigator.mediaDevices.getUserMedia({
  audio: true
})

وإذا أردنا كلاهما:

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
})

تُعيد هذه الطريقة وعدًا ، لذلك سنستخدم غير متزامن / انتظار للحصول على النتيجة في ملفstreamعامل:

document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
})

سيؤدي النقر فوق الزر إلى تشغيل لوحة في المتصفح للسماح بالإذن باستخدام أجهزة الوسائط:

انظر على Codepen:https://codepen.io/flaviocopes/pen/WWyGmr

بمجرد أن ننتهي ، فإنstreamالشيء الذي حصلنا منهgetUserMedia()يمكن استخدامها الآن لأشياء مختلفة. الأكثر إلحاحًا هو عرض دفق الفيديو بتنسيقvideoعنصر في الصفحة:

<button>Start streaming</button> <video autoplay>Start streaming</video>

document.querySelector('button').addEventListener('click', async (e) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
  document.querySelector('video').srcObject = stream
})

انظر على Codepen:https://codepen.io/flaviocopes/pen/wZXzbB

مثال

إليك مثال Codepen يطلب منك الوصول إلى كاميرا الفيديو وتشغيل الفيديو في الصفحة:

انظر القلممثال بسيط WebRTC MediaStreamبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.