Tensor Flow on the browser with Pose and Hand tracking by Web Development

<!DOCTYPE html>     <html lang="en-US" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5, minimum-scale=0.5"> <title>Tensor Flow on the browser with Pose and Hand tracking by Web Development</title> <link rel="profile" href="https://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="https://www.webdigi.co.uk/blog/wp-content/themes/svbtle/style.css" /> <link rel="pingback" href="https://www.webdigi.co.uk/blog/xmlrpc.php" /> <link rel="shortcut icon" href="/favicon.ico" />  <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3659733-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <style>blockquote {border-color: #0099A1;}figure.logo, aside.alsoby li a:hover, aside.kudo.complete span.circle {background-color: #0099A1;}section.preview header#begin h2,ul#user_meta a:hover,nav.pagination span.next a,nav.pagination span.prev a {color: #0099A1;}ul#user_meta a:hover,nav.pagination span.next a,nav.pagination span.prev a {border-color: #0099A1;}::-moz-selection { background: #0099A1; color: #fff; text-shadow: none;}::selection { background: #0099A1; color: #fff; text-shadow: none;} </style> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.webdigi.co.uk\/blog\/wp-includes\/js\/wp-emoji-release.min.js"}}; !function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wordpress-popular-posts-css' href='https://www.webdigi.co.uk/blog/wp-content/plugins/wordpress-popular-posts/style/wpp.css' type='text/css' media='all' /> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/jquery/jquery.js'></script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/jquery/jquery-migrate.min.js'></script> <link rel='https://api.w.org/' href='https://www.webdigi.co.uk/blog/wp-json/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.webdigi.co.uk/blog/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.webdigi.co.uk/blog/wp-includes/wlwmanifest.xml" /> <link rel="canonical" href="https://www.webdigi.co.uk/blog/2020/tensor-flow-on-the-browser-with-pose-and-hand-tracking/" /> <link rel='shortlink' href='https://www.webdigi.co.uk/blog/?p=1324' /> <link rel="alternate" type="application/json+oembed" href="https://www.webdigi.co.uk/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://www.webdigi.co.uk/blog/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F&format=xml" /> <script src="https://www.webdigi.co.uk/blog/wp-content/plugins/air-badge/swfobject.js" type="text/javascript"></script>  <script type="text/javascript">//<![CDATA[ var sampling_active = 0; var sampling_rate = 100; var do_request = false; if ( !sampling_active ) { do_request = true; } else { var num = Math.floor(Math.random() * sampling_rate) + 1; do_request = ( 1 === num ); } if ( do_request ) { // Create XMLHttpRequest object and set variables var xhr = ( window.XMLHttpRequest ) ? new XMLHttpRequest() : new ActiveXObject( "Microsoft.XMLHTTP" ), url = 'https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php', params = 'action=update_views_ajax&token=e8946af186&id=1324'; // Set request method and target URL xhr.open( "POST", url, true ); // Set request header xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" ); // Hook into onreadystatechange xhr.onreadystatechange = function() { if ( 4 === xhr.readyState && 200 === xhr.status ) { if ( window.console && window.console.log ) { window.console.log( xhr.responseText ); } } }; // Send request xhr.send( params ); } //]]></script>  <style type="text/css"> figure.logo a, aside#logo div a, aside.kudo.complete span.circle{background-image: url(https://www.webdigi.co.uk/blog/wp-content/uploads/2013/09/logo1.png);} </style><style type="text/css" id="syntaxhighlighteranchor"></style> </head> <body class="post-template-default single single-post postid-1324 single-format-standard"> <header id="sidebar"> <figure class="logo medium"> <a href="https://www.webdigi.co.uk/">Web Development</a> </figure> <h1><a href="https://www.webdigi.co.uk/">Web Development</a></h1> <h2><a href="https://www.webdigi.co.uk/blog/"></a></h2> <h3>Thoughts from London, UK</h3> <ul id="user_nav"> <div class="menu"><ul> <li class="page_item page-item-2"><a href="https://www.webdigi.co.uk/blog/about/">About</a></li> <li class="page_item page-item-392 page_item_has_children"><a href="https://www.webdigi.co.uk/blog/apps/">Apps</a></li> </ul></div> </ul> </header> <section id="river" role="main"> <header id="begin"> <time datetime="2025-02-16" id="top_time">July 14, 2020</time> <style type='text/css'> #also-read-title { font-weight: 600; color: #777; padding: 20px 40px; margin: 0px; font-style: italic; border-top: 1px solid #E2E2E2; max-width: none; font-size: 18px; } #also-read-items { margin: 0px; } #also-read-items li { position: relative; margin: 0px; border-top: 1px solid #E2E2E2; color: #777; } #also-read-items a { display: block; padding-top: 20px; padding-bottom: 20px; color: inherit; } #also-read-items a:visited { color: #333; text-decoration: none; outline: 0; } #also-read-items h3 { margin: 0px; font-size: 16px; line-height: 18px; padding-left: 90px; color: inherit; font-weight: 600; } #also-read-items .link_kudo { padding: 0px; border: 3px solid #777; width: 30px; border-radius: 35px; margin: 0px; text-align: center; line-height: 31px; font-weight: 700; color: inherit; position: absolute; left: 40px; top: 50%; margin-top: -18px; font-size: 13px; letter-spacing: 0px; } </style> </header> <article id="1324" class="post"> <h2 class="entry-title"> <a href="https://www.webdigi.co.uk/blog/2020/tensor-flow-on-the-browser-with-pose-and-hand-tracking/" class="no-link" title="Permalink to Tensor Flow on the browser with Pose and Hand tracking" rel="bookmark">Tensor Flow on the browser with Pose and Hand tracking</a> </h2> <div class="entry-content"> <p>Machine learning and AI have come a long way over the last decade. We are able to run powerful machine learning algorithms right on the browser. Incredibly this even works on browsers of mobile devices like iPhones and Android devices. This can lead to interesting applications: Multi-factor authentication, Captcha systems, Login & many others.</p> <p>We have two great demos put together with Machine Learning libraries on the browser.</p> <p><strong>Hand tracking</strong></p> <div style="width: 323px" class="wp-caption alignnone"><a href="https://www.webdigi.co.uk/demos/login-with-the-vulcan-handsalute"><img class="size-medium" src="https://www.webdigi.co.uk/demos/32.png" width="313" height="367" /></a><p class="wp-caption-text">Vulcan hand salute to login</p></div> <p><strong>Pose Tracking</strong></p> <p><a href="https://www.webdigi.co.uk/demos/pose-detection-and-matching"><img class="alignnone wp-image-1332 size-full" src="https://www.webdigi.co.uk/blog/wp-content/uploads/2020/07/PoseNet-1.png" alt="" width="600" height="400" /></a></p> <p>Once you click on any of the two pictures, you will be taken to the demo. Please try them out and let us know what you think.</p> </div> <aside class="kudo kudoable" id="1324"> <a href="https://www.webdigi.co.uk/blog/2020/tensor-flow-on-the-browser-with-pose-and-hand-tracking/#comments" class="counter"> <span class="num">0</span> <span class="txt">Comments</span> </a>  <style> ol.unstyled, ul.unstyled { list-style: none outside none; margin: 0; } menu, ol, ul { margin-left: 25px; padding: 0; } ol, ul { list-style-position: inside; } .social__item { float: left; width: 25%; } .u-h, .article__head .commentcount__label, .h { border: 0 none !important; clip: rect(0px, 0px, 0px, 0px) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .svg-i-share-email, .svg .i-share-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMS44NTIsMTMuODUxIDIxLjUyLDEzLjQzOCAxNi4xNywxNS45MDQgMTAuNzUxLDEzLjQzOCAxMC41LDEzLjg1IDE2LjE2MywxOC4zODQiLz48cGF0aCBkPSJNMjIuOTg5IDkuNTIxbC0xNC4wNDItLjAyMS0xLjQ0NyAyLjMxMnY4LjU3OWwxLjUyNCAxLjEwOWgxNC4wMjFsMS40NTUtMS4xMDh2LTguNThsLTEuNTExLTIuMjkxem0tLjQ4OSA5Ljk3OWgtMTN2LThoMTN2OHoiLz48L2c+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, .from-content-api blockquote.quoted:before { background-repeat: no-repeat; display: inline-block; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .svg-i-share-facebook-hover, .svg .i-share-facebook-hover, .svg .social__action--facebook:hover .social__icon, .social__action--facebook:hover .svg .social__icon, .svg .social__action--facebook:focus .social__icon, .social__action--facebook:focus .svg .social__icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIGZpbGw9IiM3Njc2NzYiIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTkuNDA2IDE2LjQ3NmgtM3Y4LjAyNGgtMi45MDZ2LTguMDI0aC0ydi0yLjg5MWgydi0yLjQ2OWMwLTEuOTM4IDEuMTA1LTMuNzIgMy45OTYtMy43MiAxLjE2OCAwIDIuMDMxLjExMyAyLjAzMS4xMTNsLS4wNjggMi45OThzLS44ODMtLjAwNy0xLjg0NC0uMDA3Yy0xLjA0MSAwLTEuMjA5LjQ4LTEuMjA5IDEuMjc3djEuODA5aDMuMTM3bC0uMTM3IDIuODl6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .svg-i-share-facebook, .svg .i-share-facebook { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBhdGggZD0iTTE5LjQwNiAxNi40NzZoLTN2OC4wMjRoLTIuOTA2di04LjAyNGgtMnYtMi44OTFoMnYtMi40NjljMC0xLjkzOCAxLjEwNS0zLjcyIDMuOTk2LTMuNzIgMS4xNjggMCAyLjAzMS4xMTMgMi4wMzEuMTEzbC0uMDY4IDIuOTk4cy0uODgzLS4wMDctMS44NDQtLjAwN2MtMS4wNDEgMC0xLjIwOS40OC0xLjIwOSAxLjI3N3YxLjgwOWgzLjEzN2wtLjEzNyAyLjg5eiIvPjwvZz48L3N2Zz4="); background-position: 0 0; background-repeat: no-repeat; } .i, .caption:before, figcaption:before, blockquote.quoted:before { background-image: url("/blog/wp-content/themes/svbtle/images/sprite.ad04bf66e207c99388fec7669ddb6fb9.png"); } .i-share-facebook { background-position: -45px -133px; height: 36px; width: 36px; } .svg-i-share-twitter, .svg .i-share-twitter { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxwYXRoIHN0cm9rZT0iIzc2NzY3NiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMTYuMDU5LTFjLTkuMzkgMC0xNyA3LjYxLTE3IDE3IDAgOS4zODkgNy42MTEgMTYuOTk5IDE3IDE2Ljk5OSA5LjM5IDAgMTctNy42MDggMTctMTYuOTk5IDAtOS4zOS03LjYwOS0xNy0xNy0xN3oiIGZpbGw9Im5vbmUiLz48cGF0aCBmaWxsPSIjNzY3Njc2IiBkPSJNMjMuNjUyIDEyLjAyM2wuMDEyLjQ2MmMwIDQuNzItMy41OSAxMC4xNjItMTAuMTYgMTAuMTYyLTIuMDE4IDAtMy44OTMtLjU5MS01LjQ3OC0xLjYwNi4yNzkuMDM1LjU2NC4wNS44NTEuMDUgMS42NzYgMCAzLjIxNC0uNTcxIDQuNDM2LTEuNTMxLTEuNTYyLS4wMjUtMi44ODEtMS4wNTgtMy4zMzItMi40NzQuMjE2LjA0MS40NDMuMDYyLjY3LjA2Mi4zMjcgMCAuNjQzLS4wNDMuOTQtLjEyMi0xLjYzNy0uMzI4LTIuODY1LTEuNzczLTIuODY1LTMuNTA2di0uMDQzYy40ODMuMjY3IDEuMDM2LjQyOCAxLjYxNy40NDYtLjk1Ni0uNjM5LTEuNTktMS43MzMtMS41OS0yLjk3MiAwLS42NTQuMTgtMS4yNjguNDg0LTEuNzk3IDEuNzYzIDIuMTYyIDQuMzkzIDMuNTgyIDcuMzYzIDMuNzM0LS4wNjEtLjI2Mi0uMDkxLS41MzYtLjA5MS0uODE0IDAtMS45NzIgMS41OTUtMy41NzEgMy41NzMtMy41NzEgMS4wMjYgMCAxLjk1Ni40MzQgMi42MDggMS4xMjkuODEyLS4xNjEgMS41NzctLjQ1OCAyLjI2OC0uODY4LS4yNjcuODM0LS44MzMgMS41MzUtMS41NyAxLjk3Ny43MjQtLjA4NSAxLjQxMS0uMjc5IDIuMDUxLS41NjMtLjQ4My43MTMtMS4wODggMS4zNDMtMS43ODcgMS44NDV6Ii8+PC9zdmc+"); background-position: 0 0; background-repeat: no-repeat; } .i-share-twitter { background-position: -193px -133px; height: 36px; width: 36px; } .svg-i-share-gplus, .svg .i-share-gplus { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iLTIgLTIgMzYgMzYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTIgLTIgMzYgMzYiPjxnIGZpbGw9IiM3Njc2NzYiPjxwYXRoIGQ9Ik0xNi4wNTkgMzMuNDk5Yy05LjY1IDAtMTcuNS03Ljg1LTE3LjUtMTcuNDk5czcuODUxLTE3LjUgMTcuNS0xNy41YzkuNjQ5IDAgMTcuNSA3Ljg1MSAxNy41IDE3LjVzLTcuODUxIDE3LjQ5OS0xNy41IDE3LjQ5OXptMC0zMy45OTljLTkuMDk5IDAtMTYuNSA3LjQwMi0xNi41IDE2LjUgMCA5LjA5OCA3LjQwMiAxNi40OTkgMTYuNSAxNi40OTkgOS4wOTggMCAxNi41LTcuNDAxIDE2LjUtMTYuNDk5IDAtOS4wOTgtNy40MDItMTYuNS0xNi41LTE2LjV6Ii8+PHBvbHlnb24gcG9pbnRzPSIyMy41LDExLjQyMSAyMy41LDguMTc2IDIyLjM5MSw4LjE3NiAyMi4zOTEsMTEuNDIxIDE5LjA2NCwxMS40MjEgMTkuMDY0LDEyLjUzIDIyLjM5MSwxMi41MyAyMi4zOTEsMTUuODU4IDIzLjUsMTUuODU4IDIzLjUsMTIuNTMgMjYuODI4LDEyLjUzIDI2LjgyOCwxMS40MjEiLz48cGF0aCBkPSJNMTguMTcyIDguMTc2aC00LjU4NXMtNC42NDYuMTE0LTQuNjQ2IDQuMDQ1YzAgMy45MzIgNC4wNiAzLjQ3NiA0LjA2IDMuNDc2di45OTdjMCAuNDA0LjU0My4yNzEuNjEyIDEuMDgzLS4yNzUgMC01LjY0Mi0uMTQxLTUuNjQyIDMuNDIxIDAgMy41NiA0LjczMSAzLjM5NCA0LjczMSAzLjM5NHM1LjQ2OS4yNDggNS40NjktNC4xNzZjMC0yLjY1MS0zLjEyMi0zLjUwNS0zLjEyMi00LjU3NHMyLjM1NC0xLjM3OCAyLjM1NC0zLjg5YzAtMS41MDctLjEzOS0yLjQxNi0xLjMyNi0yLjk1MS4wMDEtLjM3NCAyLjA5NS0uMTI3IDIuMDk1LS44MjV6bS0xLjQ3NSAxMi41NDNjLjA5NCAxLjM4MS0xLjM2NCAyLjYwNC0zLjI1OCAyLjczMi0xLjg5My4xMy0zLjUwMy0uODg2LTMuNTk3LTIuMjY2LS4wOTQtMS4zODEgMS4zNjQtMi42MDQgMy4yNTctMi43MzQgMS44OTQtLjEyOCAzLjUwNS44ODcgMy41OTggMi4yNjh6bS0yLjc4OS01Ljk2NGMtMS4xMjcuMzA2LTIuMzg5LS43MjUtMi44MTgtMi4zMDUtLjQzLTEuNTc5LjEzNi0zLjEwNyAxLjI2NC0zLjQxNCAxLjEyNy0uMzA3IDIuMzg5LjcyNSAyLjgxOCAyLjMwNC40MyAxLjU4LS4xMzYgMy4xMDgtMS4yNjQgMy40MTV6Ii8+PC9nPjwvc3ZnPg=="); background-position: 0 0; background-repeat: no-repeat; } .i-share-email-hover, .social__action--email:hover .social__icon, .social__action--email:focus .social__icon { background-position: -485px -96px; height: 36px; width: 36px; } .i-share-email { background-position: -522px -96px; height: 36px; width: 36px; } .i-share-facebook-hover, .social__action--facebook:hover .social__icon, .social__action--facebook:focus .social__icon { background-position: -8px -133px; height: 36px; width: 36px; } .i-share-gplus-hover, .social__action--gplus:hover .social__icon, .social__action--gplus:focus .social__icon { background-position: -82px -133px; height: 36px; width: 36px; } .i-share-gplus { background-position: -119px -133px; height: 36px; width: 36px; } .i-share-twitter-hover, .social__action--twitter:hover .social__icon, .social__action--twitter:focus .social__icon { background-position: -156px -133px; height: 36px; width: 36px; } article.post ul { list-style-type: none !important; } article h2 { padding-right: 41px !important; } article a { border-bottom: medium none !important; text-decoration: none; } </style> <div class="u-table" style="width: 190px !important; text-align: center !important; float:none; margin:0 auto;"> <div class="u-table__row"> <div class="u-table__cell u-table__cell--top">  <ul class="social unstyled" data-link-name="next to content"> <li class="social__item"> <a class="social__action social__action--email" href="mailto:?subject=Tensor%20Flow%20on%20the%20browser%20with%20Pose%20and%20Hand%20tracking&body=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-mail"> <span class="u-h">Share via Email</span> <i class="i-share-email i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--facebook" href="https://www.facebook.com/dialog/feed?app_id=233515738446&redirect_uri=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F&link=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-fb"> <span class="u-h">Share on Facebook</span> <i class="i-share-facebook i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--twitter" href="https://twitter.com/intent/tweet?text=Tensor%20Flow%20on%20the%20browser%20with%20Pose%20and%20Hand%20tracking&url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-twitter"> <span class="u-h">Share on Twitter</span> <i class="i-share-twitter i social__icon"></i> </a> </li> <li class="social__item"> <a class="social__action social__action--gplus" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.webdigi.co.uk%2Fblog%2F2020%2Ftensor-flow-on-the-browser-with-pose-and-hand-tracking%2F" data-link-name="social-gplus"> <span class="u-h">Share on Google+</span> <i class="i-share-gplus i social__icon"></i> </a> </li> </ul> </div> </div> </div>  </aside> </article> <div> <h2 id='also-read-title'>Also read...</h2> <ul id='also-read-items'> <li> <a href="https://www.webdigi.co.uk/blog/2009/how-to-check-if-an-email-address-exists-without-sending-an-email/"> <h3>How to check if an email address exists without sending an email?</h3> <p class="link_kudo">113</p> </a> </li> <li> <a href="https://www.webdigi.co.uk/blog/2013/a-single-kill-switch-for-90-of-the-top-ten-websites/"> <h3>A single kill switch for 90% of the top ten websites</h3> <p class="link_kudo">1</p> </a> </li> <li> <a href="https://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/"> <h3>Using a mobile device to control a game on your browser</h3> <p class="link_kudo">27</p> </a> </li> <li> <a href="https://www.webdigi.co.uk/blog/2012/cool-new-stuff-in-php-5-4/"> <h3>Cool new stuff in PHP 5.4</h3> <p class="link_kudo">2</p> </a> </li> <li> <a href="https://www.webdigi.co.uk/blog/2010/google-analytics-for-facebook-fan-pages/"> <h3>Google Analytics for Facebook Fan Pages</h3> <p class="link_kudo">408</p> </a> </li> </ul> </div> <p class="nocomments">Comments are closed.</p> <nav class="pagination"> <span class="prev"> <a href="https://www.webdigi.co.uk/blog/" class="back_to_blog">←   read more</a> </span> </nav> </section> <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> function getKudos() { var e = new Array; return $("aside.kudo").each(function(t) { article = $(this).closest("article").attr("id"), e.push(article) }), $.post("https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php", { kudosList: e, action:'my_special_action' }, function(e) { $.each(e, function(e, t) { var n = $("#" + t.external_id).find("span.num"), r = n.text().replace(/,/g, ""), i = t.kudos; isNaN(r) && (r = 0), isNaN(i) && (i = 9e6), i - r >= 0 && (i = i.toString(), i = i.replace(/\B(?=(\d{3})+(?!\d))/g, ","), n.html(i)) }) }), !0 } function setViewport() { $(window).width() < 900 && $("html,body").animate({ scrollLeft: 180 }, 800) } function startCode() { $("code").addClass("prettyprint"), $.getScript("https://www.webdigi.co.uk/blog/wp-content/themes/svbtle/js/prettify.js").done(function(e, t) { var n = "https://www.webdigi.co.uk/blog/wp-content/themes/svbtle/css/prettify.css"; $.get(n, function(e) { $('<style type="text/css"></style>').html(e).appendTo("head") }), prettyPrint(); }) } (function(e, t) { var n; e.rails = n = { linkClickSelector: "a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]", inputChangeSelector: "select[data-remote], input[data-remote], textarea[data-remote]", formSubmitSelector: "form", formInputClickSelector: "form input[type=submit], form input[type=image], form button[type=submit], form button:not(button[type])", disableSelector: "input[data-disable-with], button[data-disable-with], textarea[data-disable-with]", enableSelector: "input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled", requiredInputSelector: "input[name][required]:not([disabled]),textarea[name][required]:not([disabled])", fileInputSelector: "input:file", linkDisableSelector: "a[data-disable-with]", CSRFProtection: function(t) { var n = e('meta[name="csrf-token"]').attr("content"); n && t.setRequestHeader("X-CSRF-Token", n) }, fire: function(t, n, r) { var i = e.Event(n); return t.trigger(i, r), i.result !== !1 }, confirm: function(e) { return confirm(e) }, ajax: function(t) { return e.ajax(t) }, href: function(e) { return e.attr("href") }, handleRemote: function(r) { var i, s, o, u, a, f; if (n.fire(r, "ajax:before")) { u = r.data("cross-domain") || null, a = r.data("type") || e.ajaxSettings && e.ajaxSettings.dataType; if (r.is("form")) { i = r.attr("method"), s = r.attr("action"), o = r.serializeArray(); var l = r.data("ujs:submit-button"); l && (o.push(l), r.data("ujs:submit-button", null)) } else r.is(n.inputChangeSelector) ? (i = r.data("method"), s = r.data("url"), o = r.serialize(), r.data("params") && (o = o + "&" + r.data("params"))) : (i = r.data("method"), s = n.href(r), o = r.data("params") || null); return f = { type: i || "GET", data: o, dataType: a, crossDomain: u, beforeSend: function(e, i) { return i.dataType === t && e.setRequestHeader("accept", "*/*;q=0.5, " + i.accepts.script), n.fire(r, "ajax:beforeSend", [e, i]) }, success: function(e, t, n) { r.trigger("ajax:success", [e, t, n]) }, complete: function(e, t) { r.trigger("ajax:complete", [e, t]) }, error: function(e, t, n) { r.trigger("ajax:error", [e, t, n]) } }, s && (f.url = s), n.ajax(f) } return ! 1 }, handleMethod: function(r) { var i = n.href(r), s = r.data("method"), o = r.attr("target"), u = e("meta[name=csrf-token]").attr("content"), a = e("meta[name=csrf-param]").attr("content"), f = e('<form method="post" action="' + i + '"></form>'), l = '<input name="_method" value="' + s + '" type="hidden" />'; a !== t && u !== t && (l += '<input name="' + a + '" value="' + u + '" type="hidden" />'), o && f.attr("target", o), f.hide().append(l).appendTo("body"), f.submit() }, disableFormElements: function(t) { t.find(n.disableSelector).each(function() { var t = e(this), n = t.is("button") ? "html": "val"; t.data("ujs:enable-with", t[n]()), t[n](t.data("disable-with")), t.prop("disabled", !0) }) }, enableFormElements: function(t) { t.find(n.enableSelector).each(function() { var t = e(this), n = t.is("button") ? "html": "val"; t.data("ujs:enable-with") && t[n](t.data("ujs:enable-with")), t.prop("disabled", !1) }) }, allowAction: function(e) { var t = e.data("confirm"), r = !1, i; return t ? (n.fire(e, "confirm") && (r = n.confirm(t), i = n.fire(e, "confirm:complete", [r])), r && i) : !0 }, blankInputs: function(t, n, r) { var i = e(), s, o = n || "input,textarea"; return t.find(o).each(function() { s = e(this); if (r ? s.val() : !s.val()) i = i.add(s) }), i.length ? i: !1 }, nonBlankInputs: function(e, t) { return n.blankInputs(e, t, !0) }, stopEverything: function(t) { return e(t.target).trigger("ujs:everythingStopped"), t.stopImmediatePropagation(), !1 }, callFormSubmitBindings: function(n, r) { var i = n.data("events"), s = !0; return i !== t && i.submit !== t && e.each(i.submit, function(e, t) { if (typeof t.handler == "function") return s = t.handler(r) }), s }, disableElement: function(e) { e.data("ujs:enable-with", e.html()), e.html(e.data("disable-with")), e.bind("click.railsDisable", function(e) { return n.stopEverything(e) }) }, enableElement: function(e) { e.data("ujs:enable-with") !== t && (e.html(e.data("ujs:enable-with")), e.data("ujs:enable-with", !1)), e.unbind("click.railsDisable") } }, e.ajaxPrefilter(function(e, t, r) { e.crossDomain //|| n.CSRFProtection(r) }), e(document).delegate(n.linkDisableSelector, "ajax:complete", function() { n.enableElement(e(this)) }), e(document).delegate(n.linkClickSelector, "click.rails", function(r) { var i = e(this), s = i.data("method"), o = i.data("params"); if (!n.allowAction(i)) return n.stopEverything(r); i.is(n.linkDisableSelector) && n.disableElement(i); if (i.data("remote") !== t) return (r.metaKey || r.ctrlKey) && (!s || s === "GET") && !o ? !0: (n.handleRemote(i) === !1 && n.enableElement(i), !1); if (i.data("method")) return n.handleMethod(i), !1 }), e(document).delegate(n.inputChangeSelector, "change.rails", function(t) { var r = e(this); return n.allowAction(r) ? (n.handleRemote(r), !1) : n.stopEverything(t) }), e(document).delegate(n.formSubmitSelector, "submit.rails", function(r) { var i = e(this), s = i.data("remote") !== t, o = n.blankInputs(i, n.requiredInputSelector), u = n.nonBlankInputs(i, n.fileInputSelector); if (!n.allowAction(i)) return n.stopEverything(r); if (o && i.attr("novalidate") == t && n.fire(i, "ajax:aborted:required", [o])) return n.stopEverything(r); if (s) return u ? n.fire(i, "ajax:aborted:file", [u]) : !e.support.submitBubbles && e().jquery < "1.7" && n.callFormSubmitBindings(i, r) === !1 ? n.stopEverything(r) : (n.handleRemote(i), !1); setTimeout(function() { n.disableFormElements(i) }, 13) }), e(document).delegate(n.formInputClickSelector, "click.rails", function(t) { var r = e(this); if (!n.allowAction(r)) return n.stopEverything(t); var i = r.attr("name"), s = i ? { name: i, value: r.val() }: null; r.closest("form").data("ujs:submit-button", s) }), e(document).delegate(n.formSubmitSelector, "ajax:beforeSend.rails", function(t) { this == t.target && n.disableFormElements(e(this)) }), e(document).delegate(n.formSubmitSelector, "ajax:complete.rails", function(t) { this == t.target && n.enableFormElements(e(this)) }) })(jQuery), function(e) { function t() { if (o.jStorage) try { s = l("" + o.jStorage) } catch(e) { o.jStorage = "{}" } else o.jStorage = "{}"; a = o.jStorage ? ("" + o.jStorage).length: 0 } function n() { try { o.jStorage = f(s), u && (u.setAttribute("jStorage", o.jStorage), u.save("jStorage")), a = o.jStorage ? ("" + o.jStorage).length: 0 } catch(e) {} } function r(e) { if (!e || "string" != typeof e && "number" != typeof e) throw new TypeError("Key name must be string or numeric"); if ("__jstorage_meta" == e) throw new TypeError("Reserved key name"); return ! 0 } function i() { var e, t, r, o = Infinity, u = !1; clearTimeout(h); if (s.__jstorage_meta && "object" == typeof s.__jstorage_meta.TTL) { e = +(new Date), r = s.__jstorage_meta.TTL; for (t in r) r.hasOwnProperty(t) && (r[t] <= e ? (delete r[t], delete s[t], u = !0) : r[t] < o && (o = r[t])); Infinity != o && (h = setTimeout(i, o - e)), u && n() } } if (!e || !e.toJSON && !Object.toJSON && !window.JSON) throw Error("jQuery, MooTools or Prototype needs to be loaded before jStorage!"); var s = {}, o = { jStorage: "{}" }, u = null, a = 0, f = e.toJSON || Object.toJSON || window.JSON && (JSON.encode || JSON.stringify), l = e.evalJSON || window.JSON && (JSON.decode || JSON.parse) || function(e) { return ("" + e).evalJSON() }, c = !1, h, p = { isXML: function(e) { return (e = (e ? e.ownerDocument || e: 0).documentElement) ? "HTML" !== e.nodeName: !1 }, encode: function(e) { if (!this.isXML(e)) return ! 1; try { return (new XMLSerializer).serializeToString(e) } catch(t) { try { return e.xml } catch(n) {} } return ! 1 }, decode: function(e) { var t = "DOMParser" in window && (new DOMParser).parseFromString || window.ActiveXObject && function(e) { var t = new ActiveXObject("Microsoft.XMLDOM"); return t.async = "false", t.loadXML(e), t }; return t ? (e = t.call("DOMParser" in window && new DOMParser || window, e, "text/xml"), this.isXML(e) ? e: !1) : !1 } }; e.jStorage = { version: "0.1.7.0", set: function(e, t, i) { return r(e), i = i || {}, p.isXML(t) ? t = { _is_xml: !0, xml: p.encode(t) }: "function" == typeof t ? t = null: t && "object" == typeof t && (t = l(f(t))), s[e] = t, isNaN(i.TTL) ? n() : this.setTTL(e, i.TTL), t }, get: function(e, t) { return r(e), e in s ? s[e] && "object" == typeof s[e] && s[e]._is_xml && s[e]._is_xml ? p.decode(s[e].xml) : s[e] : "undefined" == typeof t ? null: t }, deleteKey: function(e) { return r(e), e in s ? (delete s[e], s.__jstorage_meta && "object" == typeof s.__jstorage_meta.TTL && e in s.__jstorage_meta.TTL && delete s.__jstorage_meta.TTL[e], n(), !0) : !1 }, setTTL: function(e, t) { var o = +(new Date); return r(e), t = Number(t) || 0, e in s ? (s.__jstorage_meta || (s.__jstorage_meta = {}), s.__jstorage_meta.TTL || (s.__jstorage_meta.TTL = {}), 0 < t ? s.__jstorage_meta.TTL[e] = o + t: delete s.__jstorage_meta.TTL[e], n(), i(), !0) : !1 }, flush: function() { return s = {}, n(), !0 }, storageObj: function() { function e() {} return e.prototype = s, new e }, index: function() { var e = [], t; for (t in s) s.hasOwnProperty(t) && "__jstorage_meta" != t && e.push(t); return e }, storageSize: function() { return a }, currentBackend: function() { return c }, storageAvailable: function() { return !! c }, reInit: function() { var e; if (u && u.addBehavior) { e = document.createElement("link"), u.parentNode.replaceChild(e, u), u = e, u.style.behavior = "url(#default#userData)", document.getElementsByTagName("head")[0].appendChild(u), u.load("jStorage"), e = "{}"; try { e = u.getAttribute("jStorage") } catch(n) {} o.jStorage = e, c = "userDataBehavior" } t() } }, function() { var e = !1; if ("localStorage" in window) try { window.localStorage.setItem("_tmptest", "tmpval"), e = !0, window.localStorage.removeItem("_tmptest") } catch(n) {} if (e) try { window.localStorage && (o = window.localStorage, c = "localStorage") } catch(r) {} else if ("globalStorage" in window) try { window.globalStorage && (o = window.globalStorage[window.location.hostname], c = "globalStorage") } catch(s) {} else { if (u = document.createElement("link"), !u.addBehavior) { u = null; return } u.style.behavior = "url(#default#userData)", document.getElementsByTagName("head")[0].appendChild(u), u.load("jStorage"), e = "{}"; try { e = u.getAttribute("jStorage") } catch(a) {} o.jStorage = e, c = "userDataBehavior" } t(), i() } () } (window.$ || window.jQuery), $(function() { function n(t) { t.addClass("active"), t.children(".counter").children("span.txt").html("Don’t move"), t.children(".counter").children("span.num").hide(), e = setTimeout(function() { clearTimeout(e), s(t) }, 1e3) } function r(t) { clearTimeout(e), t.children(".counter").children("span.txt").html("Kudos"), t.children(".counter").children("span.num").show(), t.removeClass("active") } function i(e) { var t = e.closest("article").attr("id"); $.post("https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php", { article: t, action:'remove_kudos' }, function() { $.jStorage.set(t, !1) }); var n = parseInt(e.find("span.num").text().replace(/,/g, "")) - 1; e.find("span.num").text(n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")), e.children(".counter").children("span.txt").html("Kudos"), e.children(".counter").children("span.num").show(), e.removeClass("complete deletable"), e.addClass("kudoable") } function s(e) { var t = e.closest("article").attr("id"); $.post("https://www.webdigi.co.uk/blog/wp-admin/admin-ajax.php", { article: t, action:'my_special_action', }, function() { $.jStorage.set(t, !0) }); var n = parseInt(e.find("span.num").text().replace(/,/g, "")) + 1; e.find("span.num").text(n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")), e.children(".counter").children("span.txt").html("Kudos"), e.children(".counter").children("span.num").show(), e.addClass("complete"), e.removeClass("kudoable active") } var e, t; getKudos(), setViewport(), $("code, pre").length > 0 && startCode(), $("a.kudobject").live({ click: function(e) { return e.preventDefault(), !1 }, mouseenter: function() { kudo = $(this).parent(), kudo.is(".kudoable") && n(kudo) }, mouseleave: function() { clearTimeout(e), kudo = $(this).parent(), r(kudo), kudo.is(".complete") && kudo.addClass("deletable") } }), $("a.kudobject").live("touchstart", function(e) { kudo = $(this).parent(), kudo.is(".kudoable") && n(kudo), e.preventDefault() }), $("a.kudobject").live("touchend", function(t) { clearTimeout(e), kudo = $(this).parent(), r(kudo), kudo.is(".complete") && kudo.addClass("deletable"), t.preventDefault() }), $("aside.deletable a.kudobject").live("click", function(e) { return kudo = $(this).parent(), i(kudo), e.preventDefault(), !1 }), $("aside.deletable a.kudobject").live("touchend", function(e) { return kudo = $(this).parent(), i(kudo), e.preventDefault(), !1 }), $("aside.kudo").each(function(e) { var t = $(this).closest("article").attr("id"), n = $.jStorage.get(t); n && $(this).removeClass("kudoable").addClass("complete deletable") }), $("#svbtle_dropdown").mouseenter(function() { clearTimeout(t), $("#dropdown").show() }).mouseleave(function() { t = setTimeout("$('#dropdown').hide();", 800) }), $("#svbtle_dropdown").mouseenter(function() { clearTimeout(t), $("#dropdown").show() }).mouseleave(function() { t = setTimeout("$('#dropdown').hide();", 800) }) }), $("input.pane_input, textarea.pane_input").bind("focus", function() { $("li.text_field").removeClass("active"), $(this).parent("li.text_field").addClass("active") }), $("input.pane_input, textarea.pane_input").bind("blur", function() { $("li.text_field").removeClass("active"), $("li.text_field").first().addClass("active") }); </script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='https://www.webdigi.co.uk/blog/wp-includes/js/wp-embed.min.js'></script> </body> </html> <script type="text/javascript"> jQuery(document).ready(function($) { $("#also-read-items li").hover( function() { $(this).css('color', 'white'); $(this).css('background-color', '#0099A1'); $(this).find('.link_kudo').css('border', '3px solid white'); }, function() { $(this).css('color', '#777'); $(this).css('background-color', 'white'); $(this).find('.link_kudo').css('border', '3px solid #777'); } ); }); </script>

CINXE.COM

Tensor Flow on the browser with Pose and Hand tracking by Web Development