Tampilkan postingan dengan label javascript. Tampilkan semua postingan

Cara mengakses kamera webcam dari web dengan javascript / jquery

Selamat malam kali ini admin akan memposting cara mengakses webcam sendiri di browser dengan javascript. disini saya menggunakan node.js, socket.io dan jquery

Pertama-tama buat file package.json dengan isi seperti berikut:
{
       
"name" : "Wcam-Live",
       
"version" : "0.0.1",
       
"dependencies" : {
       
"socket.io" : "*",
       
"express" : "*",
       
"log" : "*"
       
}
}

kemudian ketikan perintah npm install di command promt

selanjutnya buat file app.js dengan isi seperti dibawah:
var express = require("express");

var app = new express();

var http = require("http").Server(app);

var io = require("socket.io")(http);



    var Log = require('log'),

    log = new Log('debug')



    var port = process.env.PORT || 3000;



    app.use(express.static(__dirname + "/public"));



    app.get('/',function(req,res){

    res.redirect('index.html');

    });



    io.on('connection',function(socket){

    socket.on('stream',function(image){

    socket.broadcast.emit('stream',image);

    });

    });



    http.listen(port,function(){

    log.info('server di jalankan pada port %s',port);

    });

kemudian test di browser dengan dengan perintah node app.js

selanjunya buat folder dengan nama public, didalam folder public buat tiga file index.html, emitir.html dan visualizar.html
untuk isi index.html masukan kode dibawah:
<!DOCTYPE html>

<html>

<head>

<title>Webcam-Live</title>

</head>

<body>

<p><a href="emitir.html">Emitir Video</a></p>



<p><a href="visualizar.html">Visualizar web</a></p>

</body>

</html>

kemudian untuk isi emitir.html masukan kode berikut :
<!DOCTYPE html>

<html>

<head>

<title>Emitir Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<video src="" id="video" style="width: 680px;height:320px;" autoplay="true"></video>

<iframe src="visualizar.html" height="400px" width="40%" style="overflow-x: hidden;overflow-y: hidden;"></iframe>



<canvas style="display: none" id="preview"></canvas>

<div id="logger"></div>



<script type="text/javascript">

        var canvas = document.getElementById('preview');

        var context = canvas.getContext("2d");



        canvas.width = 800;

        canvas.height = 600;



        context.width = canvas.width;

        context.height = canvas.height;



        var video = document.getElementById("video");



        var socket = io();



        function logger(msg)

        {

        $("#logger").text(msg);

        }



        function loadCam(stream)

        {

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

        logger('Camera connected [OK]');

        }



        function loadFail()

        {

        logger('Error! Camera not connected');

        }



        function viewVideo()

        {

        context.drawImage(video,0,0,context.width,context.height);

        socket.emit('stream',canvas.toDataURL('image/webp'));

        }



        $(function(){

        navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia);

        if(navigator.getUserMedia){

        navigator.getUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.webkitGetUserMedia){

        navigator.webkitGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.mozGetUserMedia){

        navigator.mozGetUserMedia({video: true},loadCam,loadFail);

        }else if(navigator.msgGetUserMedia){

        navigator.msgGetUserMedia({video: true},loadCam,loadFail);

        }



        setInterval(function(){

        viewVideo(video,context);

        }, 70);

        });

</script>

</body>

</html>

dan untuk isi visualizar.html masukan kode berikut:
<!DOCTYPE html>

<html>

<head>

<title>Visualizar Video</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

</head>

<body>

<img id="play" width="100%">

<div id="logger"></div>



<script type="text/javascript">

        var socket = io();

        socket.on('stream', function(image){

        var img = document.getElementById("play");

        img.src = image;

        $("#logger").text(image);

        });

</script>

</body>

</html>


selanjutnya jalankan aplikasi anda dengan perintah node app.js, akan ada tulisan server dijalankan pada port 3000. selanjunya buka localhost:3000 jika webcam nya tampil di browser seperti pada gambar di bawah berarti anda telah berhasil,


 selanjunya kode ini bisa anda kembangkan untuk membuat aplikasi video call / confrence call. sekian tutorial kali ini semoga bermanfaat, jika artikel ini berguna silakan share ke teman anda, jika ada yang error bisa di tanyakan pada komentar dibawah

cara membuat div slider dengan plugin slick



Kali ini kita akan membuat div slider kalu membuat image slider sudah banyak di internet nah kalo membuat div slider kaya gimana, untuk membuat div slider tidak jauh berbeda dengan membuat image slider kalau image slider yang dibuat slide nya adalah gambar, pada div slider yang dibuat slidernya div berisi paragraph dll.

Untuk membuatnya silakan anda exstrak slicknya kemudian buat file baru dan masukan kode dibawah:


<!DOCTYPE html>

<html>

<head>

  <title>Slick Playground</title>

  <meta charset="UTF-8">

  <link rel="stylesheet" type="text/css" href="./slick/slick.css">

  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">

  <style type="text/css">

    html, body {

      margin: 0;

      padding: 0;

    }



    * {

      box-sizing: border-box;

    }

    section {

      background: transparent;

    }



    .slider {

        width: 50%;

        margin: auto;

    }



    .slick-slide {

      margin: 0px 20px;

    }



    .slick-slide img {

      width: 100%;

    }



    .slick-prev:before,

    .slick-next:before {

        color: black;

    }

    .sm-box {

   width: 184px;

   height: 200px;

   background-color: rgba(0,255,0,0.5);

   padding: 20px;

   float: left;

   display: inline-block;

   margin: auto 5px;

   font-size: 20px;

    }

  </style>

</head>

<body>



  <section class="autoplay slider">

    <div>

      <div class="sm-box">Coba Slide 1</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 2</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 3</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 4</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 5</div>

    </div>

    <div>

      <div class="sm-box">Coba Slide 6</div>

    </div>

  </section>





  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

    $(document).on('ready', function() {

      $('.autoplay').slick({

      slidesToShow: 3,

      slidesToScroll: 1,

      dots: true,

      autoplay: true,

      autoplaySpeed: 2000,

    });

    });

  </script>





</body>

</html>


sekianlah cara membuat div slider dengan menggunakan plugin slick. semoga bermanfaat

Ebook untuk belajar web programming lengkap

Terlepas dari kesibukan saya di dunia kerja kali ini saya akan membagikan beberapa ebook untuk belajar pemrograman web. Menjadi devloper website sangat mengasikan dan untuk memulainya anda bisa mempelajari dari ebook-ebook dibawah ini

1. ebook HTML
HTML kepanjangan dari Hyper Text Markup Language HTML merupakan bahasa pemrograman web yang paling dasar yang harus dikuasai jika anda ingin menjadi pemrogramer web
Download ebook Mastering kode HTML disini

2. ebook CSS
CSS adalah kepanjangan dari Cascading Style Sheet. dengan CSS anda bisa membuat style gaya apapun di website
Download ebook CSS Tutorial disini

3. ebook Javascript
Javascript merupakan bahasa pemrograman yang paling banyak diminati. website tanpa javascript rasanya hambar
Unduh Ebook Latihan Javascript disini

4. ebook PHP
PHP (Hyper Text Preprocessor) Adalah bahasa pemrograman web yang bekerja disisi server (back end) yang paling banyak digunakan di seluruh dunia
Download ebook PHP dasar Tutorial disini

5. ebook jquery
jquery adlah library javascript yang siap pakai. dengan jquery menulis kode javascript menjadi lebih pendek sesuai dengan semboyan nya write less do more
download ebook jquery id disini

6. ebook Code Ingniter
CodeIgniter merupakan framework PHP. dengan code igniter penulisan kode PHP akan lebih seragam karena berkonsep MVC (model view controller)
Download Modul Pelatihan CI disini

7. ebook AJAX
berikut ini ada beberapa ebook tentang AJAX
Download ebook tutorial ajax disini

Beberapa plugin jquery untuk mempercantik tampilan web


Untuk membuat website yang menarik kita membutuhkan beberapa plugin. dengan menggunakan plugin kita akan lebih cepat dan lebih mudah dalam mendevlop web kita, juga lebih powerfull

1. lightbox

  lightbox adalah plugin yang bisa digunakan untuk membuat gallery dan modal image
  lightbox bisa anda dapatkan di sini

2. slick

  slick bisa digunakan untuk membuat image slider selain image slider dengan slick kita bisa juga membuat div   slider. slick bisa anda download di link ini

3. smint

  smint adalah plugin jquery yang bisa dipakai untuk membuat sticky navigation
  smint bisa anda download disini

4. pagify.js

  pagify yaitu plugin jquery yang bisa dipakai untuk membuat website one page, pagify akan menggabungkan beberapa file html  menjadi sebuah halaman dengan metode ajax. pagify.js bisa didownload disini

5. WebCodeCamjs

  dengan plugin webcodecam kita dapat menyecan qrcode melalui webcam. dan dapat menterjemahkan qrcode tersebut. webcodecam bisa di download disini

Cara Membuat Countdown dengan javascript


Hallo Selamat sore sahabat blogger, bertemu lagi dengan saya kali ini saya akan membagikan tutorial cara membuat program hitung mundur "countdown" dengan javascript. aplikasi ini bisa anda aplikasikan untuk menghitung mundur berapa lama lagi tahun baru misalnya, atau menghitung mundur berapa lama lagi hari raya idul fitri.

ini dia kodenya. pertama buat dulu html seperti berikut :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript Countdown</title>

  </head>
  <body>
    <h1>Tahun Baru Akan dimulai dalam waktu</h1>
    <div><span id="days">00</span><br>Hari</div>
    <div><span id="hours">00</span><br>Jam</div>
    <div><span id="minutes">00</span><br>Menit</div>
    <div><span id="seconds">00</span><br>Detik</div>

    <script src="countdown.js"></script>
    <script>
      countdown('12/31/2016 11:59:59 PM', ['days', 'hours', 'minutes', 'seconds'], function() {
        document.write('<h1>Selamat Tahun Baru 2017! Happy New Year</h1>');
      });
    </script>
  </body>
</html>
lalu javascriptnya seperti berikut:

var countdown = function(end, elements, callback) {
  var _second = 1000,
      _minute = _second * 60,
      _hour   = _minute * 60,
      _day    = _hour * 24,

      end = new Date(end),
      timer,

      calculate = function() {

        var now = new Date(),
          remaining = end.getTime() - now.getTime(),
          data;

        if(isNaN(end)) {
          console.log('Invalid date/time');
          return;
        }

        if(remaining <= 0) {
          clearInterval(timer);

          if(typeof callback === 'function') {
            callback();
          }

        }else {
          if(!timer) {
            timer = setInterval(calculate, _second);
          }

          data = {
              'days': Math.floor(remaining / _day),
              'hours': Math.floor((remaining % _day) / _hour),
              'minutes': Math.floor((remaining % _hour) / _minute),
              'seconds': Math.floor((remaining % _minute) / _second)
          }
          if(elements.length) {
            for (x in elements) {
              var x = elements[x];
              data[x] = ('00' + data[x]).slice(-2);
              document.getElementById(x).innerHTML = data[x];
            }
          }
          
        }
      };
    calculate();
}

dan terakhir kode css untuk mempercantik tampilan countdown nya seperti berikut:

      body{
        margin: 200px; auto;
        height: 100%;
        margin-bottom: 250px;
        text-align: center;
        font-family: sans-serif;
        background: url('tahun-baru.jpg') center no-repeat;
        background-size: cover;
      }
      div {
        display: inline-block;
        padding: 5px;
        max-width: 80px;
        max-height: 100px;
        border: 1px solid #ccc;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 2px lightblue, 0 0 25px blue, 0 0 5px lightblue;
        background-color: rgba(255, 255, 255, 0.5);
      }
      #days, #hours, #minutes, #seconds {
        font-size: 40px;
        border-bottom: 1px solid #ccc;
      }
      h1 {
        color: #fff;
      }

ketika waktu mundurnya sudah habis maka countdownnya akan menampilkan teks seperti pada gambar dibawah:



Ok. sekianlah tutorial cara membuat countdown dengan javascript. semoga bermanfaat

cara membuat undangan online sendiri seperti nikah.co.id dengan html, css, dan jquery

Pemirsa ide kreatif bisa muncul dari mana saja, termasuk dalam hal membuat undangan. Membuat undangan berbasis website merupakan cara yang paling bagus, anda sekali buat tinggal sebarkan link undangan anda ke kerabat dan teman anda. disini akan dibahas cara membuat undangan berbasis website sederhana yang mirip dengan http://nikah.co.id. dalam membuat undangan ini saya menggunakan dua buah plugin jQuery yaitu pagify master dan bootstrap carousel.
Pagify master bisa anda download di https://github.com/cmpolis/Pagify dan carousel berada di file bootstrap.min.js jika anda belum mempunyai file bootstrap bisa anda dapatkan di getbootstrap.com. setelah plugin jquery sudah didownload kita buat file index.html isinya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jQuery-2.2.0.min.js" type="text/javascript"></script>
<script src="pagify.js" type="text/javascript"></script>
<script type='text/javascript'>
        $(document).ready(function() {
        $('#page_holder').pagify({
        pages: ['beranda', 'acara', 'lokasi', 'komentar'],
        animation: 'fadeIn',
        'default': 'beranda',
        cache: true        });
        });
</script>
<title>Undangan Online</title>
</head>
<body>
<div id='container'>
<header>
<h2>Undangan Pernikahan</h2><br>
<h1>Romeo & Juliete</h1>
<nav>
<a href='#beranda'>Beranda</a>
<a href='#acara'>Acara</a>
<a href='#lokasi'>Lokasi</a>
<a href='#komentar'>Komentar</a>
</nav>
</header>
<div id='page_holder' />
</div>
<br>
<div class="footer">
        Powered by Juanas Smith - Undangan Pernikahan Online
</div>
</body>
</html>

dan kita buat lagi file beranda.html seperti berikut:

 <link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script> var bootstrapButton = $.fn.button.noConflict()
// return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton// give $().bootstrapBtn the Bootstrap functionality        // Activate Carousel         $("#myCarousel").carousel();
        // Enable Carousel Indicators        $(".item").click(function(){
        $("#myCarousel").carousel(1);
        });
        // Enable Carousel Controls         $(".left").click(function(){
         $("#myCarousel").carousel("prev");
         });
         </script> <br><br> <div id="myCarousel" class="carousel slide" data-ride="carousel">   
<!-- Indicators -->   <ol class="carousel-indicators">  
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>   
<li data-target="#myCarousel" data-slide-to="1"></li>  
<li data-target="#myCarousel" data-slide-to="2"></li>  
<li data-target="#myCarousel" data-slide-to="3"></li>  
</ol> 
<!-- Wrapper for slides -->  
<div class="carousel-inner" role="listbox">   
<div class="item active">      
<img src="idp.jpg" alt="Chania">      
<div class="carousel-caption">    
</div>   
</div>  
<div class="item">   
<img src="bali.jpg" alt="Chania">     
<div class="carousel-caption">
</div>  
</div>    
<div class="item">   
<img src="fix.jpg" alt="Flower">  
<div class="carousel-caption">    
</div>    
</div>     
<div class="item">    
<img src="pre.jpg" alt="Flower">  
<div class="carousel-caption">    
</div>    
</div>  
</div> 

<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">  
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">   
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>   
<span class="sr-only">Next</span>   </a> </div> <br> <div> 
<h1>Love Story</h1>   
<p>Lorem ipsum bla bla bla......</p> 
</div>

lalu kita buat file acara.html seperti berikut:

<h2>Kami yang berbahagia</h2>
<br>
Andi Gunawan<br>
Jhon & Merry<br>
Riana<br>
&<br>
Emily Smith<br>
Eric Scmidth & doe
<br>
Akad nikah

selanjutnya file lokasi.html diisi dengan google map seperti berikut:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.245085518097!2d106.91340081413246!3d-6.231386995489269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698cb445466a11%3A0xb4152126bf059e74!2sJl.+Duren+Sawit+Baru%2C+Duren+Sawit%2C+Kota+Jakarta+Timur%2C+Daerah+Khusus+Ibukota+Jakarta+13440%2C+Indonesia!5e0!3m2!1sen!2s!4v1481449237343"        width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
        dan terakhir kita buat file komentar.html diisi dengan disqus berikut kodenya:
<h2>Buku Tamu</h2>
<!-- disini untuk meletakan kode disqus -->

terakhir tambahkan css untuk mempercantik tampilan undangan berikut adalah kode css nya:

@import url(http://fonts.googleapis.com/css?family=Patrick+Hand);        header {
        width: 100%;
        height: 444px;
        background-image: url(../img/head.png);
    /* color: rgb(255, 255, 255); */        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
        margin: 43px 0px 18px 0px;
        position: relative;
        padding: 0px;
        text-align: center;
        }
        body {
        color: rgb(255, 255, 255);
        background-color: #15b87d;
        background-image: url(../img/bg.png);
        background-position: center;
        background-repeat: repeat;
    /* background-size: 100% 100%; */        padding: 0px;
    /* background-attachment: fixed; */        margin: 0px;
        position: relative;
        font-size: medium;
        text-shadow: 1px 1px 0px rgb(0, 75, 161);
        font-family: "Patrick Hand", cursive, sans-serif, cursive, A, sans-serif;
        }
        .button {
        display: inline-block;
        padding: 5px 10px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #ff00cc;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        }
        .button:hover {background-color: #ff00dd}
        .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
        }
        #mynavbar {
        background-color: rgba(255, 255, 255, 0);
        width: 100%;
        margin-bottom: 30px;
        text-shadow: none;
        color: rgb(247, 109, 109);
    /* top: 0px; */    /* margin: 0px; */    /* position: relative; */    /* margin-top: -62px; */    /* z-index: 333; */    /* position: absolute; */    /* top: 0px; */    /* border-radius: 0px 0px 10px 10px; */    /* border-radius: 10px; */    /* text-align: center; */        font-size: x-large;
    /* border-bottom: solid 2px rgb(148, 255, 253); */        }
        .mempelai h3 {
        margin: 0px;
        }
        .mempelai {
        font-size: x-large;
        border: dashed 4px rgb(6, 147, 237);
        padding: 15px 0px;
        border-radius: 20px;
    /* border-bottom-left-radius: 0px; */    /* border-bottom-right-radius: 0; */    /* border-bottom: solid 5px rgb(242, 80, 121); */    /* width: 50%; */        margin: 15px;
        color: rgb(223, 238, 255);
    /* text-shadow: 2px 2px 5px black; */        background-color: rgba(34, 127, 186, 1);
    /* background: linear-gradient(90deg, #EB3F6B 0, #F5577F 50%, #EB3F6B 100%); *//* W3C */;/* W3C */;
        }
        #lokasi {
        text-align: center;
    /* background-color: rgb(210, 228, 200); */        margin: 0px;
        }
        #lokasi h2 {
    /* padding: 13px 0px; */    /* z-index: 888; */    /* background-color: rgba(240, 41, 41, 1); */    /* border-radius: 10px; */    /* margin: 0px auto; */    /* color: rgb(255, 255, 255); */        }
        #widget_slider ol.carousel-indicators > li {
    /* vertical-align: bottom; */        margin-top: 163px;
    /* position: absolute; */        }
        #mynavbar li a {
    /* margin-bottom: -3px; */    /* display: inline-block; */    /* border-radius: 0px; */    /* height: 12px; */        padding: 0px 8px;
        border-radius: 10px;
        background-color: rgb(223, 238, 255);
        margin: 0px 10px;
        }
        .nav-tabs > li> a, .nav-tabs > li> a {
        box-shadow: none;
        color: inherit;
        }
        #widget_slider .carousel-control {
        background: none;
        z-index: 10;
        }
        footer {
        margin: 30px 0px 0px 0px;
    /* background-color: rgba(0, 0, 0, 0.1); */        padding: 7px;
    /* color: rgb(69, 54, 7); */    /* font-size: small; */    /* text-shadow: none; */        }
        .container {
        text-align: center;
        }
        #mynavbar li.active {
    /* background-color: rgb(255, 255, 255); */    /* color: white; */    /* -webkit-box-shadow: inset 0 -2px 0 #2E90FF; */    /* box-shadow: inset 0 -2px 0 #2E90FF; */    /* border-radius: 0px; */    /* color: black; */        }
        .luar {
    /* overflow: hidden; */    /* background-color: #8ED1FF; */    /* margin: 100px auto; */        width: 100%;
        max-width: 900px;
        padding: 0px;
    /* color: rgb(255, 255, 255); */    /* padding-top: 72px; */        padding-bottom: 30px;
        position: relative;
    /* border: solid 10px rgba(255, 255, 255, 0.55); */    /* border-radius: 10px; */    /* box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.82); */        }
        .tab-content {
    /* font-family: sans-serif, verdana, cursive, sans-serif; */    /* color: rgb(0, 119, 255); */        font-size: x-large;
    /* background-color: rgb(31, 31, 31); */        margin: 0px;
        padding: 6px 30px;
        }
        header h1 {
        padding-top: 344px;
        left: auto;
        margin: 0px;
        color: rgb(223, 238, 255);
        text-align: center;
        }
        #widget_slider {
        position: relative;
        z-index: 1;
        overflow: hidden;
        }
        .carousel-inner {
        overflow: hidden;
        position: relative;
        }
        a {
        color: rgb(255, 194, 0);
        }
@media screen and (max-width: 450px) {
        #mynavbar {
        font-size: medium;
        }
        header h1{
        padding-top: 161px;
        }
        .tab-content
        {
        font-size: medium;
        }
        header
        {
        height: 235px;
    }
}

simpan kode css diatas dengan nama thema.css
Ok seperti itu tutorial yang bisa saya berikan, terimakasih. jikabermanfaat silakan share ke teman anda