4주차 스크럼

📌 1일차

1일차 스크럼/회고 보러가기

주말에 한 일

• 로딩화면 구현
• WebAssembly 로 OpenCV 적용해 봤지만 실패했따
• WebAssembly 책 구매 (구매만)

우리가 할 일

• 11시 Audio팀 미팅
• 1시 마스터클래스
• 3시 멘토님 미팅 내일 5시
• 7시 체크아웃

질문리스트

• 워크플로우 제대로 된건지

회고

• 오늘의 MVD : LCC 우승자 민지님~🏆

• 영언: History 설계 및 구현

  • 비슷한 주제를 가지고 프로젝트를 수행하고 있는 오디오 편집기 팀과 미팅을 했다.
  • 영상 편집 도중에 뒤로 가기, 앞으로 가기, 원본으로 기능을 위한 History Store를 구현했다.
  • 영상에 효과를 적용하는 모든 경우에 어떤 효과가 적용되는지 기록해야 하고, 20개 이상의 효과를 저장하면 이후 추가로 데이터가 들어올 때마다 가장 앞의 log를 제거해야 한다. 또 뒤로가기를 몇 번 수행한 뒤 추가로 효과를 적용하는 경우 해당 index 이후의 log들도 모두 제거해야 하는데, 이 두 로직을 store업데이트 이전에 처리하기 위해 고민을 했다.
    • history에 있는 thumbnails가 제거되는 경우 모든 url을 revoke하기 위해
    • saga에서 영상에 효과를 적용하는 경우에 대한 액션을 바라보고, 그 액션이 dispatch됐을 때 위의 조건에 해당하는지 확인하고 해당하는 경우에만 revokeURL을 call하도록 구현했다.
  • 오늘은 어제 구현한 reducer와 saga를 적용해봐야겠다.

• 민지: History store 구현 + α

  • saga부분에서 처리해야하는 webGLController부분만 제외하고 store구현을 끝냈다
  • reducer부분을 구현할 때, APPLY_EFFECT부분에서 Effect의 종류에 따라서 일부만 변화가 일어나는 것을 처리해주는 쪽에서 클린코드를위해 시간이 살짝 걸렸었다
  • log 삭제를 해야하는 경우에 대한 로직을 설계할 때 고민을 했다. 첫 번째로 최대 log의 수를 20개로 정했기 때문에 log의 갯수에 따라서 effect추가가 되었을 경우와 다음으로 뒤로가기 여러번 후에 effect가 추가될 때의 경우였다. 이 로직은 saga에서 처리해주었다
  • Audio팀이랑 아침에 미팅을 했는데 서로 질의응답도 하고 재밌는 활동도해서 만족스러웠다
  • LCC에서 1등했당 히히🎉

• 승현: 개발 외의 회의랑 활동이 많았던 날~💫

  • audio팀과의 미팅을 했다. 서로의 기술 중 궁금한 것을 물어보고, 개발이 어떻게 진행되는 지, 막힌점은 없는지를 같이 이야기 해보는 시간이었다. 끝나고는 시간이 남아서 끝말잇기 게임도 같이 했다. 🤗
  • 월요일 3시에 예정되어있던 멘토님과의 미팅은 화요일 5시로 옮겨졌다.
  • LCC를 개최해서 투표를 받았다. 민지님이 우승하셨다. 🏆👍
  • 구현적으로는 WebGL 해상도 문제를 해결했고, 추가적으로 서명 기능도 임시로 넣어봤다.
  • 오늘은 video프레임을 뽑아내는 작업을 해봐야 겠다. 🎬

• 지현: 발견한 김에 오류 수정, 그리고 VideoEncoder 단독 삽질 시작

  • 오디오 팀과 첫 미팅을 했는데, 역시 부스트캠프는 그 누구에게도 고난의 행군인 듯 하다. 세상에, 바닐라 JS로 그 복잡한 UI를 굴려야 한다니 이게 무슨 날벼락이람...
    • 그래도 덕분에 Web Audio API가 미구현인 AudioTrackReader & AudioEncoder를 대체할 수 있을 것 같다는 희망적인 소식도 접할 수 있었다.
    • Naver Apollo 쪽 프로젝트 하는 우리 모두 화이팅 ^^
  • 자르고 있는 도중에는 전체 영상이 보이는데, Slider도, HoverSlider도, CurrentTime도 전체 기준으로 보이지 않았다는걸 이제 알게 되었다... 고치느라 한세월
  • 요즘 노트북 성능이 약간 운명하시기 직전으로 떨어진 것 같은데, 그래서 React 최적화를 시도하게 되었다. (음?)
  • 브라우저에서 동영상 재생 시 framerate가 고정이 아닌 듯 한데, MediaStreamTrack을 받아 applyConstraints로 30FPS를 요구했음에도 불구하고 VideoTrackReader에서 프레임을 뱉는 속도가 일정하지 않았다. 이거 다시 decoding하면 원본 영상처럼 보이...려나?

📌 2일차

2일차 스크럼/회고 보러가기

우리가 할 일

• history store구현 끝내기
• webcodecs 마저 실험
• 회전

공유할 사항

• 오늘 5시 멘토님
• 30fps가 30fps가 아니다...

회고

• 오늘의 MVD : 👨‍👦‍👦 모호두후 🏆👍

• 영언: History store 구현2

  • 생각보다 History store가 더 복잡했다...
  • crop의 경우 이전 상태의 썸네일만 저장하는 것으로 생각했었는데, 뒤로가기 이후에 다시 앞으로가기를 하는 경우 그 시점의 썸네일도 필요하다는 것을 깨달았다..
    • 더하여 start, end도 두 쌍이 필요했었더라
  • 어찌저찌 crop 되돌리기를 구현하고 나니, CurrentTime에서 또 문제가 발생했다.
    • 오늘 오전중에 해결하고 마무리해야겠다!
  • 멘토님과 4번째 미팅을 했다. 작년에 아폴로 팀에 부스트캠프에서 인턴으로 7명이나 갔었다는 이야기도 듣고, 면접 준비를 잘해야 한다는 말씀도 해주셨다.
    • WebCodecs을 사용했을 때, framerate가 일정하게 뽑히지 않는 문제 때문에 WebCodecs가 아닌 다른 방법으로 구현하는 것도 고려해봐야하는 시점인 것 같다.
    • 몇 가지 방법을 제시해 주셨는데 잘 검토해서 좋은 방법을 찾아야겠다.

• 민지: History store구현

  • 오늘은 꼭 끝내고 다른것도 해보고싶다..ㅎ
  • 다같이 History store 설계했을때는 이렇게까지 헷갈리는 줄 몰랐는데 막상 구현해보니까 생각해야할게 너무 많아서 헷갈렸다
    • 다른효과는 잘 해결했는데 crop하는 부분이 어렵다(썸네일을 다시추출하지않고 들고있으려니까 헷갈리는게 많다)
  • submenu가 켜져있는 상태에서 취소버튼을 누르면 서브메뉴를 누를 수 있는 오류를 발견했다 고쳐야지
  • 멘토님과의 미팅 '포트폴리오를 잘 정리하자~!'

• 승현: Webgl 코드 정리 및 버그수정 / imageBitmap 구현 😎

  • Webgl 코드 중 중복된 변수나 Init하는 과정을 따로 분리하여 코드를 정리하였고, 회전로직에서 오류를 발견하여 이를 수정하는 작업을 하였다. 🌌

  • 또한, imageBitmap을 이용하여 webgl필터를 입힌 상태의 bmp를 뽑아내는 함수도 구현하였다. 이는 비동기로 이루어져 있어서 나중에 합칠 때, 코드를 맞추어 봐야겠다. 👍

  • 5시경에 멘토님과 미팅을 하였는데, 프로젝트의 방향성을 알러주셨고, 시간이 얼마 남지 않음에 따라 우리가 제시한 스펙 등을 검토해주셨다.

  • 코드를 정리 할 때, 무턱대고 클래스 맴버변수에 추가하였는데, 리팩토링을 하면 좋을 것 같다. 🧐

• 지현: Web Codecs 데모

  • 여러분의 PC 사양에 따라 동영상의 fps가 달라질 수 있습니다 호호호
    • 부캠 끝나고 취업하면 꼭 노트북 바꾼다 ㅂㄷㅂㄷ
  • 인코딩 한 결과물을 새 창 띄워서 캔버스에 디코딩하며 보여주려는데 어라 VideoFrame format이 null? 결국 데모는 console로 진행 😂
    • 왜인지 새 창 띄우는데도 고통받음... 아직도 원인을 모름...
  • 비동기 로직에서 A에서 B를 사용하고 B에서 A를 사용하는 형태로 코드를 짜게 되었는데, 선언 안 된 변수를 사용한다는 오류에 걸려서 고통받았음
    • let으로 선언만 한 후 뒤에서 할당하면 되는 것도 있고 안 되는 것도 있는데, JavaScript에서 어떤 게 참조고 어떤 게 값인지 조금 더 공부해야 할듯
  • Web Codecs 예시 코드에는 VideoEncoder의 config에 framerate가 있는데, 어째서인지 Draft에는 없다
    • 빼보니까 required field 없다고 에러나는 거 보면 Draft 업데이트가 안된 듯 하다.
    • 역시 실험 중인 기술이라고 문서에 미구현도 있고 스펙 달라진 것도 있고... 후...

📌 3일차

3일차 스크럼/회고 보러가기

우리가 할 일

• 스펙 정리(어떻게 비디오를 처리하여 가지고 있을 건지)
• 문서화 (금요일?)
• History store끝내기
• OffscreenCanvas 사용해보기
• 서명 기능 추가(시간 남으면)

공유할 사항

• History store에서 crop 되돌리기 시 CurrentTime 등 컴포넌트 오류

회고

• 오늘의 MVD : 승현님 🏆

  • 이 영광을 개발자님에게...

• 영언: WebAssembly 실습 및 mp4-h264 적용

  • 승현님과 함께 emscripten과 WebAssembly를 사용하여 사용자 정의 함수를 웹에서 실행시키는 것까지 실습을 해봤다.
  • 하지만 c/c++ 상에서 git으로 받은 ffmpeg 소스를 header로 불러올 때, 찾을 수 없다고 하는 오류가 발생하여 한참동안 막혀있었다.
    • 결국 밤에 그 문제는 해결을 했지만 또 다른 문제가 생겼다..
  • mp4-h264라는 wasm기반으로 ffmpeg를 사용한 encoder를 받아와주는 라이브러리를 사용했다.
  • 원본 영상의 프레임을 VideoTrackReader로 뽑아와서 webglController에 거쳐 filter를 적용하고 pixel 데이터로 리턴받아 각 데이터를 넣어주면 mp4파일로 받아올 수 있었다.
  • 하지만 기본 영상을 그대로 인코딩하여 파일로 추출하면 편집을 하지 않았음에도 영상이 뒤집혀서 나오는 문제가 있었다.
    • 오늘 원인을 파악하고 수정해야겠다.
  • 이제 오디오를 추출해서 mp4-h264로 얻어온 영상과 합치면 편집된 완전한 영상 파일을 얻어올 수 있을 것 같다. 하지만 합치는 과정에서 c/c++에서 ffmpeg를 다뤄야 할듯 하여 ffmpeg를 사용한 코드를 컴파일에 성공시키는 것이 우선일 것 같다.

• 민지: webCodecs + webWorker

  • webCodecs를 사용해서 인코딩,디코딩을하여 새로운 창을 띄워서 편집된 비디오를 보여주게하는데에서 오류가 생겼었는데 인코딩할때 codec 설정하는 곳에서 vp09는 불가능하고 vp8만 가능해서였다
  • 인코딩된 프레임을 모아서 mp4로 만들어주는 라이브러리를 찾아봤는데 못찾겠다...ㅠㅜ webCodecs써서 마무리짓고싶었는데 안되는 것 같아서 슬프다
  • webWorker와 offscreencanvas를 사용하는 법을 찾아서 실습해봤는데 우리 프로젝트에 적용하면 어떻게될지는 모르겠지만 그냥 실습했을때는 사용법이 어렵지는 않았다.
  • wasm도 써보고싶은데 영언님이랑 승현님이 하는거 살짝보니까 엄청 어려울것같다...ㅎ

• 승현: mp4-h264 라이브러리 적용 및 sign 조작 / wasm 실습 😎

  • 기존 Webgl 로 편집한 프레임들을 받아와서 mp4로 바꿔주는 mp4-h264 라이브러리를 통하여 audio가 없는 mp4 파일을 생성했다. 이제 audio와 video를 합쳐주는 일만 남았다.

  • 영언님과 같이 wasm / empscripten 실습을 진행하였고, 같은 한계에 도달한 것 같다. 그것은 바로 다른 header파일을 꺼내올 때의 문제였다. 😅

  • 협업을 마친 후 sign 조작을 구현했는데, 여기서 useCallback을 사용해봐서 좋았다. 다른 시점에 같은 handler 함수를 add하고 remove할 때, 메모이제이션을 해주어야 인식이 되는 것을 알 수 있었다. 💫

  • 크게는 클라이언트에서 audio / video를 합치는 일, 성능 향상 등의 이슈가 남았지만, 팀원들과 함께라면 할 수 있을 것 같다. 🎈

• 지현: WebM, mp4 컨테이너 공부 -> 포기

  • Web Codecs를 사용하여 인코딩된 프레임을 얻는 것까진 성공했는데, 이 프레임들을 그냥 잘 합치기만 하면 mp4가 되지 않을까? 했던 착각이 오늘 산산조각났다.
    • 정해진 파일 포맷으로 만들기만 하는것도 규칙에 맞춰 바이트 단위로 조작을 해야 되다보니 쉽지 않은 일이었다.
    • 기존의 사용자 친화적인 미디어 편집 소프트웨어들도 내부 어딘가에서 그 작업을 해주고 있다는걸 알게 되었다...
  • ffmpeg 대신 활용할 만한 JavaScript 라이브러리가 보이지 않는다... 대신 canvas / dataURL을 넣으면 합쳐서 mp4로 만들어주는 라이브러리는 여럿 찾았다.
    • Whammy라고 자바스크립트로만 하는 라이브러리가 있어 소스를 까 보니 mp4파일로 만들기 위해 굉장히 더럽고 치사한 하드코딩 노가다 작업을 하는 부분이 많았다...
    • 필요한 부분만 가져다 쓰기도 난해했고, 일단 그러려면 WebM이든 mp4든 컨테이너 형식 하나를 제대로 공부해야 할 것 같아서 봤는데, 수십 쪽의 영어 문서에 압도당해 포기했다.
  • Web Codecs에서 인코딩된 프레임을 디코딩했는데 format이 null이 되어 있어 뷰어조차 동작하지 않았던 문제의 원인은 Vp09 코덱 디코더가 구현이 안 되어서로 추측된다.
    • 아니 코덱을 vp8로 바꿨더니 바로 돌아가는게 말이 되냐고...
    • 이거 다른 데서 잘못했나 콘솔 한참 찍어봤는데 허무해 ㅠㅠ

📌 4일차

4일차 스크럼/회고 보러가기

우리가 할 일

• audio + video => video w/ audio
• 썸네일 css
• history 수정
• 비디오 다운로드

공유할 사항

• notion작성/기술문서화 (토)
• README

회고

• 오늘의 MVD : 👨‍👦‍ 👦 Mo doo 🏆 🏅 🔥 🤯 🌪 🌊

• 영언: 서명 기능 리팩토링 및 history 오류 수정, video 로컬 다운로드

  • 승현님이 webgl로 구현해주신 서명 기능을 Tools에서 리팩토링하고 확인, 삭제 버튼을 추가하여 확인을 누르는 경우 적용하고, 삭제를 하면 해당 서명을 지우도록 구현했다.
    • input의 range type으로 서명의 크기를 조절하도록 되어 있고, input의 range타입 css를 커스텀해서 위 아래로 조절하고, 보라색 배경을 가지도록 변경했다.
  • 서명 기능을 history로 관리를 하려고 생각해보니, 굳이 서명 기능을 history로 관리해야 하는지 의문이 들어서 서명 기능은 따로 관리를 하는 쪽으로 수정했다.
  • 드디어 편집한 영상을 mp4 파일로 다운로드 하는 것에 성공했다!! 비록 아직 오디오는 포함되지 않지만, 4주동안 작업한 결과물이 나오는 것 같아서 뿌듯했다.
    • encoder에서 blob파일로 받아오고, objectURL을 추출하여 a태그에 링크를 걸고 다운로드할 수 있도록 구현했다.
    • 사용자가 동의하는 경우에만 로컬로 바로 다운로드를 받고, blob을 다시 mp4파일로 만들어서 서버로 업로드한다.
  • webgl과 history의 status, 썸네일의 상태가 동일하게 동작하지 않아서 한참을 디버깅했다.
    • 회전과 반전의 늪..
  • 승현님과 클라이언트 측 다운로드를 구현하고, 민지님과 지현님이 서버에 업로드된 파일을 불러오는 기능을 구현해주셔서 양쪽의 기능을 합치니까 완성도가 확 늘어난 느낌이었다.
    • 하지만 합치는 과정에서 예상치못한 매우 많은 이슈가 발생해서 애를 많이 먹었다.
    • 갑자기 CropLayer가 잡히지 않고..(z-index 문제)
    • VideoTrackReader를 인식하지 못하는 것을 webpack이 잡아버리고.. (interface로 사기쳐서 해결)
    • development인데 production으로 빌드가 되고..(webpack mode설정을 변경해서 해결)
    • 모두 해결하니 정상적으로 동작했다!
  • 다들 어제 고생많으셨습니다!!!

• 민지: 썸네일 css + 오류수정

  • history store에 있는 상태를 가지고와서 Thumbnail에 css로 해당 상태를 적용시켜주었다.
  • 확대/축소에서 image자체를 확대/축소하니까 썸네일 부분이 점점 커져서 image를 다 div안에 넣고 overflow=hidden으로 해결했다
  • 반전+회전부분에서 css를 rotate -> scale -> scaleY 이렇게하니까 이상한 결과값이 나왔는데 div를 벗어나서 그럴 수 있다는 승현님의 도움을받아서 scale->scaleY->rotate 순으로 바꿔서해보니까 잘 해결되었다(순서도 중요하다니!)
  • 썸네일 css하면서 history store에 다양한 오류가 있다는 것을 깨닫고 수정했다
    • 상하반전의 역은 상하반전...
    • 확대/축소
  • 지현님이 구현한 비디오 편집기로 가져오기에서 nCloud랑 localhost 사이의 CORS문제가 있었는데, 찾아보니까 bucket에 CORS를 설정해줘야한다고해서 참고해서 postman의 aws-authorization?과 함께 해결~
  • 결과물이 나오고있는 것 같아서 좋다~ 영블갱 최고~✨
  • NODE_ENV문제도 있었네.. 다시 설정해서 잘 해결했다

• 승현: 서명기능 상세 구현 및 video 다운받기 / 오류 수정 ✨

  • WebGl 에서 서명기능을 상세하게 구현했다. 😎 video 텍스처 object가 편집되더라도 서명만큼은 편집되지 않고 그대로 나오게 된다. 이 과정에서 기존에 position배열을 배꾸는 연산에서 matrix 연산으로 바꾸는 작업을 진행하였다.

  • 영언님과 함께 video 다운받기를 구현해봤다. 😆 blob파일로 뽑아낸 데이터를 앵커 테그를 통하여 다운로드 할 수 있게 되었다. 재생도 되고 audio가 없는게 문제이긴 하지만 좋은 경험인 것 같았다.

  • 회전기능에서 민지님을 도와드렸던 부분(왼쪽 회전 / 상하반전 / 왼쪽 회전)을 webgl코드에도 적용하여 오류를 해결하였다. 💫

  • 지현님이 배포를 잘 마무리 해주셔서 데모가 벌써 기대가 된다. ⭐

  • 주말에는 밀렸던 기술부채를 청산해보고 싶다.

• 지현: history 관리, 어렵다

  • 이전/다음/원본으로 버튼을 누르면 store 관리도 해야 하고, WebGL 관리도 해야 하다 보니 둘 중 한쪽만 틀려도 페이지가 이상하게 보여서 어려웠다.
  • WebGL 관리는 side effect에 해당하다 보니 redux-saga에서 처리하게 되었는데, 필요 없는 코드를 없애면서 깔끔하고 직관적으로 동작하게 하기도 어려웠다.
  • redo는 분명 다시 실행인데, 무슨 생각으로 reverseEffect를 실행하게 만들어놔서 디버깅이 매우 난감했었다. (확대를 되돌리고 다시 하면 두 번 작아진다...??)
  • 상태관리는 나름 자신 있다고 생각했는데, 요즘 머리를 너무 과부하시켜서 그런지 실수가 좀 많았다. 1주만 더 버티면 이젠 쉴 수 있다...!
  • Postman에서 AWS signature authorization이 가능하다니, 이건 정말 최고야! 덕분에 편안하게 CORS 설정을 했다.
    • 네이버 API 문서 줄글에는 PUT으로, 예시 코드는 GET으로 되어 있는거 문제가 있다
  • 다른 팀원들도 함께 고생한 끝에 드디어 편집한 영상 mp4로 다운로드가 가능해졌다. 와 이제 핵심 기능이 거의 다 나와서 걱정도 많이 줄고 정말 뿌듯하다. 👍
  • 배포하고 나서 생각보다 별 문제가 없어서 다행이었다. 그런데 wasm 파일에 접근하기 위해 nginx 설정을 새벽 1시에 하다 보니 생각할 수 있는 최악의 방법으로 해결해서 찝찝하다.
    • nginx도 좀 공부해야 되는데... alias var/lib/jenkins/workspace/wave/client/node_modules/mp4-h264/build 는 선 넘었지 ㄹㅇㅋㅋ

📌 5일차

5일차 스크럼/회고 보러가기

뜨거운 이슈

• 서명 똑같은거 불러오면 안되는 거 처리
• 서버에서 중복 파일 거르기
• 맨처음으로가서? 뒤로가기하면 currentTime update안됨
• 파일이름입력 / 인코디할 때 키보드
• subTool 나와있는 상태에서 취소버튼누르면 subTool 그대로 나와있고 누를 수 있음

식은 이슈

• 확대하고 이전 누르고 다음 누르면 css 안됨
• 원본으로 누르면 webgl 초기화 안됨
• webgl 왼 상 왼 오류
• 서명 상하반전 이상함
• 영상 불러오면 초기화 이상함
• 크롭 레이어 선택이 안됨

우리가 할 일

• audio + video => video w/ audio

공유할 사항

• notion작성/기술문서화 (토)
• README