Safari의 HTML 비디오 태그에서 오디오 및 비디오를 캡처하는 방법이 있습니까?

Question

Chrome 및 Firefox에서는 HTMLMediaElement.captureMediaStream()을 사용하여 스트림을 캡처할 수 있습니다. 그러나 Safari는 HTMLMediaElement.captureMediaStream()을 지원하지 않습니다.

동영상 태그의 소스는 세그먼트별로 수신된 hls 데이터입니다.

Safari에서 미디어 데이터를 MediaStream으로 캡처하는 다른 방법이 있나요?

Answer 1

Safari는 보시다시피 적어도 현재로서는 직접적인 CaptureMediaStream 방법을 지원하지 않습니다. 그러나 이를 달성하는 한 가지 방법은 브라우저 ffmpeg 기반 방법을 사용하는 것입니다.

과거에는 브라우저에서 ffmpeg를 실행하는 것이 너무 크고 너무 느리기 때문에 대부분의 작업에 실용적이지 않았지만 최근 WASM(웹 어셈블리) 기반 ffmpeg 구현을 통해 접근성이 더 높아졌습니다.

다음 라이브러리를 사용하여 자신만의 ffmpeg 기반 솔루션을 구축할 수 있습니다.

• https://github.com/ffmpegwasm/ffmpeg.wasm

SharedArrayBuffer 지원의 필요성을 실제로 인식해야 합니다.

위에 언급된 링크는 여기입니다: https://caniuse.com/sharedarraybuffer

많은 일반적인 ffmpeg 작업에서는 잘 작동하지만 더 큰 비디오 파일에는 민감합니다. HLS에서 파일로 변환을 시도한 적이 없으므로 요구 사항에 맞는지 실험해야 합니다. 사용 사례를 테스트할 수 있는 데모는 다음과 같습니다. https://ffmpegwasm.netlify. 앱/#데모

사용하려는 ffmpeg 명령은 오디오에 따라 다르지만 대부분 다음과 같습니다.

(자세한 내용은 이 질문과 답변을 참조하세요: HLS(m3u8)를 MP4로 변환)

다음과 같은 오픈 소스 기성 솔루션도 있습니다. 예:

• https://github.com/tuhinpal/hls-downloader?ref =reactjsexample.com