HLS 비디오 스트리밍 확인 방법

streampack의 전중입니다.
동영상 서비스를 제공하는 상황에서 브라우저에서 아래의 재생 흐름을 확인하는 경우가 있다고 생각합니다.재생성에 영향을 줄 때는 자세히 살펴봅니다.

배포 형식(meg-dash, HLS, progressive download)

흐름의 수

어느 흐름(비트레이트) 참조 - 영상 품질 확인

이번에는 배서에서 많이 쓰는 HLS에서 흐름을 확인하는 방법입니다.

개발자 도구 액세스

크롬의 경우
오른쪽 위 아이콘 -> 기타 도구 -> 개발자 도구
또는 도구 모음[표시] -> 개발/관리 -> 개발자 도구
사파리의 경우.
도구막대[개발]-> 웹 페이지 검사기 표시
Firefox
도구 모음[도구] -> 웹 개발 -> 개발 도구 표시
Windows Edge
오른쪽 위 아이콘 설정 -> 개발자 도구

흐름의 상세한 분석

먼저 [Network]-> 검색 필터에 있습니다.m3u8로 축소하면 결과는 다음과 같습니다.

HLS의 경우 m3u8의 선언 파일, 재생 목록 파일을 참조합니다.
선언문에는 흐름의 양, 비트레이트 정보(Bandwidth), 크기(Resolution) 등이 기재돼 있다.
재생 목록 파일은 파일 분할 순서를 정의하는 파일입니다.(여기서 자세히 설명하지 않음)
다음은 ts 파일이라고 불리는 비디오 분할 파일 (정보 블록 파일) 을 가져올 때의 요청 기록입니다.보기 편하도록.ts로 여과하다.

각자가 제공하는 서비스의 URL에 따라 streampack은 3, 4개의 흐름을 제공한다.

400k - 480x270

1000k(1M) - 960x540

2000k(2M) - 1280x720

그리고 유저는 다음 조건에 따라 정기적으로 흐름을 얻고 애니메이션을 재생합니다.

네트워크 대역폭

플레이어의 사이즈

CPU 등의 로드

위의 첨부 파일 이미지의 오른쪽에 있는 개발자 도구의 결과만 보면

최초 sd1000k 크기 스트림 가져오기

제6ts에서 네트워크 주파수대 등의 영향으로 sd400k 획득.그러니까 영상의 질이 나빠진다

그 다음hd계속해서 2000k를 받아서 더 좋은 품질의 동영상을 제공한다

이런 절차는 확인할 수 있다.
최근의 동영상 사이트는 거의 모두 HLS/mpeg-dash가 제공한 것이다
이 사이트에서 이 비트레이트를 준비했습니다.
선로가 열악한 환경 때문에 영상이 아닌 오디오의 흐름 등을 제공한다
개발 도구로 보면 새로운 발견이 있을 수 있다.