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

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

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

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

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

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

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

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

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

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

در صورتی که کاربران اجازه فعال شدن دوربین را بدهند،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 دریافت خواهد کرد.

پایان

+1

-1