شرح عملي مفصل لوظائف الصور والكاميرا بتنسيق HTML5

أعمل مؤخرًا على تطبيق كاميرا سحابية لتطبيق Chrome. يتضمن التطبيق وظائف أساسية مثل التقاط الصور وتسجيل الفيديو وحفظ الصور ومقاطع الفيديو وتحميل الملفات وما إلى ذلك، والتي تتضمن العديد من واجهات برمجة تطبيقات HTML5 المتعلقة بتدفق الوسائط. الغرض من كتابة هذه المقالة هو، أولاً، تلخيص وفرز نقاط المعرفة، والأهم من ذلك، تقديم بعض الإرشادات للقراء الذين لديهم احتياجات ذات صلة.

ملحوظة: هذه المقالة مبنية على القتال الفعلي ولا تقدم الكثير من المعرفة النظرية.

توفر واجهة برمجة تطبيقات getUserMedia الخاصة بـ HTML5 للمستخدمين واجهة للوصول إلى وسائط الأجهزة (الكاميرا والفيديو والصوت والموقع الجغرافي وما إلى ذلك). واستنادًا إلى هذه الواجهة، يمكن للمطورين الوصول إلى أجهزة وسائط الأجهزة دون الاعتماد على أي مكونات إضافية للمتصفح.

توافق المتصفح كما يلي:

كما ترون من الصورة أعلاه، تتمتع المتصفحات الرئيسية Firefox وChrome وSafari وOpera وما إلى ذلك بالدعم الكامل.

 <معرف الفيديو=تشغيل الفيديو التلقائي></فيديو> --------------------------------------- ----------------------- const videoConstraints = { width: 1366, height: 768 }; const videoNode = document.querySelector('#video'); تيار = انتظار navigator.mediaDevices.getUserMedia({ الصوت: صحيح، الفيديو: videoConstraints }); videoNode.play();

 // enumerateDevices يحصل على جميع أجهزة الوسائط const mediaDevices = انتظار navigator.mediaDevices.enumerateDevices(); // مرشح للحصول على جهاز الكاميرا من خلال إدخال الفيديو الخاص بمثيل الجهاز const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') ||.[]; // احصل على الكاميرا الأمامية const videoDeviceId = videoDevices[0].deviceId; videoConstraints = {deviceId: { بالضبط: videoDeviceId }، العرض: 1366، الارتفاع: 768 }؛ Letstream = انتظار navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // احصل على الكاميرا الخلفية const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { معرف الجهاز: { بالضبط: videoDeviceId }، العرض: 1366، الارتفاع: 768 }؛ Letstream = انتظار navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });

 // التقط دفق الفيديو من خلال اللوحة وقم بإنشاء صورة بتنسيق base64 const Canvas = document.createElement('canvas'); const context = Canvas.getContext('2d'); Canvas.width = 1366; context.drawImage(videoNode, 0, 0, Canvas.width, Canvas.height download(canvas.toDataURL('image/jpeg')); // تنزيل وظيفة الصورة (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date()); .نقر(); }

 دع البث = ينتظر navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // أوقف تشغيل الكاميرا بعد 3 ثوانٍ setTimeout(function () {stream.getTracks().forEach(track => المسار.stop( )) ;

هذا يكمل وظيفة التقاط الكاميرا البسيطة

تتمثل العملية الأساسية للتصوير الفوتوغرافي في تسجيل دفق فيديو وحفظه كملف صوت وفيديو. يوفر كائن HTML5 MediaRecorder وظائف تسجيل الوسائط المتعددة وتسجيل الفيديو.

توافق المتصفح كما يلي:

كما هو موضح في الشكل أعلاه، فإن توافق المتصفح مع MediaRecorder أقل بكثير من getUserMedia، وفي الوقت الحالي، يتمتع Chrome وFirefox فقط بدعم أفضل لـ MediaRecorder.

==ملاحظة: يجب ضبط علامة الفيديو الخاصة بمشغل معاينة الكاميرا على كتم الصوت (للتخلص من الضوضاء القاسية الناتجة عن الصدى)==

 const videoConstraints = { width: 1366, height: 768 }; / سجل دفق البيانات mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // إنشاء مثيل بيانات ثنائية للملف من خلال كائن Blob. Let RecorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; ملف const = ملف جديد([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { النوع: 'فيديو/mp4' }); download(URL.createObjectURL(file)); // تنزيل وظيفة تنزيل الفيديو (src) { if (!src) return; document.createElement('a'); )); a.href = src; a.click(); } }; // إيقاف التسجيل وتشغيل حدث onstop

من خلال التمارين العملية المذكورة أعلاه، أعتقد أن القراء قد أتقنوا وظائف الكاميرا الأساسية، مثل التقاط الصور وتسجيل الفيديو وحفظ الملفات وما إلى ذلك. نظرًا لأن مشروع التطبيق ليس مشروعًا شخصيًا وكود المصدر ليس عامًا، فقد يرغب الأشخاص المهتمون في تجربته.