웹 기록 중Puppetier를 사용하는 유령 참가자가 있는 RTC

반응형

TLDR: 웹용 비디오 및 오디오 녹화를 설정하려면 Puppeteer-stream을 확인하십시오.RTC 영상 채팅.

최근에 웹을 기록하는 다양한 방법을 연구하고 있습니다.RTC 그룹 화상 채팅 응용 프로그램입니다. 연구를 하는 동안 저는 몇 가지 다른 방법들을 발견했습니다. 기본적으로 미팅을 클라이언트 또는 서버에 기록할 수 있습니다. 제가 시도한 클라이언트 메소드는 1) 캔버스 요소를 사용하여 canvas.captureStream(frameRate) 방법을 사용하여 레코드 같은 라이브러리를 사용하여 개별 스트림을 혼합한 것입니다.RTC.js 3) getDisplayMedia를 사용하여 이 멋진 오픈 소스 프로젝트 mirotalk가 사용하는 화면을 녹화합니다.

솔직히 이 방법들은 고객에게 이상적이지 않고 약간 진부합니다. 게다가 만약 당신이 그들 중 한 명을 일하게 할 수 있다면 그들은 고객에게 더 큰 부담을 줍니다. 제가 조사한 바로는 webRTC 미팅을 클라이언트 대신 서버에서 기록하는 것이 더 널리 사용되는 방법인 것 같습니다. 동작 방식은 상당히 창의적인 IMO로 유령 참가자가 꼭두각시 인형사 같은 서비스를 이용해 서버에 접속해 화면을 녹화한다. 이 접근 방식은 화면에서 비디오 참가자를 끌어다 놓고 녹화할 수 있는 재미있는 애니메이션을 클라이언트에 통합할 수 있으므로 훨씬 더 유연합니다. 유일한 단점은 각 녹화에 대해 인형사 인스턴스를 실행해야 하므로 확장하기가 어렵다는 것입니다.

 

이 서버측 접근 방식을 시작하기 위해 저는 가장 빠른 시간에 개발할 수 있는 몇 가지 작고 간단한 실험을 준비했습니다. 코드로 뛰어들기 전에 여기서 사용한 비디오 앱을 확인하세요. 이 훌륭한 repo에서 코드를 포크하여 사용 사례에 맞게 여러 가지 변경 사항을 적용했습니다. repo를 복제하는 것이 더 빠를 것이기 때문에 시작하기 위해 당신은 repo를 복제할 수 있습니다.

Puppetier가 무엇인지 이미 알고 있고 스크래핑을 위해 사용했을 것입니다. 하지만 간단한 설명은 크롬 또는 크롬 브라우저의 헤드리스 인스턴스를 실행할 수 있는 매우 인기 있는 Node JS 라이브러리라는 것입니다.

비디오 미팅에 참여하고 미팅 참가자의 사진을 찍는 Puppeteer 스크립트를 만들기 위해 루트 디렉터리에 Puppeteer.js라는 파일을 생성하고 아래에서 코드를 복사하여 붙여넣습니다. 이 스크립트에서는 비동기 IIF를 사용하여 크롬 인스턴스를 시작하고 URL https://video-meeting-socket.herokuapp.com/room,으로 이동하여 연결 버튼을 클릭한 다음 다른 참가자가 화면에 렌더링하고 스크린샷을 찍은 다음 브라우저를 닫습니다.

명령줄에서 이 스크립트를 실행하려면 다음을 사용합니다.

 

node puppeteer.js example

여기서 명령줄의 인수 예제는 생성되는 그림의 이름입니다. 꽤 멋지지, 응? 자, 한 걸음 더 나아가자. 크롬 개발툴 프로토콜을 사용하는 이 멋진 라이브러리 퍼피티어-스크린 레코더를 사용하여 비디오를 녹화해 봅시다. 그 도서관에는 문제에 빠르게 답변하는 훌륭한 관리인이 있습니다.

루트 디렉터리에 PuppeteerRecord.js라는 다른 파일을 생성하고 아래로부터 코드를 복사하여 파일로 붙여넣습니다.

 

명령줄에서 다음을 사용하여 이 스크립트를 실행합니다.

node puppeteerRecord.js example2

이렇게 하면 비디오 미팅에 참여하게 되며, 회의실에 있는 참가자들의 짧은 8초짜리 비디오를 녹화하게 됩니다. 현재 라이브러리에서 지원하지 않는 오디오만 누락되었습니다. 이를 해결하기 위해 우리는 덜 인기 있지만 완전히 기발한 다른 도서관을 이용할 것입니다. 매주 200건 정도밖에 다운로드가 안 되는데, 정말 보석이에요. 꼭두각시 인형사 스트림을 보세요. 또한 문제에 신속하게 대응하는 우수한 유지 관리인을 보유하고 있습니다. 만약 당신이 궁금하다면, 여기 퍼피티어 스트림의 원리에 대한 작가의 설명이 있다.

PuppeteerStream.js라는 파일을 루트 디렉터리에 만들고 아래 코드를 복사하여 붙여 넣습니다.

 

다음을 사용하여 스크립트 실행:

node puppeteerStream.js example3

이 예제에서는 비디오 및 오디오가 포함된 참가자와 함께 녹음해야 합니다. 와 재미없었어! 이러한 솔루션은 완벽하지는 않지만 웹을 위한 보다 강력한 기록 솔루션을 구축하는 데 도움이 될 것입니다.RTC 앱. 저로서는 좀 더 확장 가능하고 정교한 솔루션을 구축할 것입니다. 조만간 그 메모들과 함께 또 다른 기사를 올리겠습니다. 이 기사가 도움이 되길 바랍니다! 그렇다면 박수를 쳐주세요 :).

관련 링크:

• 인형 제작자: https://github.com/puppeteer/puppeteer
• 인형극 제작자-스크린 제작자: https://github.com/prasanaworld/puppeteer-screen-recorder
• puppeteer-stream: https://github.com/Flam3rboy/puppeteer-stream#readme