اكتشف كيفية استخدام 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بقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.
Tech Wiki Online!