اجرای یک اپلیکیشن عکس‌برداری با استفاده از جاوا اسکریپت

اپلیکیشن

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

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);

    }
);

ثبت یک عکس

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 وجود ندارد. برای همین از تگ hidden  استفاده شده است. به این علت که فقط برای گرفتن یک فریمِ فیلم از آن استفاده می‌شود.

دانلود عکس

<a id="dlbtn" href="#" download="selfie.png"></a>

استفاده از این صفت باعث می‌شود تا هایپر لینک موجود به یک دکمه‌ی دانلود تبدیل شود. فایل اصلی داخل صفت href  ذخیره می‌شود و چنانچه می‌بینید در ابتدای کار خالی است.
برای بارگذاری عکس اخیری که گرفته شده است، می‌توان از dataURL تصویر استفاده کرد. به قطعه کد زیر توجه کنید:
 

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 نام گذاری شده‌اند.
امیدواریم این اموزش کوتاه به دردتان خورده باشد. در صورتیکه مشکل یا سوالی در این مورد داشته باشید، خوشحال می‌شویم نظرات شما را بخوانیم. 

منبع:
tutorialzine