mediarecorder

• 공식문서

  MediaRecorder()

• 깃헙 소스

  mdn/web-dictaphone

• test 사이트

  file:///C:/Users/lenovo/Desktop/IBM%EC%BD%9C%ED%8F%AC%EC%BD%94%EB%93%9C/WEB-DI~1/web-dictaphone-gh-pages/index.html

⚠️ mp4형식으로 저장됨. 근데 STT가 mp4지원이 안됨

→ webm 파일은 됨.

💫 참고한 사이트

Record Audio and Video with MediaRecorder | Web | Google Developers

MediaRecorder()

→ 여기서 type을 수정해줘야함

→ 이건거 같음

const blob = new Blob(chunks, { 'type' : 'video/webm; codecs=vp9' });

→ 이렇게 바꾸면 저장형식이 webm으로 바꿔짐.

• Transcribe from Microphone

  https://watson-speech.mybluemix.net/microphone-streaming.html

• fetch에 대한 이해 필요 → 생활코딩 fetch 강의 정리 → 용어정리

  최미리

  • fetch 적용 전

    

  • fetch 적용 후

    

    녹음은 되는데 결과가 안나오네 ;;

    #app.js 바뀐부분
    
    record.querySelector('#button').onclick = function() {
          mediaRecorder.start();
          console.log(mediaRecorder.state);
          console.log("recorder started");
          record.style.background = "red";
    
          stop.disabled = false;
          record.disabled = true;
    
          fetch('<https://api.kr-seo.speech-to-text.watson.cloud.ibm.com/instances/f568fcb0-c3d4-4f13-b89e-d17b67d5adc2/v1/recognize?model=ko-KR_BroadbandModel>')
          .then(function(response) {
            console.log(response+'1')
            return response.json();
          })
          .then(function(token) {
            var stream = WatsonSpeech.SpeechToText.recognizeMicrophone(Object.assign(token, { // eslint-disable-line
              outputElement: '#output' // CSS selector or DOM Element
            }));
          })
          //   stream.on('error', function(err) {
          //     console.log(err);
          //   });
    
          //   record.querySelector('#stop').onclick = function() {
          //     stream.stop();
          //   };
          // })
          .catch(function(error) {
            console.log(error);
          });
        };
    

추가로 필요한 공부

➕ 요청보내고 받아오는 기능

➕ 데이터 넣어서 원하는 정보 어떤건지 판별하는 기능