FFmpeg+rtmp+Nginx-http-flv-module+flvjs实现直播

运行环境:windows
Nginx-rtmp-module不支持flvjs
Nginx-http-flv-module支持flvjs
步骤:将nginx-http-flv-module编译到nginx,然后设置配置文件,开启服,进行推流拉流。
1.我已经将其编译好,并设置好nginx.conf配置文件,打包如下:

windows下编译好的nginx+nginx-http-flv
(提取码:w6mi)
2.FFmpeg推流
推摄像头,可以用命令ffmpeg -list_devices true -f dshow -i dummy查看本机相机设备名称,将下面的“HD Camera”更改一下就好

推流1
ffmpeg -f dshow -i video="HD Camera" -vcodec libx264 -acodec copy -preset:v ultrafast -tune:v zerolatency -f flv rtmp://127.0.0.1:1935/myapp/mystream
推流2
ffmpeg -re -i demo.flv -c copy -f flv rtmp://127.0.0.1:1935/myapp/mystream
推流3-----通过gdigrab桌面录屏推流(通过-video_size参数设置需要录屏的分辨率大小)
ffmpeg -f gdigrab -video_size 860*504 -framerate 5 -i desktop -vcodec libx264 -f flv rtmp://127.0.0.1:1935/myapp/mystreamm
推流4-----通过下载Screen Capture Recorder录屏插件来实现推流
ffmpeg -f dshow -i video="screen-capture-recorder" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -f flv rtmp://127.0.0.1:1935/myapp/mystream

3.flvjs拉流


<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demotitle>
    <style>
        .mainContainer {
      
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .urlInput {
      
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        
        .centeredVideo {
      
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }
        
        .controls {
      
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    style>
head>

<body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.video>
    div>
    <br>
    <div class="controls">
        
        <button onclick="flv_start()">开始button>
        <button onclick="flv_pause()">暂停button>
        <button onclick="flv_destroy()">停止button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳转button>
    div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js">script>
    <script>
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
      
            var flvPlayer = flvjs.createPlayer({
      
                type: 'flv',
                "isLive": true,
                //url: 'http://127.0.0.1:7001/live/movie.flv', //根据需求自行修改
				url:'http://127.0.0.1:8080/live?port=1935&app=myapp&stream=mystream'//根据nginx.conf配置文件填写对应url

            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
            flv_start();
        }

        function flv_start() {
      
            player.play();
        }

        function flv_pause() {
      
            player.pause();
        }

        function flv_destroy() {
      
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }

        function flv_seekto() {
      
            player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        }
    script>
body>

html>

4.运行结果

推流1 摄像头


推流2 本地视频

FFmpeg+rtmp+Nginx-http-flv-module+flvjs实现直播_第1张图片

推流3 桌面录屏

你可能感兴趣的:(frontend,nginx,http-flv,ffmpeg,rtmp)