nginx - http - flv - module 의 사용 기록

이전 웹 사 이 드 에서 카메라 데 이 터 를 재생 하 는 것 은 모두 video 태그 로 rtmp 흐름 을 재생 하려 면 플래시 에 의존 해 야 했 고, chrome 브 라 우 저 는 2020 년 12 월 말 까지 플래시 를 지원 하고 있 으 며, 지금 은 플래시 로 rtmp 를 재생 할 때마다 플래시 를 사용 해 야 하기 때문에 매우 번 거 로 웠 다.
이전에 사용 한 것 은 nginx - rtmp 모듈 로 스 트림 미디어 서버 를 만 들 었 습 니 다. 지금 은 인터넷 에서 http - flv 를 사용 하 는 방식 으로 rtmp 방식 을 대체 하여 플래시 의존 을 없 애 는 것 을 찾 았 습 니 다. 삐 리 삐 리 오픈 소스 의 nginx 스 트림 미디어 모듈 을 사용 하여 다음 과 같이 기록 합 니 다.
준비:
nginx - http - flv - module 윈도 우즈 다운로드
윈도 우즈 시스템
vlc (선택 가능)
ffmpeg 푸 시 명령

ffmpeg  -i rtsp://admin:[email protected]:554/h264/ch1/main/av_stream -vcodec copy -acodec copy  -f flv   rtmp://localhost/live/video_1"

주석 을 달다
위 는 rtsp 흐름 (주류 카메라 에서 나 오 는 흐름) 을 rtmp 흐름 으로 바 꾸 는 거 예요.
- i 입력 흐름 demo 는 하 이 콘 카메라 의 메 인 코드 흐름 으로 서로 다른 카메라 흐름 의 형식 이 다 르 므 로 참고 할 수 있 습 니 다.
마지막 rtmp 는 전 환 된 스 트림 입 니 다. 이것 은 주로 nginx 스 트림 미디어 서버 에 대응 하 는 rtmp application 모듈 입 니 다. 하 나 는 주소 이 고 하 나 는 application 의 이름 입 니 다. 그렇지 않 으 면 스 트림 이 성공 하지 못 할 것 입 니 다.
사실 nginx 로 스 트 리밍 을 하지 않 아 도 되 고 개인 적 으로 srs 를 스 트 리밍 서버 로 좋아 합 니 다.
ffmpeg 문서 주소
nginx 스 트림 미디어 서버 설정

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

#   RTMP  
rtmp {
    server {
        listen 1935; #     

        chunk_size 4000;
        application live {  //  
            live on;
	    	gop_cache on;
        }
    }
}

# HTTP  
http {
    include       mime.types;
    default_type  application/octet-stream;

    #access_log  logs/access.log  main;

    server {
    	listen  8080; #     
		location /stat.xsl {
       		root html;
    	}
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
    	}
	    location / {
            root html;
    	}
	    location /live {  
            flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
            add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
            add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            add_header 'Cache-Control' 'no-cache';
        }
    }
}

http - flv 접근 경로

http://localhost:8080/live?port=1935&app=live&stream=video_1

주석 을 달다
링크앞의 live 는 nginx http: server 모듈 의 / live 입 니 다.
port = rtmp 서비스 포트
app = 응용 이름 으로 rtmp 에 있 는 애플 리 케 이 션 에 대응 합 니 다.
stream = 특정한 응용 프로그램 에서 구체 적 으로 유일한 흐름 을 나타 내 는 표지 입 니 다. 예 를 들 어 하나의 카메라 가 나 오 면 여러 개의 흐름 이 있 을 수 있 습 니 다. 그러면 모든 흐름 은 우리 가 그 에 게 표 지 를 만들어 줄 수 있 습 니 다.
html 핵심 코드

<video id="videoElement" autoplay width="1024"  height="576" muted >
video>

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js">script>
<script>
	if (flvjs.isSupported()) {
        startVideo()
    }
    function startVideo(){
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            hasVideo: true,
            enableStashBuffer: true,
            url: 'http://localhost:8080/live?port=1935&app=live&stream=video_1'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
 script>

참고 문장
https://blog.csdn.net/caowenjing123/article/details/94623466
https://github.com/winshining/nginx-http-flv-module/blob/master/README.CN.md