또치의 삽질 보관함 또치의 삽질 보관함

ffmpeg

• [3일차] Cover 추출기능 화면 임시구현 및 메뉴 변경

  프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 20. 22:02

  이번시간엔 본 프로젝트 구현보단 ffmpeg load(), exit() 에 대한 테스트 및 예제코드를 작성하는데 좀 더 많은 시간을 보냈다. 따라서 간단한 작업만 하고 마무리지었다. 1. Cover 이미지 추출기능 mp3 커버에 저장된 이미지를 추출하는 기능과 기능 제공 화면을 구현했다. 임시구현이기 때문에 Import 화면에서 변경된 바 거의 없다. 2. 메뉴 수정 메뉴명칭이 너무 길어 몇 개 화면만 구현해도 메뉴가 못생겨질 것 같아 보였다. (이미 충분히 못생기긴했지만..) 따라서 조금 불편할지라도 depth를 1에서 2로 늘렸다. 3. FFmpegService 구조 변경방안 마련 사실 1일차 때 FFmpegService 싱글톤으로 구현하고, ffmpeg 객체를 1개만 사용하도록 한정한 이유가 ffm..

  Read More
• [2일차] ffmpeg.wasm 0.10.0 업데이트 및 github action npm ci 문제 해결

  프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 19. 17:37

  1. ffmpeg.wasm 업데이트 개발 진행중 ffmpeg.wasm 이 0.10.0으로 업데이트 된 것을 확인했다. 이전에 문제가 있었던 스레드 종료이슈에 대한 기능이 구현되었다. 사용하면 원하는 상황에 바로 리소스가 해제되진 않는 듯 하지만 전혀 없었던 때에 비하면 훨씬 더 좋아졌다. setTimeout(() => { try { ffmpeg.exit(); } catch { } }, 0); ffmpeg.exit() 함수를 바로 호출하면 에러 메시지가 alert으로 표시되어 나온다. 따라서 timeout으로 감싼뒤 try catch로 처리했다. 2. 아이콘 변경 아이콘에 소소한 변경을 주었다. 지난시간에 만들었던 아이콘이 새로 디자인할 뮤직플레이어 웹앱에 어울릴듯하여 해당 아이콘은 새로운 뮤직플레이어 웹..

  Read More
• [1일차] MP3 Tools 웹앱 개발 시작

  프로젝트 개발/MP3 Tools 웹앱 (Drop) 2021. 5. 16. 17:13

  한동안 관심을 가졌던 ffmpeg.wasm(https://ddochea.tistory.com/147) 으로 웹 서비스를 개발해보았다. 이번에는 광고를 붙이고 소소하게 수입이 들어오길 바라는 야망(?)을 품고 있기 때문에 어느정도 완성이 되면 URL을 공개할 것이다. 첫 시작으론 mp3 파일에 cover image를 추가하는 기능이다. ffmpeg.wasm 을 사용해보았기 때문에 구현자체는 어렵지 않았다. 프로젝트 구성 이번 프로젝트는 지난번 "뮤직플레이어 웹앱" 때와 마찬가지로 소스코드를 오픈해두었다. 다만 지난시간엔 App.ts 에 화면, 기능영역 구분없이 구현했었다. 이번엔 비즈니스 로직과 화면영역을 분리할 계획이다. 아이콘 및 파비콘 디자인 아이콘은 Figma를 통해 디자인하였다. 처음엔 어려웠지만..

  Read More
• [React] ffmpeg.wasm 메모리 누수 문제 해결

  Javascript & TypeScript 2021. 5. 8. 16:11

  몇칠 전 ffmpeg.wasm 패키지를 소개했던 적이 있다. (ddochea.tistory.com/147) 웹 클라이언트만으로 미디어 파일에 대한 인코딩/디코딩 기술을 사용할 수 있다는 장점과 함께, memory leak이 발생하고 있는 이슈가 있어, 실제 서비스 개발에 도입하기엔 무리가 있을 것 같다고 했었다. 그리고 나서 오늘 좀 더 확인해보는 시간을 가졌는데, thread 관련 문제가 있는건 맞지만, 메모리 부분은 내가 코딩을 잘못해서 생긴 것을 깨닫게 되었다. 이 문제는 내가 만든 예제 뿐만 아니라, 공식사이트에 소개하고 있는 React 예제도 같은 문제가 있다. 아래 코드 공식사이트 예제 코드이다. import React, { useState } from 'react'; import { crea..

  Read More
• [Javascript] 브라우저에서 사용하는 인코딩 및 디코딩 패키지 ffmpeg.wasm 소개

  Javascript & TypeScript 2021. 5. 5. 18:10

  미디어파일을 인코딩/디코딩 하는 작업을 구현하는 프로그래머라면 ffmpeg란 오픈소스 툴을 들어본적이 있을 것이다. 카카오 팟플레이어 곰플레이어 등, 상당수의 미디어 플레이어나 인코딩 프로그램에 직/간접적으로 사용되는만큼 파급력이 높다. CLI 명령어 기반이라 이를 편히 사용할 수 있는 UI 기반 툴도 많이 나와있다. 그러나 특성상 웹에서 사용은 어려웠다. 물론 호스팅을 통해 미디어파일을 인코딩/디코딩 서비스를 제공하는 웹사이트도 심심찮게 볼 수 있었겠지만, 어디까지나 내 미디어파일이 웹서버에 업로드되어 처리한 후, 결과를 내려받는 형식이기 때문에 함부로 이용하면 소중한 지적재산권(?)을 내 손으로 넘겨주는 꼴이 될 수 있다. 이와 같은 불상사를 방지할 수 있는 패키지. ffmpeg.wasm를 소개한다...

  Read More