Take Picture From Webcam With HTML 5

HTML5 has a super cool feature, that enables us to access the media installed in our PC. During developing a web app, I surprised with two things, which are already wellknown for most people maybe. But for me they are new and its really good to know.

My app has to take pictures and save them as PDF, but those pictures should not be saved. So first thing, here is my code to take pictures from a web using a webcam.

Here are my sources. Sumber 1 dan Sumber 2

HTML

 
<style>
.videoElement {
 width: 400px;
 height: 275px;
 background-color: #666;
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}
</style>

<video autoplay="true" id="video-webcam" class="videoElement" style="text-align:center">
   Izinkan untuk Mengakses Webcam untuk Demo
</video>


<img id="snapshot" style="width: 400px;height: 275px;">                          

<button onclick="takeSnapshot()"> Take Picture </button>
                            

And here is the JS code:

 
var video = document.querySelector("#video-webcam");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({ video: true }, handleVideo, videoError);
}

function handleVideo(stream) {
    video.srcObject = stream;
    //console.log(stream);
}

function videoError(e) {
    // do something
    alert("Izinkan menggunakan webcam untuk demo!")
}

function takeSnapshot() {
    var img = document.getElementById('snapshot');
    var context;
    var width = video.offsetWidth
            , height = video.offsetHeight;

    canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);

    img.src = canvas.toDataURL('image/png');
    img.style="transform: scaleX(-1);width: 400px;height: 275px";

}

What I learnt from that code are:

1. The display taken from webcam has to be mirrored, as well as the picture taken. I did it with the CSS above.
2. The images, that are taken using canva, are saved in Base64 code. This is super cool, furthermore the HTML tag is able to show an image with source of Base64 code. Super cool.... this feature helps me a lot, because I don't have to save the picture in server. What I did was I took this Base64 code and put them in HTML tag, which the HTML code is later converted to PDF file

Thats all, folks

Transparent Background (Modal Loader)

Quick post. I want to show a loader, that block the whole page and it should not be closeable, while waiting for AJAX response. I use modal and loader image then I set the modal background to transparent.

To do it, I read from this link_1 and link_2.

 
<div class="modal fade" id="loaderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="background-color:rgba(0, 0, 0, 0.0);">
            <div class="modal-body">
                //replace with gif loader image
                <div class="loader dual-loader mx-auto"></div>
                <div class="row">
                    <div class="col-xl-12 col-md-12 col-sm-12 col-12" style="text-align:center; color:black">Loading...</div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript konversi angka ke format rupiah

thanks to faisalman  who provides this incredible javascript. 

Javascript yg membantu kita mengkonversi angka ke format rupiah dan sebaliknya, script yg sangat membantu sekali. Recomended utk di bookmark. Ini linknya

PHP Set session timeout

Quick post. This post will help me to recall how to set a session timeout in PHP someday. Lets cut the explanation what is actually happening behind the scene in PHP for timing out the session. As my other posts, I will put the source where I read this great and helpfull solution. Link. I'd like to thank the dude who wrote that post.

So, I'm still using CodeIgniter and I put this function on my Model for login. So here is my function:

    function session_timeout_check()
    {
        
        $timeout_max = 1800;//timeout after 30 minutes
        $time = $_SERVER['REQUEST_TIME'];

        if(isset($_SESSION['LAST_ACTIVITY']))
        {
            if($time - $_SESSION['LAST_ACTIVITY'] > $timeout_max)
            {
                return 1;
            }
            else
            {
                $_SESSION['LAST_ACTIVITY'] = $_SERVER['REQUEST_TIME'];
                return 0;
            }
        }
        else
        {
            return 1;
        }
    }

I put that function in the constructor of all controller:

    public function __construct()
    {    
        parent::__construct();
        $this->load->model(array("M_login"));
        session_start();
        if($this->M_login->session_timeout_check() == 1)
        {
            //unsetting session variable, destroying session and redirecting to login page
        }
    }

inside the if you can put other conditions to check the session.

so that's all folks.

AJAX in JQuery

Again, it is just a quick post that helps me recall something that I forget easily. Here is the syntax for AJAX in JQuery. I have seen 2 types of AJAX syntax in JQuery, for me this syntax is much easier to understand.

$.ajax({
            type:"POST",
            url:"urlToAjax.php",
            data:{
              "data1":dat,

              "data2":dat2 

            },
            success : function(results) {

              console.log(results)

              //any code if succeed goes here 

            },

            error : function(res){

              console.log(res)

              //any code to generate error report goes here

            }

  });

The code above sends Request using POST.

That's all folks.

Creating JSON data in Javascript

Quick post about how to create JSON data in javascript.
I want to POST some inputs via AJAX but I want send them just in one variable, don't ask me why. I just want to do it that way.

here is my HTML code

<input id="name" type="text">

<input id="phone" type="text">

<input id="address" type="text">

I want send them as JSON data, here is how I do it:

var obj = new Object();
obj.name = document.getElementById('name').value;
obj.phone= document.getElementById('phone').value;
obj.address= document.getElementById('address').value;

var myData = JSON.stringify(obj);

That's it. the variable myData is the json data.

2 Dimensional Array to JSON data in Javascript

Quick posting on how to convert 2 dimensional javascript array to JSON data. Source!

  
var questions = [];
 
 for(i=0;i<3;i++) {
    questions[i] = {};
    questions[i]["question"] = "hey";
    questions[i]["rating"] = "123";
 });


var encoded = JSON.stringify(questions);
console.log(encoded);

Take a look at the third code line! With this way, you send the second array dimension as array object. If you send this data with AJAX to a PHP code, you should put 'true' as the second argument on json_decode php function. It will convert the JSON data into a php array.

  
<?php

$myarray = json_decode(encoded, true);

?>