با جاوااسکریپت سلفی بگیرید!

با جاوااسکریپت سلفی بگیرید!

امروز در این آموزش به شما یاد خواهیم داد تا با استفاده از کدهای جاوااسکریپت و دوربین موبایل،لبتاپ یا کامپیوتر خانگی از خودتان عکس سلفی بیاندازید.ما به شما تعدادی از APIهای عالی را معرفی خواهیم کرد که به ما اجازه می دهند تا پروژه خود را فقط با استفاده از جاوااسکریپت پیاده سازی کنیم(بدون استفاده از فلش یا کتابخانه های دیگر).با ما همراه باشید

برای مشاهده لینک وارد شود

(توجه:برای مشاهده پیش نمایش یک دوربین به سیستم خود وصل نموده و سپس Run را در بالا،سمت چپ صفحه فشار دهید)

نکته:توجه داشته باشید ما از تکنولوژی در این پروژه استفاده کردیم که توسط سافاری(موبایل و دسکتاپ)پشتیبانی نمی شوند.

این پروژه در واقع به کابر نهایی یک نسخه ساده شده از برنامه دوربین موجود در تمام گوشی های هوشمند را ارائه خواهد کرد.این برنامه از سخت افزار دوربین برای گرفتن عکس ها استفاده خواهد کرد.

خوب در زیر یک دید کلی در مورد برنامه به شما می دهیم:

  • ما به ویدئو استریم ارسالی دوربین توسط  API getUserMedia  دسترسی خواهیم داشت.
  • ویدئو استریم در داخل عنصر video مربوط HTML قرار خواهد گرفت.
  • هنگامی که کاربر یک عکس میگیرد،ما فریم مربوط به آن لحظه دوربین را کپی کرده و سپس آن را روی عنصر canvas رسم می کنیم.
  • ما canvas را توسط  dataURL به عکستبدیل کرده و آن را با فرمت PNG برای نمایش یا دریافت توسط کاربر به آن نشان می دهیم.

در زیر ما به بخش های مهم کد اشاره کرده ایم و شما میتوانید با دریافت سورس برنامه از بالای صفحه،کدها را بصورت کامل مشاهده نمایید.

دسترسی به دوربین

جاوااسکریپت برای دسترسی به هر نوع سخت افزار دوربین از متد navigator.getUserMedia استفاده می کند.از آنجایی که این API داده های خصوصی(private) را دستکاری میکند به همین جهت فقط روی ارتباط امن( HTTPS) کار می کند وقبل از کار کردن همیشه اجازه دسترسی را از کاربران می پرسد.

camera-permission

در صورتی که کاربران اجازه فعال شدن دوربین را بدهند،navigator.getUserMedia،ویدئو استریم را از دوربین دریافت می کند(success callback).این ویدئو دریافتی از دوربین برای اینکه برای ما کاربردی باشد باید توسط متد createObjectURL تبدیل بشود.

navigator.getUserMedia(
    // گزینه ها
    {
        video: true
    },
    // Success Callback
    function(stream){

        // ایجاد آبجکت URL برای ویدئو استریم دریافتی و
        // آن را به عنوان src عنصر ویدئو ما تنظیم کند.
        video.src = window.URL.createObjectURL(stream);

        // نمایش ویدئو استریم برای کاربر.
        video.play();
 
    },
    // پیغام خطا
    function(err){

        // خطاهای رایج عبارتند از عدم اجازه دسترسی و پیدا نکردن سخت افزار دوربین.
        console.error(err);

    }
);

گرفتن یک عکس

اکنون ما یک ویدئو استریم در حال پخش داریم، که باید عکسهایی فوری از آن بگیریم.برای انجام اینکار با استفاده از عنصر <canvas>  عکس هایی را از ویدئو در حال پخش گرفته و بصورت تصویر در عنصر <img> ذخیره می کنیم.

function takeSnapshot(){

    var hidden_canvas = document.querySelector('canvas'),
        video = document.querySelector('video.camera_stream'),
        image = document.querySelector('img.photo'),

        // دریافت اندازه دقیق ویدئو.
        width = video.videoWidth,
        height = video.videoHeight,

        // Context object برای کار با  canvas.
        context = hidden_canvas.getContext('2d');


    // تنظیمات مربوط به ابعاد ویدئو
    hidden_canvas.width = width;
    hidden_canvas.height = height;

    // انتقال یک کپی از ویدئو در حال پخش بر رویcanvas.
    context.drawImage(video, 0, 0, width, height);

    // دریافت  dataURL تصویر از canvas.
    var imageDataURL = hidden_canvas.toDataURL('image/png');

    // نمایش تصویر گرفته شده
    image.setAttribute('src', imageDataURL); 

}

عنصر Canvas به تنهایی برای نمایش مورد نیاز نیست. ما تنها از APIهای جاوااسکریپت برای گرفتن عکس لحظه ای از روی ویدئو در حال پخش استفاده می کنیم.

دریافت تصاویر گرفته شده

ما تنها نمیخواهیم تعدادی عکس سلفی از خود بگیریم،بلکه میخواهیم آنها را دریافت کرده و برای خود نگه داریم.برای انجام این کار ازصفت download برای عنصر <a> استفاده خواهیم کرد.

<a id="dl-btn" href="#" download="glorious_selfie.png">Save Photo</a>

صفت  download لینک تولیدی ما را به دکمه دریافت  تبدیل می کند.این صفت نشان دهنده”name”پیش فرض برای فایل قابل دانلود می باشد،فایل واقعی برای دانلود در داخل صفت “href” ذخیره شده است،همانطور که شما در بالا مشاهده می کنید فعلا خالی است.

برای بارگذاری عکس های جدید گرفته شده در داخل آن،ما میتوانیم از dataURL تصاویر که در بخش قبل گفتیم استفاده کنیم:

function takeSnapshot(){

    //...

    // دریافت  dataURL تصاویر از canvas.
    var imageDataURL = hidden_canvas.toDataURL('image/png');

    //  تنظیم صفت hrefبرای دکمه دانلود تصاویر.
    document.querySelector('#dl-btn').href = imageDataURL;
}

اکنون هر کسی روی دکمه کلیک نماید یک فایل با نام glorious_selfie.png دریافت خواهد کرد.

 

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


چهار + 2 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>