ChatGPT-4를 활용해서 대충 만든 라이브 스트리밍 클립 녹화 UserScript

Posted 2024. 2. 18. 04:31, Filed under: 개발/UserScript

Video-Element-Recorder-Userscript

ChatGPT-4를 이용해서, MediaRecorder API를 활용한 클립 녹화 UserScript를 제작해보았다. 최근 인공지능 기술이 급속도로 발전하면서, 다양한 분야에서 AI의 활용도가 높아지고 있다. 특히, 프로그래밍과 개발 과정에서 AI를 활용하는 사례가 점점 늘어나고 있는 추세다. 이런 흐름에 맞춰 나도 ChatGPT-4, OpenAI의 최신 AI 모델을 활용해보기로 했다. 그 결과, MediaRecorder API를 이용한 클립 녹화 기능을 가진 UserScript를 만들어보았다.

이 프로젝트를 시작하기 전에, UserScript가 무엇인지, 그리고 MediaRecorder API가 어떤 기능을 제공하는지 간단히 설명하겠다. UserScript는 사용자가 웹 페이지를 로드할 때 자동으로 실행되는 스크립트다. 이를 통해 사용자는 웹 페이지의 기본 동작을 변경하거나, 새로운 기능을 추가할 수 있다. 한편, MediaRecorder API는 미디어 스트림(예: 비디오나 오디오)을 녹화할 수 있게 해주는 웹 API다.

이 UserScript의 목적은 웹사이트에서 재생되는 비디오 클립을 사용자가 쉽게 녹화하고 다운로드할 수 있게 하는 것이다. 대상 웹사이트는 YouTube, Twitch, Facebook 등 다양하다. 스크립트를 실행하면, 화면의 왼쪽 하단에 녹화 버튼이 나타난다. 사용자가 이 버튼을 클릭하면 녹화가 시작되고, 다시 클릭하면 녹화가 종료된다. 녹화된 클립은 자동으로 사용자의 기기에 다운로드된다.

또한, 이 UserScript는 ChatGPT-4의 도움을 받아 개발되었다. ChatGPT-4는 코드 작성, 버그 수정, 기능 개선 제안 등 개발 과정 전반에 걸쳐 유용한 조언을 제공했다. 이를 통해, AI가 소프트웨어 개발 분야에서 어떻게 활용될 수 있는지 직접 체험해볼 수 있었다.

이 UserScript의 전체 코드와 설치 방법은 GitHub에서 확인할 수 있다. https://github.com/nomomo/Video-Element-Recorder-Userscript/.

이 프로젝트를 통해, AI와 협업하여 실제 유용한 도구를 만들 수 있다는 것을 경험했다. 또한, MediaRecorder API와 같은 웹 기술을 더 깊게 이해할 수 있는 기회가 되었다. 이 UserScript가 완벽하게 동작하지 않을 수도 있지만, 학습 과정에서 얻은 지식과 경험은 분명 큰 가치가 있다. 앞으로도 AI를 활용한 개발 프로젝트를 계속해 나갈 예정이다.

...위의 글을 읽었다면 무언가 이상한 느낌이 올텐데...

위의 내용은 ChatGPT-4 를 이용해서 작성한 글이다. 최근에서야 뒤늦게 ChatGPT Plus 를 결제해서 이것저것 테스트를 해보는 중이다.

아이콘 이미지도 만들었다.

그래서 뭘 만들었는데?

Twitch, Chzzk, Afreecatv 과 같은 웹사이트에서 비디오 클립을 파일로 녹화하는 방법은 여러가지가 있겠지만, 대표적인 예시를 세 개만 들자면,

OBS나 bandicam 같은 화면 녹화 프로그램을 이용하는 방법이 있을테고
Streamlink 와 같이 live stream 의 실제 chunk 를 파싱하여 녹화를 할 수도 있고
MediaRecorder API 를 이용해서 video element 를 녹화해버리는 확장 기능을 사용할 수도 있다.

이 중 가장 마지막 방법인 MediaRecorder API 를 활용해서 비디오 Clip 을 녹화하고 파일로 다운받을 수 있는 UserScript 를 ChatGPT-4 에게 만들어달라고 부탁했다. 나는 대충 아이디어만 줬다. 약 250줄의 스크립트를 다 만들고, 테스트하고, 지금 이 블로그 글의 이 문장을 쓰는데까지 정확히 딱 3시간이 걸렸다.

지원되는 사이트에 접속하면 좌측 하단에 버튼이 하나 나타난다.

버튼을 누르면 레코딩이 시작된다.

버튼을 다시 누르면 webm 확장자 형태로 저장할 수 있다.

스크립트가 활성화 된 상태로 툴바의 Tampermonkey 아이콘을 누르면 최대 비디오 시간과 최대 파일 사이즈를 설정할 수 있다.

Max Video Time 또는 Max File Size 를 0이 아닌 값으로 설정하면 아래와 같이 최대 값이 표시된다. 최대 시간 또는 파일 사이즈에 도달하면 자동으로 녹화가 중지된다.

그래서 잘 됨?

완전히 잘...은 안 됨... 그래도 분명히 완벽하게 동작하지는 않고, 예외 상황에 대한 처리가 되어있지 않고, 모든걸 완벽하게 커버하지는 못하는데, 간단히 만든 것 치고는 꽤 대충 범용적으로 잘 적용된다. 간단히 테스트를 해봤을 때 얼추 대충 잘 동작하는 라이브 스트리밍 사이트는 chzzk, youtube (FHD 까지만), afreecatv, hakuna.live, Tiktok 등이 있다. twitch.tv 의 경우 메인페이지에서만 녹화가 되고 kick.com 은 아예 안 되던데 왜 그런지는 아직 깊게 디버깅 해보지 않아 잘 모르겠다.

종종 녹화된 클립이 잘 재생되지 않는 문제가 있어서... 다운로드 받은 webm 파일을 다음과 같이 ffmpeg 로 변환해주니 문제가 없었다.

ffmpeg -y -i inputFileName -analyzeduration 2147483647 -probesize 2147483647 -c:v copy -c:a copy -start_at_zero -copyts outputFileName

또는

ffmpeg -y -i inputFileName -analyzeduration 2147483647 -probesize 2147483647 -start_at_zero -c:v copy -copyts outputFileName

대부분의 라이브 스트리밍 사이트에는 클립 제작을 위한 더 좋은 확장기능들이 이미 많이 개발되어 공개되어 있어서, 이번에 만든 스크립트에서 굳이 의미를 찾자면 여러 사이트에서 범용적으로 적용해볼 수 있다는 점 정도만 의미가 있겠다.

TO-DO

ffmpeg.wasm 으로 후처리
녹화 버튼을 클릭하기 전부터 녹화, 버튼 클릭 전 x초를 다운로드 비디오에 추가

어떻게 설치 & 사용함??

매끄럽게 동작하진 않긴 하지만, 만약 써보고 싶은 사람이 있다면 아래의 방법을 따르면 된다.

위 링크에서 자신이 사용할 브라우저에 맞는 유저스크립트 관리 확장기능(Tampermonkey)을 설치한다. 스크립트의 동작은 Chrome 브라우저에서만 확인했다.

위의 Tampermonkey 확장 기능 설치 이후 아래의 링크를 클릭하고, 뜨는 창에서 설치(Install) 버튼을 누르면 설치가 완료된다.

https://github.com/nomomo/Video-Element-Recorder-Userscript/raw/main/Video-Element-Recorder.user.js

ChatGPT-4 를 사용해 본 소감

ChatGPT-4를 결제하기 전인 얼마 전, Google 의 Gemini 가 공식 런칭되었다는 메일을 받고 바로 테스트를 해봤었다. 그런데 Gemini 가 ChatGPT-3.5 에서 지원되지 않는 이미지 생성이나 좀 할줄 알지 여전히 Bard 만큼 멍청한 문구를 나열하는 것을 보고있자니, Google이나 다른 빅테크사가 금방 OpenAI를 따라잡을 줄 알고 ChatGPT Plus를 지르지 않았던 나날들이 머릿속을 스쳐지나갔다. 그리고 바로 ChatGPT Plus 를 결제하고 여러가지 장난감을 만드는 중이다.

ChatGPT-3.5에 무언가 해달라고 시키다보면 전에 시킨걸 까먹고 나중에 시킨 것만 적용하는 경우가 많은데, ChatGPT-4는 그런 경우가 훨씬 적다고 느껴졌다. 사용자 경험이 확실히 향상되었다. 시간이 없어 구현하지 못하고 묵혀둔 아이디어로 장난감을 빠르게 만들기에 무척이나 좋았다. 다만 4는 3.5보다 설명충이 되어서 짧게 설명하라는 문구를 넣어주어야 답답하지 않았다.

이 글에서 소개하는 UserScript를 만드는데 총 3시간 정도가 걸렸지만, 처음부터 직접 검색해가며 만들어야 했다면 내가 MediaRecorder API 에 익숙하지 않은만큼 3시간 보다는 더 걸렸을 것이다. ChatGPT-4 가 대충 설명을 해도 확실히 3.5보다 좋은 결과를 주는데, 디테일한 설명을 해주면 확실히 더 잘 만든다. 최대 비디오 시간과 최대 파일 사이즈를 설정하는 기능을 구현하는데 시간이 가장 오래 걸렸는데, 처음부터 디테일하게 내가 원하는 방향을 설명했다면 아마 시간이 더욱 단축되었을 것이다.

참고로 이 글에서 소개하는 UserScript 는 코드의 90% 이상을 ChatGPT-4 를 이용해서 작성했고 & Github README 문서까지 ChatGPT-4 를 이용해서 작성했다. 알고보면 AI 느낌이 나는 어색한 부분들이 많지만 그냥 냅뒀다.

ChatGPT에게 이 글을 마무리 해보라고 시켜봤는데, "복잡한 질문에 대해서도 놀랍도록 세밀하고 구체적인 답변을 제공하며, 때로는 창의적인 해결책까지 제시한다." 라고 적던데 이정도는 아직 아니다.

"특히, 프로그래밍 관련 문제 해결이나 새로운 아이디어 구상에 있어서 ChatGPT-4의 도움을 받는 것은 매우 가치 있는 경험이었다. 기존의 한계를 넘어서는 이러한 발전은 AI 기술의 미래에 대한 기대를 한층 높여준다." → 이건 맞다.

"결론적으로, ChatGPT-4를 사용하면서 느낀 것은 기술의 진보가 사용자에게 얼마나 많은 가치를 제공할 수 있는지를 새삼 깨닫게 해주었다는 것이다. AI 기술의 발전은 우리의 일상뿐만 아니라, 작업 방식과 창의적인 과정에도 긍정적인 영향을 미칠 수 있음을 확인할 수 있었다. ChatGPT-4와 같은 혁신적인 도구는 앞으로도 계속해서 다양한 분야에서 새로운 가능성을 열어줄 것으로 기대된다."

Note

이 글에서 AI가 작성한 부분은 보라색 글씨로 표시되었다.