Ashique's Programming Diary

Monday, March 9, 2020

Take photo from video tag

Take photo from video tag:
-------------------------------------

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Run webcam into video tag</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h5>Playing video and you can take image from it</h5>
    <video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>

    <button onclick="capture()">Capture</button>

    <canvas width="320" height="360" id="PhotoEditS">
      <p>
        <font color="white">This browser does not support the required features. Please try
        <a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home">Internet Explorer 10</a>,
                                                or a current version of
        <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>,
        <a href="http://www.google.com/chrome">Chrome</a>, or
        <a href="http://www.apple.com/safari/">Safari</a>.</font>
      </p>
    </canvas>

    <img id="imageTag" src="" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        // Playing video
        const video = document.getElementById('webCamera');
        startVideo();
        function startVideo(){
            var front = false;
            video.style.width = document.width + 'px';
            video.style.height = document.height + 'px';
            video.setAttribute('autoplay', '');
            video.setAttribute('muted', '');
            video.setAttribute('playsinline', '');
            var constraints = {
                audio: false,
                video: {
                    facingMode: (front ? 'user' : 'environment')
                }
            }
            navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
                video.srcObject = stream;
            });
        }

        function capture(){
            // Take the picture now
            var pcanvas = document.getElementById('PhotoEditS');
            pcanvas.width = video.videoWidth;
            pcanvas.height = video.videoHeight;
            pcanvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

            var canvas      = $('#PhotoEditS')[0];
            var base64img   = canvas.toDataURL("image/png");

            $('#imageTag').attr('src', base64img);
        }
    </script>
</body>
</html>
</body>
</html>

Playing video on html5 video tag

Playing video on html5 video tag:
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Run webcam into video tag</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h5>Playing video and you can take image from it</h5>
    <video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
       // Playing video
       const video = document.getElementById('webCamera');
       startVideo();
       function startVideo() {
            var front = false;
           video.style.width = document.width + 'px';
           video.style.height = document.height + 'px';
           video.setAttribute('autoplay', '');
           video.setAttribute('muted', '');
           video.setAttribute('playsinline', '');
           var constraints = {
               audio: false,
               video: {
                   facingMode: (front? 'user' : 'environment')
               }
           }
           navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
               video.srcObject = stream;
           });
       }
    </script>
</body>
</html>

Monday, February 10, 2020

Grab contact form 7 field data during cf7 form submission

Watch out the code below:

add_action( 'wpcf7_before_send_mail', 'm2sys_action_wpcf7_sent' );

function m2sys_action_wpcf7_sent($args)
{
    global $wpdb, $wp;

    $submission = WPCF7_Submission::get_instance();

    if ( $submission ) {
        $posted_data = $submission->get_posted_data();
    }

    $first_name = isset($posted_data['your-name']) ? $posted_data['your-name'] : 'Name not found';
    $data = 'Your name:' . $first_name;

    update_option( 'cf7_data', $data );
}

Sunday, November 17, 2019

Copy text to clipboard by jQuery

<button class="btn btn-primary copy-full-code">Copy to clipboard</button>

<script>

            jQuery('.copy-full-code').click(function(){

                /* Get the text field */

                var copyText = jQuery("#fcode").text();

                var dummy = document.createElement("textarea");

                document.body.appendChild(dummy);

                dummy.value = copyText;

                dummy.select();

                document.execCommand("copy");

                document.body.removeChild(dummy);

            });

</script>

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>Paste your text here.
</code></pre>
.:Happy Coding:.

Wednesday, October 30, 2019

WordPress posts pagination(numeric)

WordPress posts numeric pagination:
-------------------------------------------------------------------------------------------------------------------
function ashique_all_trending_topics_blog_posts($atts, $content = null) {
global $post;

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$blogs_arg2 = array(
      'posts_per_page'    => -1,
      'post_status'       => 'publish',
      'suppress_filters' => true
);
$blogs_array2 = get_posts($blogs_arg2);
$args = array(
    'posts_per_page'    => 12,
    'orderby'           => 'date',
    'order'             => 'DESC',
    'post_status'       => 'publish',
    'suppress_filters' => true,
    'paged'             => $paged
);
$blogs_array = get_posts($args);
for ($i = 0; $i < count($blogs_array); $i++) {
      //echo "<pre>";
      //print_r($blogs_array[$i]);
}

$output = '';

$output .= '<div id="rp_trending_topics">';

// $posts = get_posts($args);
foreach( $blogs_array as $post ) {
    setup_postdata($post);
    if ( has_post_thumbnail() ) {
      $image_file_url = get_the_post_thumbnail_url();

      $upload_dir = wp_upload_dir();

      $file_name = explode('/', $image_file_url);
      $file_name = end($file_name);

      $data = file_get_contents($image_file_url);

      $new_image = $upload_dir['basedir'] .'/'. 'most-viewd-' . $file_name;
      file_put_contents($new_image, $data);

      $image_size = '300x200';
      $img_temp = explode("x", $image_size);
      $img_width = $img_temp[0];
      $img_height = $img_temp[1];

      $image = wp_get_image_editor( $new_image );
      if ( ! is_wp_error( $image ) ) {
        $image->resize( $img_width, $img_height, true );
        $image->save( $new_image );
      }
      $output .= '<div class="flex_column av_one_fourth"><div class="trending-post-container">';
      $image_tag_html = '<img class="wprp-post-image" src="' . $upload_dir['baseurl'] . '/' . 'most-viewd-' . $file_name . '" alt="" />';
    }
    else {
      $image_tag_html = '<img class="wprp-post-image" src="' . get_stylesheet_directory_uri() . '/images/default-image.jpg" />';
    }

    $num_words='12';
    $more='...';
    $excerpt = get_the_excerpt();
    $excerpt = wp_trim_words( $excerpt, $num_words , $more );

    $output .= '<article class="trending-image-with-content">
    <a class="single-image" href="'.get_the_permalink().'" title="">'.$image_tag_html.'</a>
    <div class="slide-content"><header class="entry-content-header">
    <h3 class="slide-entry-title entry-title" itemprop="headline">
    <a href='.get_the_permalink().' role="link" title="">'.get_the_title().'</a></h3></header>
    </div></article>';
    $output .= '<div class="rp_excerpt">'.$excerpt.'</div>';
    $output .= '<div class="rp_date_and_read_more"><span class="rp_date">'.get_the_date().'</span><a class="rp_read_more" href="'.get_the_permalink().'">Read More</a></div>';
    $output .= '</div></div>';
}

$output .= '</div>';

$big = 999999999; // need an unlikely integer

$count = count($blogs_array2);
$offset = 12;

$max = $count / $offset;
if ( is_float($max) ) {
      $max = (int) $max + 1;
}

$mypagei = paginate_links(
    array(
      'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
      'format' => '?paged=%#%',
      'current' => max(1, get_query_var('paged')),
      'total' => $max,
      'prev_text' => '«',
      'next_text' => '»'
    )
);
if ( $mypagei != '' ) {
    $output .= '<div class="pager">'.$mypagei.'</div>';
}

wp_reset_postdata();
return $output;
}

add_shortcode('ashique_all_trending_topics_blog_post', 'ashique_all_trending_topics_blog_posts');
/************************************* END ***********************************/

Monday, October 28, 2019

PHP script to export mysql database as sql file

PHP script to export mysql database as sql file:
-----------------------------------------------------------

<?php
//Enter your database information here and the name of the backup file
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$user = 'root';
$pass = '';
$host = 'localhost';
$db = 'dbname';
$dbs = [];

$db_conn = mysqli_connect($host, $user, $pass, $db);

$result = mysqli_query( $db_conn, "SHOW DATABASES" );
while ( $row = mysqli_fetch_array($result) ) {
    //echo $row[0]."<br>";
    array_push($dbs, $row[0]);
}

foreach ( $dbs as $value ) {
    $dir = dirname(__FILE__) . '/backupDB' . '/' . $value . '.sql';
    echo "<h3>Backing up database to {$dir}</h3>";
    exec("D:\\xampp1\\mysql\\bin\\mysqldump --user={$user} --password={$pass} --host={$host} {$value} --result-file={$dir} 2>&1", $output);
    var_dump($output);
}

*** Change the above code as per your DB info and put the code file into htdocs and run it.

Wednesday, August 28, 2019

Save image from url to disk and crop it in wordpress

Save image from url to disk and crop it in wordpress:
Follow the below code block to achieve this

$upload_dir = wp_upload_dir();

$file_name = explode('/', $first_image['src']); /* put your image url in this variable $first_image['src'] */
$file_name = end($file_name);

$data = file_get_contents($first_image['src']);

$new_image = $upload_dir['basedir'] .'/'. $file_name;
file_put_contents($new_image, $data);

$image_size = '320x190';
$img_temp = explode("x", $image_size);
$img_width = $img_temp[0];
$img_height = $img_temp[1];

$image = wp_get_image_editor( $new_image );
if ( ! is_wp_error( $image ) ) {
$image->resize( $img_width, $img_height, true );
$image->save( $new_image );
}

$output .= '<div class="wp_rss_retriever_image"><img' . $class . ' src="' . $upload_dir['baseurl'] . '/' . $file_name . '" alt="' . $title . '"></div>';

.:Happy Coding:.