{"id":8726,"date":"2023-09-20T11:04:58","date_gmt":"2023-09-20T04:04:58","guid":{"rendered":"https:\/\/tapchicntt.com\/?p=8726"},"modified":"2023-09-20T11:23:16","modified_gmt":"2023-09-20T04:23:16","slug":"huong-dan-su-dung-webcam-easy-js-chup-hinh","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/huong-dan-su-dung-webcam-easy-js-chup-hinh\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng webcam-easy.js ch\u1ee5p h\u00ecnh"},"content":{"rendered":"\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch s\u1eed d\u1ee5ng <code>webcam-easy.js<\/code> \u0111\u1ec3 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng web c\u00f3 th\u1ec3 b\u1eadt webcam v\u00e0 ch\u1ee5p h\u00ecnh \u1ea3nh nhanh.<\/p>\n\n\n\n<p><strong>S\u1eed d\u1ee5ng webcam-easy.js<\/strong><\/p>\n\n\n\n<p><code>webcam-easy.js<\/code> l\u00e0 th\u01b0 vi\u1ec7n JavaScript truy c\u1eadp lu\u1ed3ng webcam, n\u00f3 c\u00f3 th\u1ec3 cho ph\u00e9p ch\u1ee5p \u1ea3nh, quay phim t\u1eeb webcam. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c t\u00ednh n\u0103ng ch\u00ednh c\u1ee7a webcam-easy.js:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u00e1t tr\u1ef1c tuy\u1ebfn webcam tr\u00ean m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n ho\u1eb7c thi\u1ebft b\u1ecb di \u0111\u1ed9ng<\/li>\n\n\n\n<li>Chuy\u1ec3n \u0111\u1ed5i camera tr\u01b0\u1edbc ho\u1eb7c sau tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng<\/li>\n\n\n\n<li>Ch\u1ee5p \u1ea3nh v\u00e0 c\u00f3 th\u1ec3 t\u1ea3i xu\u1ed1ng.<\/li>\n<\/ul>\n\n\n\n<p><strong>B\u01b0\u1edbc 1: Import webcam-easy.js<\/strong><\/p>\n\n\n\n<p>Tr\u01b0\u1edbc h\u1ebft, ch\u1ec9 c\u1ea7n import script <code>webcam-easy.min.js<\/code> v\u00e0o ph\u1ea7n &lt;head&gt; c\u1ee7a t\u1ec7p html.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;html&gt;\n&lt;head&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/unpkg.com\/webcam-easy\/dist\/webcam-easy.min.js&quot;&gt;\n&lt;\/script&gt;\n&lt;script type=&quot;text\/javascript&quot; src=&quot;video-setup.js&quot;&gt;\n&lt;\/head&gt;\n<\/pre><\/div>\n\n\n<p><strong>B\u01b0\u1edbc 2:<\/strong><\/p>\n\n\n\n<p>Ti\u1ebfp theo ch\u00fang ta c\u1ea7n th\u00eam c\u00e1c ph\u1ea7n t\u1eed html b\u00ean d\u01b0\u1edbi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ph\u1ea7n t\u1eed video webcam<\/li>\n\n\n\n<li>Ph\u1ea7n t\u1eed canvas \u0111\u1ec3 ch\u1ee5p \u1ea3nh<\/li>\n\n\n\n<li>Ph\u1ea7n t\u1eed \u00e2m thanh t\u00f9y ch\u1ecdn cho \u00e2m thanh snap<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;video id=&quot;webcam&quot; autoplay playsinline width=&quot;640&quot; height=&quot;480&quot;&gt;&lt;\/video&gt;\n&lt;canvas id=&quot;canvas&quot; class=&quot;d-none&quot;&gt;&lt;\/canvas&gt;\n&lt;audio id=&quot;snapSound&quot; src=&quot;audio\/snap.wav&quot; preload = &quot;auto&quot;&gt;&lt;\/audio&gt;\n<\/pre><\/div>\n\n\n<p><strong>B\u01b0\u1edbc 3: Kh\u1edfi t\u1ea1o webcam<\/strong><\/p>\n\n\n\n<p>Sau \u0111\u00f3, ch\u00fang ta m\u1edf file <code>video-setup.js<\/code> v\u00e0 kh\u1edfi t\u1ea1o \u0111\u1ed1i t\u01b0\u1ee3ng Webcam: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>webcamElement &#8211; ph\u1ea7n t\u1eed html &lt;video&gt; c\u1ee7a webcam<\/li>\n\n\n\n<li>faceMode &#8211; &#8216;ng\u01b0\u1eddi d\u00f9ng&#8217; ho\u1eb7c &#8216;ph\u1ea7n t\u1eed&#8217;, gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 &#8216;ng\u01b0\u1eddi d\u00f9ng&#8217;<\/li>\n\n\n\n<li>canvasElement &amp; snapSoundElement l\u00e0 t\u00f9y ch\u1ecdn<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\nconst webcamElement = document.getElementById(&#039;webcam&#039;);\nconst canvasElement = document.getElementById(&#039;canvas&#039;);\nconst snapSoundElement = document.getElementById(&#039;snapSound&#039;);\nconst webcam = new Webcam(webcamElement, &#039;user&#039;, canvasElement, snapSoundElement);\n<\/pre><\/div>\n\n\n<p><strong>B\u01b0\u1edbc 4: Kh\u1edfi \u0111\u1ed9ng Webcam<\/strong><\/p>\n\n\n\n<p>B\u1eb1ng c\u00e1ch g\u1ecdi h\u00e0m webcam.start(), tr\u00ecnh duy\u1ec7t s\u1ebd y\u00eau c\u1ea7u ng\u01b0\u1eddi d\u00f9ng cho ph\u00e9p truy c\u1eadp v\u00e0o m\u00e1y \u1ea3nh, khi \u0111\u01b0\u1ee3c ph\u00e9p, n\u00f3 s\u1ebd b\u1eaft \u0111\u1ea7u truy\u1ec1n tr\u1ef1c tuy\u1ebfn webcam t\u1edbi ph\u1ea7n t\u1eed video.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nwebcam.start()\n  .then(result =&gt;{\n    console.log(&quot;webcam started&quot;);\n  })\n  .catch(err =&gt; {\n    console.log(err);\n});\n<\/pre><\/div>\n\n\n<p><strong>B\u01b0\u1edbc 5: Ch\u1ee5p \u1ea3nh<\/strong><\/p>\n\n\n\n<p>Ch\u1ec9 c\u1ea7n g\u1ecdi ch\u1ee9c n\u0103ng webcam.snap() \u0111\u1ec3 ch\u1ee5p \u1ea3nh c\u1ee7a webcam. H\u00e0m tr\u1ea3 v\u1ec1 m\u1ed9t data URI ch\u1ee9a \u0111\u1ea1i di\u1ec7n c\u1ee7a h\u00ecnh \u1ea3nh \u1edf \u0111\u1ecbnh d\u1ea1ng PNG. B\u1eb1ng c\u00e1ch \u0111\u1eb7t thu\u1ed9c t\u00ednh &#8216;href&#8217; c\u1ee7a li\u00ean k\u1ebft html &lt;a&gt; cho tr\u1ea3 v\u1ec1 d\u1eef li\u1ec7u h\u00ecnh \u1ea3nh, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 t\u1ea3i xu\u1ed1ng v\u00e0 l\u01b0u \u1ea3nh ch\u1ee5p.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet picture = webcam.snap();\ndocument.querySelector(&#039;#download-photo&#039;).href = picture;\n<\/pre><\/div>\n\n\n<p><strong>B\u01b0\u1edbc 6: D\u1eebng webcam<\/strong><\/p>\n\n\n\n<p>B\u1ea1n c\u0169ng mu\u1ed1n ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 d\u1eebng webcam, ch\u1ec9 c\u1ea7n g\u1ecdi h\u00e0m <code>webcam.stop()<\/code><\/p>\n\n\n\n<p><strong>H\u1ed7 tr\u1ee3 camera tr\u01b0\u1edbc v\u00e0 sau c\u1ee7a di \u0111\u1ed9ng<\/strong><\/p>\n\n\n\n<p><code>webcam-easy.js<\/code> kh\u00f4ng ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng v\u1edbi webcam tr\u00ean m\u00e1y t\u00ednh \u0111\u1ec3 b\u00e0n m\u00e0 c\u00f2n h\u1ed7 tr\u1ee3 c\u1ea3 camera tr\u01b0\u1edbc v\u00e0 sau tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/p>\n\n\n\n<p>Khi b\u1ea1n kh\u1edfi t\u1ea1o \u0111\u1ed1i t\u01b0\u1ee3ng Webcam, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n tham s\u1ed1 facingMode, trong khi &#8216;ng\u01b0\u1eddi d\u00f9ng&#8217; th\u1ec3 hi\u1ec7n cho camera ph\u00eda tr\u01b0\u1edbc \u0111\u1ed1i di\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng v\u00e0 cho camera sau.<\/p>\n\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 g\u1ecdi webcam.flip() \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i gi\u1eefa camera tr\u01b0\u1edbc v\u00e0 sau.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&#039;#cameraFlip&#039;).click(function() {\n  webcam.flip();\n  webcam.start();\n});\n<\/pre><\/div>\n\n\n<p>Demo: <a href=\"https:\/\/lyminhhoang.com\/demo\/face\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/lyminhhoang.com\/demo\/face\/<\/a><\/p>\n\n\n\n<p>Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n\n\n\n<p>Ngu\u1ed3n: https:\/\/github.com\/bensonruan\/webcam-easy<\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch s\u1eed d\u1ee5ng webcam-easy.js \u0111\u1ec3 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng web c\u00f3 th\u1ec3 b\u1eadt webcam v\u00e0 ch\u1ee5p h\u00ecnh [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":8737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,142],"tags":[],"class_list":["post-8726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-thu-thuat-jquery"],"views":604,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/8726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=8726"}],"version-history":[{"count":17,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/8726\/revisions"}],"predecessor-version":[{"id":8748,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/8726\/revisions\/8748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/8737"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=8726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=8726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=8726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}