HLS 스트림에서 미리보기 이미지를 생성하는 서비스
<html>
<head>
<title>Video Page</title>
<script src="https://unpkg.com/@eyevinn/[email protected]/dist/web-player.component.js"></script>
</head>
<body>
<eyevinn-video source="https://demo.vc.eyevinn.technology/channels/eyevinn/master.m3u8" muted="true" autoplay="true"></eyevinn-video>
</body>
</html>
이 웹 페이지를 소셜 미디어에 공유할 때 포스터가 있으면 좋을 것입니다. 이미지에 URL과 함께 open graph 태그
og:image를 추가하여 추가할 수 있습니다. 그리고 여기에서 이 서비스가 관련이 있습니다. 요청 시 해당 HLS에서 이미지를 생성하며 이 메타데이터 태그를 헤더에 추가하여 이러한 방식으로 사용할 수 있습니다. <meta property="og:url" content="https://hlspreview.cdn.eyevinn.technology/image?u=https%3A%2F%2Fdemo.vc.eyevinn.technology%2Fchannels%2Fdemo%2Fmaster.m3u8" />
아래의 실제 예: https://hlspreview.cdn.eyevinn.technology/image?u=https%3A%2F%2Fdemo.vc.eyevinn.technology%2Fchannels%2Fdemo%2Fmaster.m3u8
HLS 스트림의 포스터 이미지를 얻는 매우 깔끔한 방법을 볼 수 있습니다.
어떻게 작동합니까?
이 서비스의 소스 코드는 available on GitHub이며 오픈 소스로 공개되었으므로 사용 및 기여를 환영합니다.
NodeJS로 작성된 마이크로 서비스이며 비디오 처리를 위해 ffmpeg를 사용합니다. 두 개의 쿼리 매개변수
/image 및 /video를 사용하는 두 개의 엔드포인트u 및 pos를 제공하며, 여기서 두 번째는 선택 사항입니다. 매개변수u에는 HLS 스트림에 대한 urlencoded URL이 포함되어 있습니다.이 엔드포인트가 요청되면 HLS를 가져와 구문 분석합니다.
const m3u = await fetchAndParseHLS(searchParams.get("u"));
그런 다음 매개변수
pos의 값(초)에 가까운 미디어 청크를 가져옵니다. 제공하지 않으면 첫 번째 미디어 청크를 가정합니다.const segmentUrl = findSegmentAtPosition(m3u, pos).get("uri");
그런 다음 미디어 청크에 대한 URL이 이 미디어 청크에서 PNG를 렌더링하는 함수에 전달됩니다.
const data = await renderPngFromTS(segmentUrl);
이미지 데이터를 포함하는 바이너리 버퍼를 반환합니다. 이 바이너리 데이터는
Content-Type 가 image/png 로 설정된 클라이언트 요청에 대한 응답입니다.미디어 청크를 처리하기 위해 ffmpeg를 사용합니다.
ffmpeg -y -i <media-chunk-url> -ss 1 -t 1 -f mjpeg <outputfile-path>.png
출력 파일 이름은 미디어 청크 URL의 md5 해시를 기반으로 생성됩니다. 그런 다음 파일을 읽고 내용을 버퍼에 저장합니다.
const data = readFileSync(outputFilePath);
이 마이크로 서비스는 직접 사용하고자 하는 경우 공용 컨테이너로도 사용할 수 있습니다.
docker run --rm -p 8000:8000 eyevinntechnology/hlspreview:<version>
스케일링
이 서비스를 확장하기 위해 캐시 지시문을 사용하고 CDN을 앞에 배치합니다. CDN 속성을 구성할 때 중요한 것은 캐시 키에 쿼리 매개변수를 포함하고 캐시된 리소스를 식별하는 부분을 확인하는 것입니다. 이 예에서 우리는 응답에서 최대 연령을 3600초(1시간)로 설정했습니다. 이렇게 하면 생성될 동일한 이미지에 대한 모든 요청에 대해 이 서비스를 오프로드합니다. 이 예제 설정에서는 AWS ELB를 사용하여 컨테이너에 액세스하고 AWS Cloudfront를 CDN으로 사용하여 AWS ECS에서 컨테이너를 실행하고 있습니다. AWS 관련 기능이 포함되어 있지 않으므로 다른 클라우드 인프라에 쉽게 복제할 수 있는 설정입니다.
흥미롭고 영감을 얻으셨기를 바랍니다. 질문이나 생각이 있으면 알려주세요. 당신은 여기에 추가로 나를 찾을 수 있습니다.
아이빈 테크놀로지 소개
Eyevinn Technology는 비디오 및 스트리밍 전문 독립 컨설턴트 회사입니다. 플랫폼이나 기술 공급업체와 상업적으로 연결되지 않는 방식으로 독립적입니다.
Eyevinn에서 모든 소프트웨어 개발자 컨설턴트는 오픈 소스 개발 및 오픈 소스 커뮤니티에 대한 기여를 위해 예약된 전용 예산을 가지고 있습니다. 이것은 우리에게 혁신, 팀 빌딩 및 개인 역량 개발을 위한 여지를 제공합니다. 또한 회사로서 오픈 소스 커뮤니티에 다시 기여할 수 있는 방법을 제공합니다.
Eyevinn에 대해 더 알고 싶고 여기에서 어떻게 작동하는지 알고 싶습니다. [email protected]로 문의하십시오!
Reference
이 문제에 관하여(HLS 스트림에서 미리보기 이미지를 생성하는 서비스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/video/service-to-generate-preview-image-from-hls-stream-2djg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
