ASP.NET Core 3.1项目中网页显示IP摄像头图像求助

网页无法直接播放RTSP流，需要先将其转换为浏览器支持的格式（如HTTP-FLV、HLS），以下是两种易上手的实现方案：

方案一：FFmpeg转HTTP-FLV + flv.js播放 #

步骤1：安装FFmpeg #

在服务器上安装FFmpeg，确保系统能通过ffmpeg命令直接调用它。

步骤2：ASP.NET Core中启动转流进程 #

在Startup.cs中添加转流逻辑，启动FFmpeg将RTSP流转为HTTP-FLV并推送到指定端口：

using System.Diagnostics;

public class Startup
{
    private Process _ffmpegProcess;

    public void ConfigureServices(IServiceCollection services)
    {
        // 其他服务配置...
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IHostApplicationLifetime appLifetime)
    {
        // 其他中间件配置（如静态文件、路由）...

        // 应用启动时启动转流
        appLifetime.ApplicationStarted.Register(() =>
        {
            var rtspUrl = "rtsp://用户名:密码@摄像头IP:554/stream路径"; // 替换为你的摄像头RTSP地址
            var flvStreamUrl = "http://localhost:5001/camera.flv"; // 推流地址

            _ffmpegProcess = new Process
            {
                StartInfo = new ProcessStartInfo
                {
                    FileName = "ffmpeg",
                    Arguments = $"-i \"{rtspUrl}\" -c:v copy -c:a copy -f flv \"{flvStreamUrl}\"",
                    UseShellExecute = false,
                    RedirectStandardOutput = true,
                    RedirectStandardError = true,
                    CreateNoWindow = true
                }
            };
            _ffmpegProcess.Start();
        });

        // 应用停止时终止FFmpeg进程
        appLifetime.ApplicationStopping.Register(() =>
        {
            _ffmpegProcess?.Kill();
            _ffmpegProcess?.Dispose();
        });
    }
}

步骤3：前端播放FLV流 #

将flv.js文件放入项目的wwwroot/lib/flv.js目录，在视图页面中添加播放代码：

<video id="cameraPlayer" width="640" height="480" controls></video>

<script src="~/lib/flv.js/flv.min.js"></script>
<script>
    if (flvjs.isSupported()) {
        const player = flvjs.createPlayer({
            type: 'flv',
            url: 'http://你的服务器IP:5001/camera.flv'
        });
        player.attachMediaElement(document.getElementById('cameraPlayer'));
        player.load();
        player.play();
    }
</script>

方案二：FFmpeg转HLS流 + 原生Video播放 #

步骤1：FFmpeg转HLS流 #

在服务器上执行FFmpeg命令，将RTSP流转为HLS格式（生成m3u8索引文件和ts分片）：

ffmpeg -i "rtsp://用户名:密码@摄像头IP:554/stream路径" -c:v h264 -c:a aac -f hls -hls_time 2 -hls_list_size 5 -hls_flags delete_segments ./wwwroot/hls/camera.m3u8

• -hls_time: 每个分片的时长（秒）
• -hls_list_size: 保留的分片数量
• -hls_flags delete_segments: 自动删除旧分片节省空间

步骤2：ASP.NET Core配置静态文件 #

确保Startup.cs中启用了静态文件中间件，让前端能访问HLS文件：

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles(); // 允许访问wwwroot下的静态文件
    // 其他中间件...
}

步骤3：前端播放HLS流 #

在视图页面中使用原生video标签播放：

<video width="640" height="480" controls>
    <source src="/hls/camera.m3u8" type="application/x-mpegURL">
    你的浏览器不支持HLS播放
</video>

注意事项 #

• 确保摄像头的RTSP地址正确，部分摄像头需要开启RTSP服务并配置权限
• 服务器防火墙需开放转流所用的端口（如方案一的5001端口）
• 若前端与后端跨域，需在ASP.NET Core中配置CORS中间件
• 可以将FFmpeg转流逻辑封装为后台服务，避免进程意外终止

内容的提问来源于stack exchange，提问作者s.g