Enjoy Programming

https://developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map Map() 생성자 | MDN Map() 생성자는 Map 객체를 생성합니다. developer.mozilla.org 자 map method가 아닌 Map()생성자 함수를 다뤄보자~ 헷갈리지 말자 생성자이다. Map객체를 생성해준다. Set은 value에 대해서만 작동을 한다면 Map은 key와 value모두 포함할 수 있다. key와 value의 저장소같은 느낌이다. Set은 add를 가지고 있지만 Map은 add가 없고 set을 가지고 있다. map을 하나 만들어서 key와 value를 set해보자. 오브젝트가 하나 만들어졌고 map에 ..

이번에는 Set 에 알아보자. 역시 mdn 부터 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org set은 객체이다. set 객체는 자료형에 관계없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다. 매개변수로는 iterable한 객체가 전달된 경우, 그 요소는 모두 새로운 set에 추가된다. 만약 매개변수를 명시하지 않거나 null 을 전달하면 , 새로운 set은 비어있는 상태가 된다. return 값은 새로운 Set객체 Set..

자바스크립트는 여러 data-type을 가지고 있다. boolean, string, number, null, object, undefined등등 여기에 es6에서 symbol이라는 data-type이 추가 되었다. 아직 사용해본적은 없는듯 하다. 먼저 mdn을 살펴보자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol Symbol - JavaScript | MDN Symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데, 이 심볼은 내장 객체(built-in objects)의 여러 멤버를 가리키는 정적 프로퍼티와 전역 심볼 레지스트리(global symbol registry)를 가리키는 정적 메..

이번에는 썸네일을 만들어서 영상의 첫프레임이나 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을 써주면된다~ 그냥 확장자 정해주는거니까~~~~