在ASP.NET Core中将RTSP流从IP摄像机转发到浏览器 [英] Forwarding RTSP stream from IP Camera to Browser in ASP.NET Core

问题描述

我有一个Blazor托管的应用程序，在该应用程序中，我需要在客户端请求时(通过RTSP PLAY命令)从AXIS摄像机获取H264录制，并以浏览器可以再现视频的方式将其返回。如果向AXIS摄像机查询录制列表，则答案包括此录制列表，即我尝试在浏览器上播放的录制列表

    <recording diskid="SD_DISK" recordingid="20211109_122753_1AB3_B8A44F2D0300" starttime="2021-11-09T11:27:53.060281Z" starttimelocal="2021-11-09T12:27:53.060281+01:00" stoptime="2021-11-09T11:43:01.125987Z" stoptimelocal="2021-11-09T12:43:01.125987+01:00" recordingtype="continuous" eventid="continuous" eventtrigger="continuous" recordingstatus="completed" source="1" locked="No">
        <video mimetype="video/x-h264" width="800" height="600" framerate="15:1" resolution="800x600"/>
    </recording>

我可以通过打开网络流.&q；并键入

，使用VLC成功复制录音

rtsp://192.168.0.125/axis-media/media.amp?recordingid=20211109_140710_E1A3_B8A44F2D0300

，然后提供用户名和密码，因此我确信命令是正确的。通过在url中嵌入用户名和密码，this项目也可以播放录音，其中使用了下面使用的更简单的语法w.r.t，所以我的示例可能有点过于复杂。

服务器端我可以成功检索流，这要归功于RtspClientSharp，但我无法以正确的方式返回它。到目前为止我有这个：

[HttpGet("RecordingsDemo")]
    public async Task<IActionResult> RecordingsDemo() {
        string deviceIp = "rtsp://192.168.0.125";
        string recordingUri = "rtsp://192.168.0.125/axis-media/media.amp?recordingid=20211109_140710_E1A3_B8A44F2D0300";
        Uri playRequestUri = new Uri(recordingUri);

        CancellationTokenSource cts = new CancellationTokenSource();
        NetworkCredential networkCredential = new NetworkCredential("user", "password");
        ConnectionParameters connectionParameters = new ConnectionParameters(new Uri(deviceIp), networkCredential);
        RtspTcpTransportClient RtspTcpClient = new RtspTcpTransportClient(connectionParameters);
        await RtspTcpClient.ConnectAsync(cts.Token);

        RtspRequestMessage message = new RtspRequestMessage(RtspMethod.SETUP, playRequestUri);
        message.AddHeader("Transport", "RTP/AVP/TCP;unicast");
        RtspResponseMessage response = await RtspTcpClient.EnsureExecuteRequest(message, cts.Token);
        System.Collections.Specialized.NameValueCollection headers = response.Headers;
        string sessionId = headers["SESSION"];
        if (sessionId == null) { throw new Exception("RTSP initialization failed: no session id returned from SETUP command"); }
        message = new RtspRequestMessage(RtspMethod.PLAY, playRequestUri, sessionId);
        response = await RtspTcpClient.EnsureExecuteRequest(message, cts.Token);
        Stream stream = RtspTcpClient.GetStream();
        if (stream != null) {
            Response.Headers.Add("Cache-Control", "no-cache");
            FileStreamResult result = new FileStreamResult(stream, "video/x-h264") {
                EnableRangeProcessing = true
            };
            return result;
        } else {
            return new StatusCodeResult((int)HttpStatusCode.ServiceUnavailable);
        }
        return new StatusCodeResult((int)HttpStatusCode.OK);
    }

请注意，在上面的代码中，我向RtspRequestMessage添加了一个构造函数，以便更快地构建它。我特别添加了以下代码：

    public uint _lastCSeqUsed { get; private set; }

    /// <param name="method">SETUP, PLAY etc</param>
    /// <param name="connectionUri">rtsp://<servername>/axis-media/media.amp?recordingid=...</param>
    /// <param name="cSeq">Method that generate the sequence number. The receiver will reply with the same sequence number</param>
    /// <param name="protocolVersion">Default to 1.0 if omitted or null</param>
    /// <param name="userAgent">Doesn't matter really</param>
    /// <param name="session">This parameter has to be initialized with the value returned by the SETUP method</param>
    public RtspRequestMessage(RtspMethod method, Uri connectionUri, string session = "", Func<uint> cSeqProvider = null, 
        Version protocolVersion = null, string userAgent = "client")
        : base((protocolVersion != null) ? protocolVersion : new Version("1.0"))
    {
        Method = method;
        ConnectionUri = connectionUri;
        UserAgent = userAgent;

        _cSeqProvider = (cSeqProvider != null) ? cSeqProvider : myfun;
        CSeq = (cSeqProvider != null) ? _cSeqProvider() : 0;

        if (!string.IsNullOrEmpty(session))
            Headers.Add("Session", session);
    }

    public void AddHeader(string name, string value)
    {
        Headers.Add(name, value);
    }

    private uint myfun()
    {
        return ++CSeq;
    }

当客户端通过GET方法调用此方法时，我非常肯定可以查看Bandwitdh和Wireshark来正确检索录音。您可以在下一张图片中看到Wireshark输出，其中192.168.0.125是摄像机，192.168.0.120是服务器。

但是，服务器返回的文件似乎不可播放。即使使用VLC，我也无法播放返回的文件或流。 客户端与服务器的通信如下图所示，其中192.168.0.16为客户端，192.168.0.51为服务器。

我需要能够返回HTML5视频元素可以播放的流。

你能给我指个方向吗？谢谢

编辑。：如您所见，我找到了一种方法，如下所示。然而，我希望有一个更好的解决方案，不需要在磁盘上写入，也不会因为生成.ts文件而增加延迟。因此，如果有人愿意捐款，我就不提这个问题了。

推荐答案

最终我能够达到目标，即使不是以我想要的方式。这些是我必须完成的步骤，我已在下面详细说明。

从RTSP流生成HTTP流

• 从RTSP流生成.m3u8和.ts文件。
• 从控制器返回.m3u8文件。
• PLAY返回.m3u8文件。这需要javascript库。

从RTSP流生成.m3u8和.ts文件

我使用了以下FFmpeg命令从RTSP流中提取视频，这样我就可以通过命令返回它

ffmpeg.exe -i rtsp://username:password@192.168.0.125/axis-media/media.amp?recordingid=20211109_122753_1AB3_B8A44F2D0300 -fflags flush_packets -max_delay 5 -flags -global_header -hls_time 3 -hls_list_size 0 -vcodec copy -y .example.m3u8

我必须使用-HLS_LIST_SIZE 0，因为在我的示例中，我必须转换录制，并且由于用户需要能够在录制中来回查找，因此我必须设置"；delete no下载的.ts段"；，请参阅FFmpeg documentation。我可以利用这个.m3u8 player demo来检查问题是与我生成的视频有关还是与其他什么有关。此视频How to stream IP Camera RTSP stream into browser as HLS via NodeJS, FFMPEG and ReactJS对我也有帮助。

从控制器返回.m3u8文件

这里有两个问题：跨域头部丢失导致请求被阻塞。此外，一旦浏览器检索到.m3u8文件，它应该能够向控制器请求.ts文件。所以我不得不这样组织代码：

[ApiController]
[Route("[controller]")]
public class CameraSystemController : ControllerBase {
    [HttpGet("Example")]
    public async Task<IActionResult> Example() {
        Response.Headers.Add("Access-Control-Allow-Origin", "*");
        return File(System.IO.File.OpenRead("Output/Video/example.m3u8"), "application/octet-stream", enableRangeProcessing: true);
    }

    [HttpGet("{tsFileName}")]
    public async Task<IActionResult> Example_GetTS(string tsFileName) {
        Response.Headers.Add("Access-Control-Allow-Origin", "*");
        return File(System.IO.File.OpenRead("Output/Video/" + tsFileName), "application/octet-stream", enableRangeProcessing: true);
    }
}

感谢CORS上的这篇文章和implementing dynamic controller action上的这篇帖子。

在浏览器中播放.m3u8文件

最后，为了在浏览器中播放.m3u8文件，我不得不使用这个HLS javascript project，这要归功于这个post。

我制作的工作html页面示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
   
</head>
<body>
  <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
  data-setup='{}'>
            <source src="http://localhost:5000/CameraSystem/Example" type="application/x-mpegURL">
  </video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>

这篇关于在ASP.NET Core中将RTSP流从IP摄像机转发到浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！