Enjoy Programming

일단 유튜브 클론과정은 거의 끝났다 ~ 내가 직접 몇개의 라우터를 더 만들 예정이고~ 홈페이지 디자인도 손보고~ 몇가지 자바스크립트도 추가할예정이고~ 로직도 손보고 있다. 마지막 챌린지였던 댓글 삭제기능은 구현되었고~ 그런데 포스팅을 못했다.. 포스팅할게 너무 밀려있다.. ㅠㅠ 차분히 하자.. 현재는 개발자 모드로 개발을 하고 있었고 이제 실제 배포를 해볼차례이다. Heroku를 통해 배포를 한다. Heroku란 무엇인가~ Heroku는 java, node.js, python등 여러 언어를 지원하는 웹 어플리케이션 배치 모델로 사용되는 클라우드 paas이다. paas? Platform as a Service- 서비스형 플랫폼 : 클라우드 컴퓨팅 서비스 분류 중 하나. 일반적으로 앱을 개발하거나 구현할 때..

이번에는 썸네일을 만들어서 영상의 첫프레임이나 1초의 스크린샷을 찍어서 jpg파일로 저장해서 쓴다. 역시 인풋에 해당 파일을 넣어주고~ -ss는 영상의 특정시간대로 갈 수 있는 명렁어인데 1초로 지정한다. 그리고 -frames:v는 스크린샷을 찍을 수 있게 해주는데 1로 지정한것은 첫번째 프레임임을 지정한 것이다. 마지막으로 파일시스템의 메모리에서 만들어주는 썸네일.jpg를 생성해준다. 다시 녹화를 하고 진행하면~ 콘솔창에 mjpeg파일이 생성된 것을 확인할 수 있다. 이제 영상을 받을때와 똑같이 해주면 된다~!~! arraybuffer처리와 blob처리~ 그리고 url만들어주고 역시 fake link만들어서 다운로드 할 수 있도록~!~! 짜잔~~!~! 썸네일도 생성되어서 다운로드 된다~! 마지막으로 파..

현재 만든 비디오 플레이어는 녹화하고 다운로드해서 webm파일을 얻을 수 있다. 하지만 부족한게 많다. 내 맥북에서는 파일이 webm 이라 구동시 브라우저로 열리고 플레이어 이용시 호환이 안된다. 음 니코의 경우 어떤 플레이어를 쓰는지 모르지만 플레이어 구동시 duration도 안나오고 range조절도 안된다. 이번엔 이것을 수정하는 코드를 짜볼건데 FFmpeg를 가지고 mp4로 변환하고 썸네일도 추출할 것이다. FFmpeg는 디지털 영상스트림과 음성스트림을 다양한 형태로 저장하고 변환하는 컴퓨터 프로그램이다. https://www.ffmpeg.org/ FFmpeg Converting video and audio has never been so easy. $ ffmpeg -i input.mp4 outpu..

앞서 녹화된 비디오를 다운로드 해보자. 비디오를 우클릭후 다운로드도 가능하지만 가짜 링크를 걸어 사용자가 클릭해서 다운로드 하도록 ~ 편의 기능 제공! ㅋㅋ 우선 앞서 만든 stop을 약간 수정했다 stop버튼을 클릭하면 down로드 문구로 바뀌고 download 이벤트 핸들러를 대기시킨다. 그리고 다운로드 이벤트 핸들러가 실행되면 fake 링크하나를 만들어주고 경로는 recordedVideo 브라우저 Url을 넣어주고 download attribute를 사용해준다. 이 속성을 사용하면 클릭시 이동이 아닌 download를 하게된다. body에 append시켜주고 click함수를 실행해주면 끝! 추가로 해줄건 미디어 리코더에서 mimeType을 써주면된다~ 그냥 확장자 정해주는거니까~~~~

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder MediaRecorder - Web APIs | MDN The MediaRecorder interface of the MediaStream Recording API provides functionality to easily record media. It is created using the MediaRecorder() constructor. developer.mozilla.org 앞서 preview를 할 수 있게 웹캠을 켜는 것을 했다면~ 이제 recording을 해봐야한다~ 먼저 자잘하게 preview를 했던 함수를 init으로 바로실행시켜서~ 업로드 페이지에 가면 바로 볼 수 있게하고 st..

앞서 정리 하지 못했던 video recorder만들기를 다시 포스팅 해본다. 여기서 이용할 것은 다음과 같다~ https://developer.mozilla.org/ko/docs/Web/API/MediaDevices MediaDevices - Web API | MDN MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어 developer.mozilla.org MediaDevices인터페이스는 카메라 마이크 공유 화면등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스이다. 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있다. 부모 인터페이..