<div id="readability-page-1" class="page"><section id="container"><article id="post-2019-04-14-javascipt30-7" itemscope="" itemprop="blogPost">
 <div>
 
 
	
		<img src="https://javascript30.com/images/JS3-social-share.png"><header>
 
 
 
 

 
 
 
 </header>
 
 
 <div itemprop="articleBody">
 
 
 30 Day Vanilla JS Coding Challenge Study - 7주차
<ul>
<li>How JavaScript’s Array Reduce Works</li>
<li>Unreal Webcam Fun with getUserMedia() and HTML5 Canvas</li>
<li>Speech Recognition</li>
</ul>
<img src="http://i3.ytimg.com/vi/SadWPo2KZWg/maxresdefault.jpg">
<h2 id="18-How-JavaScript’s-Array-Reduce-Works"><a href="#18-How-JavaScript’s-Array-Reduce-Works" title="18. How JavaScript’s Array Reduce Works"></a>18. How JavaScript’s Array Reduce Works</h2>영상: <a target="_blank" rel="noopener" href="https://youtu.be/SadWPo2KZWg">https://youtu.be/SadWPo2KZWg</a>
<code>reduce</code> 메서드의 활용 방법
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </pre></td><td><pre> const timeNodes = Array.from(document.querySelectorAll('[data-time]')); const seconds = timeNodes .map(node =&gt; node.dataset.time) .map(timeCode =&gt; { const [mins, secs] = timeCode.split(':').map(parseFloat); return (mins * 60) + secs; }) .reduce((total, vidSeconds) =&gt; total + vidSeconds); let secondsLeft = seconds; const hours = Math.floor(secondsLeft / 3600); secondsLeft = secondsLeft % 3600; const mins = Math.floor(secondsLeft / 60); secondsLeft = secondsLeft % 60; console.log(hours, mins, secondsLeft); </pre></td></tr></tbody></table></figure>

<hr>
<img src="http://i3.ytimg.com/vi/ElWFcBlVk-o/maxresdefault.jpg">
영상: <a target="_blank" rel="noopener" href="https://youtu.be/ElWFcBlVk-o">https://youtu.be/ElWFcBlVk-o</a>
<code>getUserMedia()</code>와 HTML5 캔버스를 활용
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td><pre> function getVideo() { navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(localMediaStream =&gt; { video.srcObject = localMediaStream; video.play(); }) .catch(err =&gt; { console.error(`OH NO!!!`, err); }); } video.addEventListener('canplay', paintToCanvas); </pre></td></tr></tbody></table></figure>

이외에 로직은 RGB 값 및 캔버스 조작과 <code>takePhoto()</code> 함수를 통한 로직
<hr>
<img src="http://i3.ytimg.com/vi/0mJC0A72Fnw/maxresdefault.jpg">
<h2 id="20-Speech-Recognition"><a href="#20-Speech-Recognition" title="20. Speech Recognition"></a>20. Speech Recognition</h2>영상: <a target="_blank" rel="noopener" href="https://youtu.be/0mJC0A72Fnw">https://youtu.be/0mJC0A72Fnw</a>
<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>를 활용한 음성인식
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </pre></td><td><pre>window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition.lang = 'en-US'; let p = document.createElement('p'); const words = document.querySelector('.words'); words.appendChild(p); recognition.addEventListener('result', e =&gt; { const transcript = Array.from(e.results) .map(result =&gt; result[0]) .map(result =&gt; result.transcript) .join(''); const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩'); p.textContent = poopScript; if (e.results[0].isFinal) { p = document.createElement('p'); words.appendChild(p); } }); recognition.addEventListener('end', recognition.start); recognition.start(); </pre></td></tr></tbody></table></figure>
 
 </div>
 
 </div>
 
 
<nav id="article-nav">
 
 <a href="/2019/04/27/2019-04-27-javascipt30-8/" id="article-nav-newer">
 Newer
 
 
 Vanilla JS 30
 
 
 </a>
 
 
 <a href="/2019/04/14/2019-04-14-linux-example-photo-book/" id="article-nav-older">
 Older
 실습과 그림으로 배우는 리눅스 구조
 </a>
 
</nav>


 
</article>


 
 
 
 

</section></div>

Front-end Engineer

장현석

30 Day Vanilla JS Coding Challenge Study - 7주차
How JavaScript’s Array Reduce Works
Unreal Webcam Fun with getUserMedia() and HTML5 Canvas
Speech Recognition
18. How JavaScript’s Array Reduce Works
영상: https://youtu.be/SadWPo2KZWg
reduce 메서드의 활용 방법
19. Unreal Webcam Fun with getUserMedia() and HTML5 Canvas
영상: https://youtu.be/ElWFcBlVk-o
getUserMedia()와 HTML5 캔버스를 활용
이외에 로직은 RGB 값 및 캔버스 조작과 takePhoto() 함수를 통한 로직
20. Speech Recognition
영상: https://youtu.be/0mJC0A72Fnw
Web Speech API를 활용한 음성인식

Vanilla JS 30

댓글