Apple과 비슷한 동시 방송 공유 기능을 구축하고 싶어서 이 기간 동안 오디오와 비디오에 대해 얕은 학습을 했고, 지금은 간략하게 요약하고 기록하겠습니다.
내 요구 사항은 두 사람이 비디오를 재생할 수 있도록 가능한 한 간단한 솔루션을 찾는 것입니다. 진행과 작업이 동기화될 수 있으므로 기본적으로 지연이 없으며 WebVTT 자막이 필요 없이 동시에 표시될 수 있습니다. 추가 서버의 경우.
비디오 스트리밍 솔루션
프론트엔드 비디오 스트림을 주로 사용하다가 hls.js드디어 flv.js사용 dash.js하게 되었습니다 hls.js.
hls.js
hls.js주로 온라인 동영상 재생에 사용되며, 큰 동영상을 몇 초 단위의 작은 세그먼트로 분할하여 작은 세그먼트만 로딩하여 동영상을 완전히 재생할 수 있도록 하는 것이 원리입니다.
ffmpeg비디오 생성에 사용
ffmpeg -i video.mkv -b:v:0 12M -c:v h264_videotoolbox -c:s webvtt -c:a mp3 -map 0:v -map 0:a:0 -map 0:s:34 -f hls -var_stream_map "v:0,a:0,s:0,sgroup:subtitle,language:zh" -master_pl_name master.m3u8 -hls_time 6 -hls_playlist_type vod -muxdelay 0 video.m3u8
-b:v:0 12M12M 코드 속도h264_videotoolboxMac용 하드 디코딩으로, 최근에는 hevc도 지원되지만 현재 h264가 여전히 주류 브라우저입니다.-map 0:s:3434번째 자막을 가져와서webvtt포맷 으로 변환하세요-var_stream_map "v:0,a:0,s:0,sgroup:subtitle,language:zh"그룹-hls_time 66초 동안 슬라이스-muxdelay 0자막이 동기화되지 않는 문제를 해결하세요.
마지막으로 로드되어 master.m3u8플레이할 준비가 되었습니다.
flv.js
flv.jsbilibili의 오픈소스이며, 라이브 비디오 스트리밍에 사용할 수 있으며 RTMP 스트리밍을 사용하지만 bilibili에서는 이를 사용하지 않습니다.
ffmpeg푸시 스트리밍 사용
ffmpeg -re -i video.mkv -c:v h264_videotoolbox -f flv rtmp://localhost/live/livestream
먼저 비디오를 스트리밍 미디어 서버에 푸시한 다음 스트리밍 미디어 서버에서 비디오를 읽습니다.
rtmp://localhost/live/livestreamNode-Media-Server사용이 간단 하고 사용이 더 복잡한 해당 스트리밍 미디어 서버로 srsRTMP 스트림을 WebRTC 스트림으로 변환할 수 있습니다.
dash.js
dash.js또한 비디오를 라이브 방송이나 주문형 비디오로 분할하는데, bilibili와 같은 많은 주요 회사에서 이를 사용합니다.
WebRTC
WebRTC영상 재생도 가능하지만 해상도는 브라우저에서 조절하고 WebRTCpoint-to-point 방식으로 서버는 필요하지 않지만 정보 교환을 위해서는 시그널링 서버가 필요하며 이는 방번호와 타인을 생성하는 것과 같다. 방에 참여하면 이 방 번호를 전달하려면 여전히 서버가 필요합니다.
무료 플랜을 찾아서 사용했습니다 peer.js.
내 생각
처음에는 브라우저가 로컬 영상을 직접 로딩해 WebRTC를 통해 상대방에게 전송하는 것으로 생각했는데, 자막도 WebRTC를 통해 전송할 수 있어 추가 작업이 필요 없고 WebRTC 지연도 충분히 낮다.
하지만 한 가지 고려하지 못한 점은 제가 다운로드한 동영상이 기본적으로 HEVC HDR이기 때문에 트랜스코딩을 해야 하고, 자막도 WebVTT로 변환해야 한다는 것입니다. 다만 트랜스코딩에는 시간이 걸립니다. 브라우저에서 실행할 수 있고 Wasm, 라는 프로젝트가 있는데 ffmpeg.wasm, 브라우저를 사용하여 hevc를 디코딩하면 작동됩니다. 결과적으로 수백 Mb의 비디오는 오류를 보고하고 에서 디코딩할 수 없습니다. 모두.
브라우저가 디코딩할 수 없기 때문에 RTMP 스트림을 로컬에서 디코딩하여 브라우저 flv.js에 다음 WebRTC를 통해 브라우저에서 비디오 스트림을 전송합니다. flv.js그러나 video태그에는 captureStream방법이 없으며 비디오 스트림을 WebRTC로 전달할 수 없습니다. 형, 다시 생각해 보세요. 이 방법 canvas은 동영상을 재생한 후 canvas호출하는 방식입니다 captureStream. 문제가 또 발생합니다. HDR을 지원하지 않습니다. 한편으로는 매우 혼란스럽습니다.
WebRTC를 위한 가장 좋은 솔루션은 SRS를 사용하여 RTMP를 WebRTC로 변환한 다음 WebRTC를 사용하여 브라우저에서 재생하는 것입니다.
고민 끝에 여전히 hls.js 솔루션을 선택했습니다. 내 M2가 1080p를 트랜스코딩한다면 1시간짜리 비디오는 약 6분 정도가 적당합니다. 주된 이유는 내 컴퓨터에 동적 공용 IP가 있기 때문이므로 그냥 호출합니다. it Xiao 내 파트너가 내 로컬 컴퓨터에 액세스하여 hls.js원활하고 원활한 재생을 사용한 다음 WebRTC를 사용하여 동기화를 위한 재생 작업을 전송합니다.
그래서 늘 장난치며 배우고 성장하고 있어요.
마침내
JS 고빈도 면접 질문 75개를 정리하여 답변과 분석을 제공함으로써 기본적으로 JS에 대한 면접관의 질문에 대응할 수 있음을 보장할 수 있습니다.
도움이 필요한 친구들은 아래 카드를 클릭해 무료로 받아보고 공유할 수 있습니다.