قبل از شروع، لازم به ذکر هست که کد اکسپلور صرفا قصد آموزش دارد و هیچ گونه مسئولیتی در برابر استفاده هایی که از آموزش ها می شود را بر عهده نمی گیرد.
آماده سازی فایل HTML
اول از همه ، فایل html خودمون رو مینویسیم:
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>نمایش دوربین کاربر</title> </head> <body> <h1>نمایش دوربین کاربر</h1> <video id="myVideo" width="640" height="360"></video> <button id="startButton">شروع</button> <button id="stopButton">توقف</button> </body> </html>
اگر html بلد باشید، میدونید که یک سری بخش ها مثل title ، h1 ، meta و … لزومی نداره که باشن، اما اندازه تگ video و id ها رو فراموش نکنین.
یک خبر بخوانید : ویژگی های جدید NodeJS 23.0
یافتن المنت ها و ارسال درخواست استفاده از دوربین
حالا به سراغ جاوااسکریپت می رویم. واضح هست که اول باید دسترسی دوربین رو از کاربر بگیریم ، مثلا شاید پروژه مد نظر شما برای اعمال فیلتر روی تصویر کاربر باشد، پس نیاز دارید که دوربین کاربر رو با اجازه خود کاربر، استفاده کنید. و البته که باید المنت های صفحه html رو هم پیدا بکنیم ، پس این کد رو مینویسیم:
const myVideo = document.getElementById('myVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
})
.catch(function(error) {
console.error("Error accessing the camera:", error);
});
در 3 خط اول ، فقط video و دکمه های توی صفحه html رو پیدا کردیم. بعد از اون ، درخواست استفاده از دوربین رو دادیم (دقت کنید : درخواست استفاده رو دادیم، اما هنوز استفاده ای نکردیم!)، که وقتی کاربر صفحه رو باز میکنه با همچین درخواستی مواجه میشه:
این درخواستی که ارسال میشه ، کار متد getUserMedia هست و در صورت قبولی درخواست ، بهمون یک MediaStream برمیگردونه. که با اون ، درخواست تصویر (یا video) رو دادیم ، اگر قصد دریافت صدا رو هم داشتیم، مینوشتیم : { video: true, audio: true } و دو بخش (then و catch) رو گذاشتیم که اگر درخواست ما رد شد کد ما میره توی بخش catch و توی کنسول ، ارور ما نوشته میشه. اگر هم رد نشد که میریم توی then و ادامه کارمون.
یک مقاله دیگر بخوانید : آموزش تابع CSS Clamp برای طراحی ریسپانسیو
نمایش و توقف دوربین
توی بخشی که برای قبول شدن درخواستمون درست کردیم، این کد رو مینویسیم:
startButton.addEventListener('click', function() {
myVideo.play();
});با استفاده از این کد ، داریم توی اون video توی صفحه html ، دوربین کاربر رو به نمایش میزاریم. و البته یادمون نرفته که دکمه pause هم گذاشته بودیم:
stopButton.addEventListener('click', function() {
myVideo.pause();
});نتیجه گیری
در نهایت ، حالا میتوانید به ادامه ساخت برنامه تان برسید،برنامتون میتونه برنامه تشخیص چهره باشه، برنامه تشخیص اشیاء ، اعمال فیلتر بر چهره، تشخیص هویت و … برنامه شما چیه؟ در ضمن، این کد نهایی هست که به صورت کامل براتون قرار دادیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>نمایش دوربین کاربر</title>
</head>
<body>
<h1>نمایش دوربین کاربر</h1>
<video id="myVideo" width="640" height="360"></video>
<button id="startButton">شروع</button>
<button id="stopButton">توقف</button>
<script>
const myVideo = document.getElementById('myVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
myVideo.srcObject = stream;
})
.catch(function(error) {
console.error("Error accessing the camera:", error);
});
startButton.addEventListener('click', function() {
myVideo.play();
});
stopButton.addEventListener('click', function() {
myVideo.pause();
});
</script>
</body>
</html>
شما قصد دارید از این آموزش ، در چه زمینه ای استفاده کنید؟
