[JavaScript30] 18,19,20 강 정리

18강. Adding Up Times with Reduce

목표

---

동영상 재생 시간을 Reduce를 사용하여 다 더하여 시,분,초로 나타내기

 

과정

---

1. 재생시간 변수에 담기

2. 재생시간의 시, 분, 초를 모두 더하여 초로 나타내기

3. 모두 더한 초를 시, 분, 초로 나타내기

 

코드 분석

---

비디오의 시간이 다음과 같이 list tag의 data-time 설정되어 있다.

<li data-time="4:04">
  Video 58
</li>

 

data-time(재생시간) 불러와 변수에 담기

  - querySelectorAll 로 불러온 Dom은 NodeList속성을 가짐. 따라서 reduce 메소드 사용을 위해 Array로 변환해야 함.

  - NodeList를 Array로 변환하는 방법

      1. Array.from 사용(아래)      2. spread사용(ES6) ex) [...document.querySelectorAll('[data-time]')];

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

 

모든 재생시간을 더하여 초 구하기

  - node.dataset.time 으로 "4:04" 값 가져오고

  - : 를 기준으로 자른후(split) 문자열을 실수로 반환(parseFloat)하여 [ mins, secs ] 에 앞에는 분, 뒤에는 초를 담고

  - mins에는 60을 곱해 초를 구하고, secs는 그대로 더하여 총 재생시간 초를 구하여

  - reduce 메소드로 map으로 순환한 모든 재생시간 초들을 더한다.

const seconds = timeNodes  
  .map(node => node.dataset.time)
  .map(timeCode => {
    const [mins, secs] = timeCode.split(':').map(parseFloat); // String이다.
    return ( mins * 60 ) + secs;
  })
  .reduce((total, videSeconds) => total + videSeconds); 

 

최종적으로 구해진 초를 시, 분, 초로 나누어 구해준다. ( % 연산 = 나머지연산 )

let secondsLeft = seconds;

const hours = Math.floor(secondsLeft / 3600); // 4.9 hour => 4 hour
secondsLeft = secondsLeft % 3600; // 나머지(mod) 개념
const mins =  Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60; // 초
console.log(hours, mins, secondsLeft);

 

19강. Webcam Fun

목표

---

webcam 기능 사용해보고 배경 색 바꿔보기

 

과정

---

1. dom 요소 가져오기

2. webcam 실행하여 video 불러오기

3. Canvas에 불러온 video 삽입하기

4. 사진 캡처 및 다운로드 함수 추가

5. Canvas에 있는 사진 배경 변경 함수 추가 ( redEffect, rgbSplit, greenScreen) 

 

코드 분석

---

비디오가져오기

  - MediaDevices.getUserMedia() 메소드는 사용자에게 미디어 장치 사용 권한을 요청하며, 요청 수락시 미디어 트랙을

    포함한 MediaStream을 반환(비디오트랙과 오디오트랙이 있는데 여기선 비디오만 사용)

  - Promise 형태로 반환

  - 사용자가 권한 요청에 거부하거나 사용할 수 있는 미디어 장치가 없다면 error를 반환하기 때문에 예외처리 꼭 하기

  - 더 자세한내용 : MDN web docs : MediaDevices.getUserMedia()

function getVideo(){
   navigator.mediaDevices.getUserMedia({ video : true, audio: false})
    .then(localMediaStream => {
      // video.src = window.URL.createObjectURL(localMediaStream);
      video.srcObject = localMediaStream;
      video.play();
    })
    .catch(err => { // when doesn't allow webcam
    console.error(`OH NO!!!`, err);
    })
}

Canvas에 사진 송출하기

  - 가로 세로 크기 맞춘 후, redEffect 효과, rgbSplit 효과, greenScreen 효과 각각 적용해보기.

   ( 자세한 효과 코드는 wes bos javascript30 github 에서 ! )

function paintToCanvas(){
    //실제 비디오의 가로*높이 구하기
    const width = video.videoWidth;
    const height = video.videoHeight;
    canvas.width = width;
    canvas.height = height;
    return setInterval(() => {
        ctx.drawImage(video, 0, 0, width, height);
        //take the pixels out
        let pixels = ctx.getImageData(0,0,width,height);

        //Case1. mess with them
        // pixels = redEffect(pixels);

	//Case2
        // pixels = rgbSplit(pixels);
        // ctx.globalAlpah = 0.1; //ghosting effect

	//Case3
        pixels = greenScreen(pixels);

        //put them back
        ctx.putImageData(pixels, 0, 0);
    }, 16);
}

사진 캡처하기

function takePhoto(){
    //played the sound
    snap.currentTime = 0;
    snap.play();
    //take the data out of the canvas
    const data = canvas.toDataURL('image/jpeg');
    // console.log(data); // base64 형식으로 사진 묘사
    const link = document.createElement('a');
    link.href = data;
    link.setAttribute('download', 'yeaseul');
    // link.textContent = 'Download Image';
    link.innerHTML = `<img src = "${data}" alt = "yeaseul" />`;
    strip.insertBefore(link, strip.firstChild); //jQuery 에서는 .prepend
}

실행하기

처음에 함수를 실행하고 canplay 상황이 되면 paintToCanvas를 실행.

( getVideo() 밑에 그냥 paintToCnavas() 했더니 dom 실행시 안나오더라, 아마 getVideo가 준비된 상태가 된 후에 영상을 가져올 수 있기 때문에(canplay상태) 그런것같다. 난 좀 이런게 헷갈리더라)

getVideo();

video.addEventListener('canplay', paintToCanvas);

20강. Speech Detection

목표

---

SpeechRecognition 인터페이스를 통하여 Web Speech API에 엑세스하기

( 웹에서 음성데이터 처리하기 )

 

과정

---

1. SpeechRecognition 인터페이스 생성자 구현 (말이 맞나..)

2. 음성인식 값 추출하기( interimResults = true로 중간결과 출력 없이 )

3. p태그 생성하여 최종결과(isFinal)가 true일 때 html에 append 하기.

4. 음성인식이 끝나고 end type 을 반환하면 2번(객체)부터 다시 시작.

 

코드 분석

---

SpeechRecognition 호출 ( 브라우저 상황에 따라 다를수 있으므로 ||로 호출 )

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

SpeechRecognition 생성자로 객체 생성 및 interimResults (중간결과값 출력여부) true(출력안함)로 설정(default = false)

const recognition = new SpeechRecognition();
recognition.interimResults = true;

음성값 출력 ( result event 받아서 실행)

recognition.addEventListener('result', e => {
    console.log(e);
    const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

p태그에 결과값 출력 및 음성인식이 끝났을때도 (isFinal = true) 다음단락에 출력되도록 설정 (말이 좀 어렵나..?)

  p.textContent = transcript;
    if(e.results[0].isFinal){
      p = document.createElement('p');
      words.appendChild(p);
    }
 })

한번으로 끝나는게 아니라 반복적으로 출력하기 위해 end이벤트 발생시 recognition 실행

recognition.addEventListener('end', recognition.start); //type:"end"

말을 잘 전달하고 싶은데 그게 잘 안되네요 .. 역량부족 ㅠㅠ 다음엔 더 좋게 포스팅해볼게요.

19, 20 강을 하면서 재밌는 기능이 많다는걸 배웠습니다. 그럼 이만!

ps. 편집기가 새로 바뀌면서 코드 삽입 기능이 생겼는데, 편집할땐 알록달록 예쁜데 게시하고나면 안예쁘다.. 그래서 전처럼 Color Scripter를 사용해서 검정배경의 알록달록한 글씨로 올릴라고했는데 그게 이제 안먹혀버린다. 기능생긴건 좋은데 아쉬움. 빨리 개선됐으면~