FFmpeg + nginx+asp.net實現網絡攝像頭RTSP視頻流WEB端在線播放功能

一、環境配置

　　1、搭建rtmp流服務所用軟件有：包含rtmp模塊nginx、ffmpeg.exe 這兩個主要軟件，nginx使用的是nginx-1.17.10-rtmp.zip中的版本。默認情況下只需將nginx-1.17.10-rtmp.zip解壓放到服務器中，點擊start.bat 文件啟動nginx。訪問9090端口出現"Welcome to nginx!"界面表示nginx服務起啟動成功。

　　nginx+ffmpeg下載地址為：https://download.csdn.net/download/duangufei/19811822

　　

 

　　2、目前默認rtmp服務端口1935，http端口9090。該端口可在nginx-1.17.10-rtmp中conf文件夾下nginx.conf文件配置

二、后端代碼示例

　　1、web.config配置

　　

 　　2、視頻流轉換

　　　　　/// <summary>
        /// 獲取設備RtmpUrl
        /// </summary>
        /// <param name="rtspUrl">rtsp路徑（示例：rtsp://admin:admin123456@111.182.55.143:8901/cam/realmonitor?channel=1&subtype=1）</param>
　　　　　///其中admin:admin123456分別為攝像頭的登錄賬號和登陸密碼,111.182.55.143:8901為ip+端口號
　　　　　/// <returns></returns>

        public string GetRtmpUrl(string rtspUrl) { string resultUrl = string.Empty; if (null == streamingVideoDeviceNames) { streamingVideoDeviceNames = new Dictionary<string, RtmpResult>(); } if (streamingVideoDeviceNames.ContainsKey(rtspUrl)) { //如果存在則直接返回原有連接並重新延遲關閉定時器！！！！！！！！！！！
                resultUrl = streamingVideoDeviceNames[rtspUrl].RtmpUrl; streamingVideoDeviceNames[rtspUrl].Timer.Stop(); streamingVideoDeviceNames[rtspUrl].Timer.Interval = 120000; streamingVideoDeviceNames[rtspUrl].Timer.Start(); } else { //開始推流
                string rtmpName = DateTime.Now.ToString("yyyMMddHHmmss"); string rtmpUrl = System.Configuration.ConfigurationManager.AppSettings["videoRtmpUrl"]; string Parameters = " -rtsp_transport tcp -i " + rtspUrl + " -vcodec libx264 -f flv " + rtmpUrl + rtmpName; FfmpegHelper ffmpegHelper = new FfmpegHelper(); ffmpegHelper.RunFfmpegProcessWithoutWait(Parameters); //兩分鍾后自動關閉
                Timer timer = new Timer(); timer.Interval = 120000; timer.Enabled = true; // 定義回調
                timer.Elapsed += new ElapsedEventHandler((s,e)=> { ffmpegHelper.CloseFfmpegProcess(); streamingVideoDeviceNames.Remove(rtspUrl); }); // 定義多次循環
                timer.AutoReset = false; string flvUrl = System.Configuration.ConfigurationManager.AppSettings["videoFlvUrl"]; //resultUrl = rtmpUrl + rtmpName;videoFlvUrl
                resultUrl = flvUrl + rtmpName; streamingVideoDeviceNames.Add(rtspUrl, new RtmpResult { Timer = timer ,RtmpUrl = resultUrl }); } return new SerializeJson<string>(ResultType.succeed, resultUrl,"").ToString(); }

 　　　　//正在推流的設備列表static 全局變量
        public static Dictionary<string, RtmpResult> streamingVideoDeviceNames { get; set; }

    /// <summary>
    /// Rtmp結果類
    /// </summary>
    public class RtmpResult
    {
        //RtmpUrl結果
        public string RtmpUrl { get; set; }
        /// <summary>
        /// 單個請求對應的Timer
        /// </summary>
        public Timer Timer { get; set; }
    }

　　3、FfmpegHelper代碼如下
　　

　　　　　/// <summary>
        /// 音視頻轉換工具類
        /// </summary>
        /// <param name="Parameters">轉換參數</param>
        /// 參數參考"-i 原始路徑 -y  -vcodec h264 -b 500000 轉換路徑" （h264是web通用格式必須添加）;
        public void RunFfmpegProcessWithoutWait(string Parameters)
        {
            string dataDir = AppDomain.CurrentDomain.BaseDirectory;
            string FFmpegPath = dataDir + @"bin\ffmpeg\ffmpeg.exe";//獲取bin目錄下的文件
            Log.LogWriter.WriteErrorLog(FFmpegPath);
            ffmpegProcess = new Process();
            ffmpegProcess.StartInfo.FileName = FFmpegPath;
            ffmpegProcess.StartInfo.Arguments = Parameters;
            //是否使用操作系統shell啟動
            ffmpegProcess.StartInfo.UseShellExecute = false;
            //不顯示程序窗口
            ffmpegProcess.StartInfo.CreateNoWindow = true;
            ffmpegProcess.Start();
        }

三、前端代碼實現

　　1、HTML代碼

<div class="fire-detail" style="width: 100%;background: rgba(19, 31, 38, 0.4);">
            <video style="height: 500px;width: 100%;" class="centeredVideo videoElement" controls="" autoplay="" src="blob:http://101.200.232.210:7042/423b2945-0c5f-42cf-8cea-05b52c6fa537">您的瀏覽器不支持H5</video>
        </div>

　　2、jq代碼

　　

　　　　window.onload=function(){
　　　　　//url即為視頻流的地址
　　　　 var url='rtsp://admin:admin123456@111.182.55.143:8901/cam/realmonitor?channel=1&subtype=1'
        var $content = $(".videoElement");
        var param = {
            rtspUrl: url
        };
        $.ajax({
            url: "http://111.222.232.210:7020/asmx/VideoSurveillance.asmx/GetRtmpUrl",
            type: 'GET',
            dataType: 'text',
            data: param,
            success: function (result) {
                console.info(result);
                result=JSON.parse($(result)[2].innerHTML).Error;
                result=result.replace( new RegExp( 'amp;' , "g" ) , '' );
                //var element = $content.find('.videoElement')[0]
                var element = $content[0];
                if (typeof player !== "undefined") {
                    if (player != null) {
                        player.unload();
                        player.detachMediaElement();
                        player.destroy();
                        player = null;
                    }
                }
                player = flvjs.createPlayer({ type: 'flv', url: result }, {
                    enableWorker: false,
                    lazyLoadMaxDuration: 3 * 60,
                    seekType: 'range',
                });
                player.attachMediaElement(element);
                player.load();
            }
        })
    }

四、結果