گرفتن عکس سلفی با جاوا اسکریپت

در این آموزش به شما نشان خواهیم داد که چگونه با استفاده از جاوا اسکریپت اپپلیکیشن عکاسی طراحی کنید که  با استفاده از دوربین گوشی خود عکس بگیرید.   تعدادی از native api را معرفی خواهیم  کرد که با استفاده از آنها قادر به ساختن پروژه بدون هیچ وابستگی خارجی به کتابخانه های دیگر ، فلش و یا جاوا اسکریپت وانیلی نخواهید داشت.

اپپلیکیشن

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

مرور کلی برآنچه که انجام خواهیم داد:

• به ورودی دوربین دسترسی پیدا کرده و با استفاده از API getUserMedia یک stream  ویدیویی بدست می آوریم.
• stream ویدیویی را داخل عنصر video قرار می دهیم.
• زمانی که کاربر عکس می گیرد، فریم ویدیویی فعلی را کپی کرده و  داخل عنصر canvas  قرار می دهیم.
• canvas  را داخل dataURL عنصر image منتقل می کنیم. تا بتواند در صفحه نمایش داده شود و یا بعنوان یک فایل png دانلود شود.

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

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

اگر کاربر اجازه دهد که دوربین را فعال کنید، navigator.getUserMedia در یک callback موفق، یک استریم ویدئویی به ما خواهد داد. این استریم شامل داده ی خام منتشر شده از دوربین می باشد، و باید به منبع رسانه ای قابل استفاده با روش createObjectURL تبدیل شود.

navigator.getUserMedia(

    // Options

    {

        video: true

    },

    // Success Callback

    function(stream){



        // Create an object URL for the video stream and

        // set it as src of our HTLM video element.

        video.src = window.URL.createObjectURL(stream);



        // Play the video element to show the stream to the user.

        video.play();



    },

    // Error Callback

    function(err){



        // Most common errors are PermissionDenied and DevicesNotFound.

        console.error(err);



    }

);

گرفتن عکس

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

function takeSnapshot() {    
    var hidden_canvas = document.querySelector('canvas'),
               video = document.querySelector('video.camera_stream'),
               image = document.querySelector('img.photo'),
             // Get the exact size of the video element.        width = video.videoWidth,        height = video.videoHeight,         // Context object for working with the canvas.        context = hidden_canvas.getContext('2d');     // Set the canvas to the same dimensions as the video.    hidden_canvas.width = width;    hidden_canvas.height = height;     // Draw a copy of the current frame from the video on the canvas.    context.drawImage(video, 0, 0, width, height);     // Get an image dataURL from the canvas.    var imageDataURL = hidden_canvas.toDataURL('image/png');     // Set the dataURL as source of an image element, showing the captured photo.    image.setAttribute('src', imageDataURL);  }

نیازی به مشاهده عنصر canvas در DOM نیست. فقط  از API جاوااسکریپت به عنوان راهی برای ضبط یک لحظه از ویدئو استفاده می کنیم.

دانلود عکس

قطعا ما نمیخواهیم فقط یک عکس سلفی تهیه کنیم، بلکه میخواهیم تصاویر را برای نسل های بعدی ذخیره کرده تا ببینند. آسان ترین راه برای اینکار استفاده از عنصر <a> است.  در html دکمه دانلود به شکل زیر خواهد بود:

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

ویژگی download لینک را به دکمه دانلود تبدیل خواهد کرد. Value  این دکمه نشان دهنده نام پیش فرض فایل دانلود است، فایل واقعی برای دانلود در صفت href ذخیره می شود، که همانطور که می بینید در حال حاضر خالی است.

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

function takeSnapshot() { 
  //...     // Get an image dataURL from the canvas.  
  var imageDataURL = hidden_canvas.toDataURL('image/png');   
  // Set the href attribute of the download button.  
  document.querySelector('#dl-btn').href = imageDataURL;
}

حالا  وقتی کاربر روی دکمه کلیک می کند، باعث خواهدشد فایلی به نام glorious_selfie.png, که حاوی عکس گرفته شده است، دانلود شود.

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