Enjoy Programming

현재 만든 비디오 플레이어는 녹화하고 다운로드해서 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인터페이스는 카메라 마이크 공유 화면등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스이다. 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있다. 부모 인터페이..

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 ajax를 리마인드 해본다. 우선 fetch를 이용해 내가 원하는 url을 가져오고 백엔드에서는 url의 video id를 보내주기위해 잠시 포스팅했던 data-attribute를 사용한다. data-attr를 이용해서 html에 데이터를 저장하고 프론트에서 그 정보를 가져오게 한다. 니코 왈 data-attr는 백엔드와 프론트간에 정보교환을 하는데 있어 가장 쉬운 방법이라고 한다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 사용하기 - Web 개발 학습하기 | MDN HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 ..

PropTypes 종류 - array: 배열 - arrayOf: 특정 propType으로 이루어진 배열 - bool: true or false 값 - func: 함수 - number: 숫자 - object: 객체 - string: 문자열 - symbol: ES6의 Symbol - node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드) - instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass)) - oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나 - oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나 - objectOf(React.PropTypes.number):..