5주차 스크럼

📌 1일차

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

주말에 한 일

• notion 작성/ README 작성
• 오류수정, emsdk 공부 아줒주주주ㅜㅜ조금
  • webGL context lost err고치고 싶었는데 실패ㅠ
• Webgl blur효과 적용방법 찾아보기 (fragment shader 바꾸면 됨)
• Web Assembly 학습 및 위키에 정리

우리가 할 일

• 오디오 추출
• 편집효과 추가 / offcanvas적용 = 영상편집효과 마무리

공유할 사항

• 1시 마스터
• 3시 멘토님 내일 4시

회고

• 오늘의 MVD : 영언님🎊

  • 우와~~ 너무좋다~~~~

• 영언: ffmpeg.wasm 도입 -> 드디어 오디오 mux 성공~ 📞

  • 가장 큰 문제거리가 드디어 해결됐다..ㅠㅠ
  • ffmpeg.wasm이 ffmpeg에서 지원하는 cli 명령을 모두 지원해주어서 생각보다 쉽게 작업이 진행될 수 있었다.
    • audio를 원본 영상에서 특정 구간을 선택해 추출하고, encoding된 영상과 mux하여 편집이 완료된 완전한 영상을 추출할 수 있다.
  • 지현님께서 framerate를 비는 만큼 채워주는 로직을 구현해주셔서 이제 영상이 더 빠르게 재생되는 문제는 해결이 된 것 같다.
    • 하지만 같은 frame으로 채워주기 때문에 아직 forest같은 용량이 큰 영상은 길이는 잘 맞게 뽑히지만 뚝뚝끊기는 느낌이 나게된다.
    • 인코딩 과정을 최적화해서 어느정도까지 해결이 될지는 아직 의문이다.. 오늘 시도해보자!
  • 승현님과 민지님이 새로운 필터 기능을 추가해주셔서 편집 효과가 더 다채로워졌다.
  • 이제 정말 마무리 단계에 온 것 같다. 좀만 더 힘냅시당~

• 민지: webGL 색감조절 + 이력서

  • fragment shader에 값을 줘서 블러처리랑 색감을 조절할 수 있다는 것을 알게되었다
  • offCanvas를 적용해서 성능을 높여보고 싶었는데 도입하는건 쉬운데 어디에 어떻게 도입하면 좋을지 생각을 해서 도입을 해봐야겠다
  • 어제는 일찍 구현을 끝내고 이력서를 작성했는데 이력서를 작성할 때마다 나를 돌아볼 수 있는 시간이 된 것 같아서 좋았다.
  • 이제 프로젝트 기능이 거의 완성된 것 같다

• 승현: WebGL을 이용해 필터를 적용해본 날~ 🏳‍🌈

  • 영상에 필터를 적용해 보았다. 여지껏 적용했던 것들은 모두 vertex나 texture를 조작하여 적용했었는데, 이번에는 쉐이더 조작을 통해서 이를 구현해 볼 수 있었다.
  • 민지님이랑 같이 구현을 했는데, 버튼이나 서브툴 등을 구현해주셔서 편하게 작업할 수 있었다. 😆
  • 추가 효과 자리 2개를 남겨놨는데, 어제 간단하게 해본 흑백 필터 등을 적용시키면 좋을 것 같다.
  • 히스토리도 도입해보려고 했지만 생각해보니 도입 안 해도 좋을 것 같았다.
  • 지현님이랑 영언님이 오디오 mux작업을 해주셔서 이제 백로그에 남는게 별로 없을 것 같다! 😋

• 지현: framerate 보존, ffmpeg.wasm 도입하는거 구경

  • 이제 드디어 소리가 안 날아간 영상을 얻을 수 있다...! 감동...!
  • forest.mp4 같은 경우는 frame이 눈에 보이다못해 거의 슬라이드 쇼가 되어버렸다 ㅠㅠ 이게 과연 최적화로 해결이 될까?
  • 고오급 필터팀도 생각보다 빨리 작업이 된 거 같은데, 기대된다 ㅎㅎ
  • 동료 피드백, 이력서, issue관리와 발표자료 만들기 등 문서화할 일이 쏟아지는 마지막 주이다. 괜히 리팩토링 기간으로 잡으라는게 아니군...

📌 2일차

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

우리가 할 일

• 고화질 영상에서 심한 fps 드랍 해결
  • offscreen + worker 도입
  • 인코딩 중 로딩 애니메이션 간소화
    • timestamp 기반 진행률 표시...가능할까?
  • 재생 속도 낮추기
    • 재생 속도를 낮추면 fps는 어떤 기준으로 나올까?

공유할 사항

• 4시 멘토님

회고

• 오늘의 MVD : 민지님 🔥

• 영언: frame을 지키기 위한 여정

  • frame drop을 해결하기 위해 다양한 최적화를 시도해봤다.
    • video의 재생속도를 늦춰서 VideoTrackReader가 좀 더 천천히 프레임들을 다 받을 수 있도록 시도해봤는데, 약간의 효과는 있었지만(5초에 9프레임 -> 5초에 45프레임) 영상의 크기가 큰 영상에 대해서는 효과가 많이 떨어졌다.
    • 인코딩 중에 canvas에 영상의 띄우는 것이 브라우저에게 많이 부담이 될까 하여 인코딩 중에 canvas를 렌더링하지 않도록해봤지만 효과는 거의 없었다.
    • Web Worker 도입 시도 : Web Worker와 Offscreen Canvas를 사용하여 canvas에 영상을 그리는 작업을 Worker의 Offscreen Canvas에 넘기려고 시도했는데, Worker에 전달하는 데이터는 모두 복사해서 넘겨주게 된다. 하지만 Worker에서는 DOM과 관련한 조작을 할 수 없어서 HTML 엘리먼트를 넘겨주는 것도 불가능하다.
    • 그래서 video 엘리먼트를 넘기는 것 대신 이미지를 추출하여 넘겨주려고 시도해봤지만, webglController에서 외부 라이브러리를 한 가지 사용하는데 Worker에서 외부 라이브러리를 import하는 과정에서 경로를 제대로 받아오지 못하여 실패했다..
    • 결국, video의 currentTime을 framerate에 맞추어 이동시키면서 그 때의 image를 뽑아오는 방식으로 구현하니 시간은 조금 더 걸렸지만 영상의 frame은 모두 보존할 수 있었다.
    • 이 방법은 썸네일을 뽑을 때 사용했던 방법인데, 결국 영상의 frame을 추출하는 곳에도 사용하게 되었다..ㅋㅋ
  • VideoTrackReader 마저 버리고 나니, WebCodecs의 API를 아무것도 사용하지 않는 상태가 되었다...
  • https도 WebCodecs을 위해 도입했던 것인데.. 뭔가 아쉬움이 남지만 여러 삽질 과정이 있었기에 지금 주요 기능이 모두 구현이 되었다고 생각한다!

• 민지: 만족스러운 날~

  • 월요일에는 webGL을 승현님이 거의 다 해주시고 나는 이해하기 바빴었는데, 오늘은 직접 webGL 코드에 기여할 수 있어서 뿌듯했다
  • 기존 블러 효과가 약하게 보여서 좀 더 강하게 블러 효과를 주려고 블러효과를 주는 범위를 넓히는 방법을 생각했는데, 처음에는 colorSum부분을 3x3 이 아니라 5x5로 해보면 되겠다고 생각했는데, 결국은 onePixel의 크기를 키우는 방법으로 수정을 했더니 블러효과가 강해졌다
  • 밝기 조절을 위해서 fragment Shader의 r,g,b값에 일정한 상수값을 더하거나 빼면 밝아지거나 어두워진다는 것을 알고 이를 적용해보았다
  • Thumbnail에도 추가된 효과를 적용해보기 위해서 history store에서 filter_status를 추가하여 영상에 효과가 입혀질 때 Thumbnail에도 효과를 적용할 수 있도록 했다. 하지만 Thumbnail은 css로 효과를 적용하고 있어서 r,g,b값을 바꾸는 효과는 적용하지 못했다. 썸네일 위에 div를 깔고 div의 배경색을 조절하는 방법을 생각해보고 했는데 영상의 r,g,b값만 빼서 보여주는거랑 원본에 r,g,b 색을 씌우는거는 다르게보여서 그냥 미구현상태로 두었다
  • 볼륨 조절기능도 만들었다 input range의 값이 바뀔때마다 소리조절을 해주기위해서 currentVideo store에서 volume의 상태를 관리해주게하고 소리가 바뀌게 했다. 볼륨을 조절하는 창을 만드는게 가장 어려웠던 것 같다. css는 내맘대로 되지 않는다
  • webCodecs를 더이상 쓰지않는다는 말을 듣고 조금 슬펐지만 더 완성도 있게된 것 같아서 좋다.

• 승현: 영상 필터 기능을 만들어 보고 볼륨 조절 기능도 만들어 본 날~ 😎

  • 오늘은 기존에 프로젝트에 기능을 추가하여 폴리싱 하는 작업을 하였다.

  • 민지님과 같이 영상에 RGB필터를 씌우거나 블러 필터를 씌워보았다. 🖼 또 흑백 필터도 씌워보았는데 모두 fragment shader를 조작하여 효과 구현이 가능했다. 민지님이 blur 범위를 늘리는 방법을 알려주셔서 잘 적용한 것 같았다.

  • 볼륨 조절기능을 만들어보았다. 🔈🔉🔊 간단한 기능이지만 정말 손이 많이 간다는 것을 알 수 있었다. 마우스의 위치에 따른 인터렉션, 음소거, 볼륨 조절 등 하나하나 다 컨트롤 해 줘야 우리가 원하는 대로 작동하는 볼륨 조절 장치가 되었다.

  • 그래도 이제 지현님 영언님 유닛에서 해주신 결과물과 합쳐보니 그럴싸한 결과물이 나타난 것 같아서 마음에 들었다. 🎞

  • 수목금토일 5일 남았는데 분발해서 좋은 결과물을 보고싶다!

• 지현: 결국 Web Codecs는 떠나보냈다...

  • VideoTrackReader
    • fps가 제한을 걸어도 처리가 늦어지면 떨어졌다. 재생되는 속도에 맞춰(어쩌면 재생 알아서 속도를 늦춰서라도?) VideoFrame을 줄 수 있을거라는 기대는 산산조각났다.
    • PC 및 브라우저 환경에 따라 달라질 수 있는 처리 속도를 고려하지 못한 것이 문제였다. 썸네일 뽑을 때 현재 시간을 움직이던 로직을 비디오에 진작 적용해볼 걸...
  • VideoEncoder
    • 저번에도 언급했지만, EncodedVideoChunk까지 얻는 데는 성공했어도 이를 mp4같은 컨테이너 포맷으로 담는 것은 Web Codecs의 지원 범위를 벗어나 난항을 겪었다.
    • 컨테이너 포맷을 제대로 공부해서 구현하기는 시간 상 무리고, 인코딩된 프레임을 합치는 JavaScript 라이브러리도 마땅히 없어서 사용을 포기했다.
  • Web Worker를 사용한 최적화 시도
    • Web Worker를 이용하여 비디오를 재생하는 메인 스레드에서 인코딩 및 그래픽스 작업을 분리하면 좋을 것 같았다. 하지만 어림도 없지
    • 인코딩과 그래픽스 작업 모두 외부 라이브러리를 사용하고 있는데, worker script에서 import를 사용하려면 importScripts 또는 { type: 'module' }로 해결해야 한다더라.
    • 근데 왜 둘 다 해도 안되지?? 오류 메시지가 WEBPACK_ 어쩌구 뜨는 걸 보면 번들링하는 과정에서 함수의 import 경로를 webpack에서 건드리는데, 꼬인 것 같다...
    • 꼭 필요한 과정 같았지만, 결국 시간 내로 해결할 자신도 없고 스트레스만 받은 채 더 진행할 수는 없어서 포기했다.
  • 코드 로직 수정을 통한 최적화 시도
    • 비디오 저속재생, 인코딩 중 캔버스 보여주지 않기, OffscreenCanvas 등 온갖 방법을 다 시도해 보있지만... (그러나 효과는 별로인 듯 하다 포켓몬 짤)
    • WebGL 행렬 연산을 여러번 나눠서 하지 않고 한 번에 하기 같은 건 아직 시도를 안 해 봤지만, WebglController 로직이 현재 매우 복잡해서 건들기 힘들 것 같다.
    • 인코딩 할 때 현재 시간을 움직이는 것은 매번 이벤트 리스너를 등록하지 않고, onseeked를 사용해서 한 번만 등록했다.
  • 요약
    • 최적화 그거 쉬운거 아니다. 어디 때문에 느리겠지 하는 직관 생각보다 잘 틀린다.
    • 병렬처리, 멀티스레딩 그거도 쉬운거 아니다. 하라는 대로 한거 같은데 이거 외않됀데;
    • 사용할 라이브러리 고르는 거 그것마저 쉬운거 아니다. 최대한 빠르게 제대로 파악하고, 안 될 것 같으면 과감히 포기해야 한다.

📌 3일차

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

우리가 할 일

• ppt, 발표영상
• 각종 오류 수정
  • 해상도 조정 및 출력
  • 세로 영상 문제 해결
  • 중복파일 db
• 인코딩 % 출력
• 11시 마지막 마스터클래스

공유할 사항

회고

• 오늘의 MVD : 모두~!

• 영언: 영상 해상도 조정 및 돌아간 영상 처리

  • 세로로 찍힌 영상을 올리는 경우, 영상이 90도가 돌아가 상태로 출력되는 이슈가 있었다.
    • 승현님께서 영상의 메타데이터에 Rotation 정보가 들어있다는 것을 알려주셔서 처음 영상을 로딩할 때, 메타데이터를 가져오는 방법을 시도해봤다.
    • js로는 바로 영상의 메타데이터에 접근할 수 없기 때문에 ffmpeg.wasm 을 사용하거나, mediainfo.js 를 사용하여 메타데이터에 접근하려고 시도해봤다.
    • 처음에는 ffmpeg.wasm의 메타데이터를 확인하는 명령으로 시도해봤는데, ffmpeg.run() 메서드는 반환값이 없기 때문에 MEMFS에 출력된 영상의 메타데이터를 테스트 파일을 쓰고 그 파일을 writeFile로 읽어오려고 시도했다.
    • 하지만 출력결과를 파일로 쓰는 리눅스 명령을 ffmpeg.run()의 인자로 같이 넣으면 실행이 되지 않는 것 같아 실패했다.
    • 그래서 mediainfo.js를 사용했고(내부적으로는 wasm을 사용하는 라이브러리), 영상의 메타데이터를 객체 형태로 얻어오는 것에 성공했고, 그 객체의 video 정보에 접근하여 Rotation 속성의 값을 얻어오는 것에 성공했다.
    • 여기서 새롭게 알게된 사실은 0도라고 생각했던 영상이 사실은 90도로 처리되고 있었던 것이다.
    • 영상을 로딩하면서 Rotation값을 얻고, webglController에서 그 값에 따라 영상을 돌아가지 않은 상태로 얻어내는 것에 성공했다.
  • 영상 해상도 비율 조정
    • canvas의 width와 height만 조절하면 영상의 해상도를 조절할 수 있다는 것을 알게되어서 너무 큰 영상의 경우 해상도를 낮춰 인코딩 속도를 높이는 방법을 생각했다.
    • 그러면서 16:9, 4:3으로 영상의 비율을 조정하는 것도 어렵지 않게 구현할 수 있을 것 같다고 생각하여 바로 시도해봤는데, 비율을 인자로 받아 각각 width = Math.sqrt(ratio * resolution), height = resolution / width의 식으로 시도해봤는데 바로 성공해서 좋았다.
    • 하지만 영상을 인코딩하려하니 바로 에러가 발생했다.
    • 원인을 찾아보니 Uint8Array에 영상의 픽셀 수 만큼 크기를 잡아주는데, 픽셀화 한 뒤 인코더에 넣을 때 인코더에 설정한 (width + height) * 4 의 결과와 일치하지 않아서 그렇다는 것을 알게됐다.
    • 그래서 모두 찍어봤는데, 두 값이 일치함에도 불구하고 계속 에러를 뱉어서 오늘 다시 시도해봐야겠다.

• 민지: 영상 효과 초기화 + ppt

  • 영상에 적용된 필터 효과들을 초기화버튼,원본으로 버튼을 누르면 없어지게 구현
    • redux,redux-saga부분 건드는게 예전에는 좀 두려웠는데 이제 두렵지않다!
  • 지현님의 리드하에 필터 range부분 리팩토링 진행했다. 리팩토링은 항상 어렵다~~ 항상 더 좋은 코드가 어떤건지 생각해보고 구현해야겠다
  • 발표를 위한 ppt를 만들었는데, 하고 싶은 얘기는 많은데 시간이 너무 짧게 정해져있는게 아쉬웠다
  • 주말에 네트워킹 데이 준비를 하면서 모르는 부분이 없게 해야겠다!

• 승현: 발표 PPT를 만들어보고 영상 메타데이터를 뜯어본 날~ 🛩

  • 발표를 위해 PPT 포멧을 만들어 보았다. 발표 순서에 따라서 슬라이드들을 구성하고 내부 내용을 지현님 민지님께 맡겼는데 좋은 결과물이 나온 것 같아서 마음에 들었다. 이제 열심히 대본을 쓰고 인지하고 발표 준비를 해봐야겠다. 🌈

  • 영상의 메타데이터 중에 Rotation 정보가 있는 것을 알았고, 이를 javascript에서는 곧바로 불러올 수 없다는 것도 알았다. 따라서 mediainfo 라이브러리의 도움을 받아서 해당 정보를 불러왔는데, 사실 우리가 핸드폰으로 바라보던 세계는 90도 돌아간 세계였다는 것에 깜짝 놀랐다. 😆

  • 웹지엘 색감조절한 부분을 문서로 정리하면 좋을 것 같았다. 주말에 해봐야지. 💫

  • 부스트캠프 티셔츠가 왔다. 발표 때 입을것이 마땅하지 않았는데 다행이었다. 😎

• 지현: 5주를 7분 안에 담아보자...FAIL

  • 다른 조도 다 할 만한 얘기, 결과의 디테일에 대한 얘기는 다 빼고 문제 해결 과정을 중심으로 ppt를 만들었는데 31슬라이드에 7분 50초쯤 나온다.
    • 게다가 PR 리뷰하는 과정 넣는 것도 까먹었다... 시간 상 언급도 힘들 것 같지만...
  • 발표자료를 만들면서 프로젝트 동안 겪었던 고비들, 그리고 이를 해결하기 위한 발버둥(?)이 하나씩 스쳐 지나가면서 힘들었지만 뿌듯했던 5주를 보낸 것 같다는 생각이 든다.
  • 브라우저에서 멀티미디어를 다루는 프로젝트다 보니 기술적인 난이도나 학습한 지식의 분량이 적지 않은 것 같다. 이제 어지간한 새로운 분야는 빠르게 극복이 가능하지 않을까? ㅎㅎ
  • 부스트캠프 티셔츠가 왔다. 기념 티셔츠임에도 로고가 예쁘게 잘 박혀 있어서 무난하게 입기 좋아 보인다. 발표 날 입어야징
  • 발표자료 만드는 시간에 개발 맡은 팀원들이 생각보다 어려운 문제를 굉장히 빨리 해결해 주셔서 든든했다. 이제 정말 기능 완성과 다듬기의 끝이 보인다!

📌 4일차

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

우리가 할 일

• ppt, 데모영상 마무리
• 각종 오류 수정
  • 해상도 조정 및 출력
• 휴식

공유할 사항

📌 5일차

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

우리가 할 일

• 각종 오류 수정
  • 해상도 조정 및 출력
• 배포