Algoroot's space

지난 포스팅 : [WillBe 화상 면접 커뮤니티] React Player를 통한 custom player만들기 (1) 재생, 멈춤 3초 후, 3초전 소리 조절 + 음소거 배속 (0.5배속, 1배속, 1.5배속, 2배속) 전체화면 (fullscreen) 오늘 다룰 내용 6. 재생시간 툴팁으로 표시 7-1. 좋아요, 스크랩 동영상 내에서 처리 7-2. 하이라이트 Top 3 시간 누르면 해당 시간으로 이동 + TroubleShooting 6. 재생시간 툴팁으로 표시 이미지와 같이 재생바와 표시되는 시간 툴팁을 구현하는 부분이다. 필요한 메소드는 재생 컨트롤러를 인식하는 seekTo(), 현재시간을 초로 반환하는 getCurrnetTime(), 총 시간을 반환하는 getDuration() 로 이 세가지가 필요..

이번에는 유저들의 면접 영상을 재생할 때 구현했던 플레이어 제작 과정을 소개하고자 한다. 플레이어를 제작하기 위한 사용한 라이브러리는 React Player이다. 다양한 API를 제공하고, 많은 개발자가 사용하며 최근까지도 업데이트가 활발이 되고 있어 선택하게 되었다. 추가적으로 플레이어에서 재생바 역할을 하는 부분만 스타일 잡는데 줘야 할 값들이 너무 많아 시간이 오래 소요될 것을 우려하여 mui의 Slider를 가져와서 사용하였다. 플레이어에 있는 기능은 Youtube와 Vimeo에 있는 기능을 넣으려고 노력하였다. 구현한 기능은 아래와 같다. 1. 재생, 멈춤 2. 3초 앞, 3초전 3. 소리 조절 + 음소거 4. 배속 (0.5배속, 1배속, 1.5배속, 2배속) 5. 전체화면 6. 재생시간 툴팁으..

오늘은 프로젝트에서 면접 영상을 찍은 후 업로드하는 과정에서 클라이언트, 서버, S3가 어떻게 영상을 주고받았는지에 대해 써보도록 하겠다. Pre-signed URL 방식을 택한 이유 클라이언트에서 S3에 파일을 업로드 하는 방법으로는 크게 2가지가 있다. 1. AWS SDK를 이용해 직접 업로드 2. API 서버에 파일을 전달하고 API 서버에서 S3에 업로드 1 번의 방법은 서버를 거치지 않지만, AWS SDK를 써서 S3이용이 가능해야 하기 때문에 브라우저에서 AWS SDK를 사용하는 시점에는 결국 AWS Access Key와 Secret Key 정보를 알고 있어야 한다. 이는 Key 정보가 브라우저에서 노출될 수 있고 악성 해커가 이를 이용하면 S3 리소스를 탈취해 갈 수 있는 위험성이 있다. 2..

지난 포스팅에서 프로젝트 주제와 기술 챌린지에 대한 간략한 내용을 담았다. 지난 포스팅을 토대로 오늘은 영상을 다루는 프로젝트를 시작하면서 처음 진행한 리서치에 대해 써보도록 하겠다. 오늘 다룰 내용은 크게 세 가지이다. 1. HTML5 video 2. WebRTC API, Library찾기 3. 모든 브라우저에 호환 가능한 코덱 찾기 웹캠, HTML5의 getUserMedia()의 역사 영상 쪽은 처음 공부하는 거라 몰랐던 부분이었는데 사실 영상을 촬영하는 것은 html5를 사용하는 것만으로도 가능하다는 것을 알았다. html5rocks.com에서 소개하는 튜토리얼을 통해 어떻게 우리가 영상을 브라우저에서 간단히 다룰 수 있게 되었는지의 역사를 알 수 있게 되었다. 오래된 포스팅이지만, 역사는 변하지 ..

프로젝트 주제 우리의 프로젝트 주제는 화상 면접 연습 커뮤니티 사이트이다. 여러 아이디어가 나왔지만 이 주제가 더더욱 와닿았던 것은 내가 직접 경험해 봤기 때문이다. 나의 경우에는 대학 졸업 후 바로 호주에서 회사생활을 2년 동안 하다가 왔다. 2년 전 구직활동을 하던 당시 대부분의 회사의 지원 조건에는 워킹홀리데이 비자는 해당되지 않은 곳 수두룩했다. 그렇게 지원조건이 안됨에도 포트폴리오와 커버레터를 정성스레 적어 보내고는 했다. 그러다가 한 회사에서 면접 제안이 왔고, 나는 단 한 번뿐인 그 기회를 꼭 잡아야겠다고 생각했다. 타지에서 모든 것을 혼자 준비했었기에 아무도 봐줄 사람이 없었고, 그때 내가 택한 방법은 나의 면접 모습을 녹화하는 것이었다. 예상가는 면접질문을 미리 정리하고, 그 질문에 대해..