Vanilla JS 30

TILjavascriptjavascipt30

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 메서드의 활용 방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// data-* 를 이용해 셀렉팅 후 배열 메서드 활용을 위해 Array.from() 사용
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

// map을 통해 데이터를 가공 후 reduce를 통해 누적값 활용
const seconds = timeNodes
  .map(node => node.dataset.time)
  .map(timeCode => {
    const [mins, secs] = timeCode.split(':').map(parseFloat);
    return (mins * 60) + secs;
  })
  .reduce((total, vidSeconds) => 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);

19. Unreal Webcam Fun with getUserMedia() and HTML5 Canvas

영상: https://youtu.be/ElWFcBlVk-o

getUserMedia()와 HTML5 캔버스를 활용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// getUserMedia()를 통한 접근
function getVideo() {
  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
      video.srcObject = localMediaStream;
      video.play();
    })
    .catch(err => {
      console.error(`OH NO!!!`, err);
    });
}

// canplay 이벤트 타입은 비디오를 재생할 수 있을 때 트리거 된다
video.addEventListener('canplay', paintToCanvas);

이외에 로직은 RGB 값 및 캔버스 조작과 takePhoto() 함수를 통한 로직

20. Speech Recognition

영상: https://youtu.be/0mJC0A72Fnw

Web Speech API를 활용한 음성인식

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
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
// 중간결과 반환 여부 (기본값은 false)
recognition.interimResults = true;
recognition.lang = 'en-US';

let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => 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();
Share Comments