.net6+vue实现视频流的断网继续播放

断网继续播放的实现主要涉及到两个方面，一是在前端实现断网检测，二是在后端实现视频流的缓存和断点续传。

前端实现断网检测：

Vue可以使用HTML5的navigator.onLine属性来检测网络连接状态。当网络连接断开时，该属性的值为false，否则为true。

if (navigator.onLine) {
  // 网络连接正常
} else {
  // 网络连接断开
}

当网络连接断开时，可以显示一个提示信息，告知用户当前无法访问视频流。

后端实现视频流的缓存和断点续传：

在.NET 6中，可以使用AspNetCore.Proxy库来实现HTTP代理和反向代理。可以将视频流的请求代理到另一个服务上，并在代理服务中实现视频流的缓存和断点续传功能。

1. 安装AspNetCore.Proxy库

可以在Visual Studio中使用NuGet包管理器，安装AspNetCore.Proxy库。

2. 创建代理服务

使用AspNetCore.Proxy库的ProxyMiddleware类创建一个新的代理服务，并将视频流的请求代理到另一个服务上。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...

    app.UseProxy(
        context => context.Request.Path.StartsWithSegments("/video"),
        options =>
        {
            options.BeforeSend = async (context, message) =>
            {
                // 在此处实现视频流的缓存和断点续传功能
            };

            options.TargetUri = new Uri("http://example.com");
        });

    // ...
}

3. 实现视频流的缓存和断点续传功能

在ProxyMiddleware的BeforeSend回调中，可以实现视频流的缓存和断点续传功能。具体步骤如下：

（1）检查本地是否存在视频缓存文件，如果存在，则读取文件并将其作为响应返回。

（2）如果不存在视频缓存文件，则向目标服务发送视频流的请求。

（3）将视频流的响应写入本地缓存文件，并将其作为响应返回。

（4）在写入本地缓存文件时，可以根据请求的Range头信息，实现视频流的断点续传功能。

options.BeforeSend = async (context, message) =>
{
    var videoCachePath = "video.mp4";
    if (File.Exists(videoCachePath))
    {
        var videoCache = File.ReadAllBytes(videoCachePath);
        context.Response.ContentLength = videoCache.Length;
        context.Response.Body.Write(videoCache, 0, videoCache.Length);
        return;
    }

    using (var client = new HttpClient())
    {
        client.DefaultRequestHeaders.Range = context.Request.Headers.Range;
        var response = await client.SendAsync(message, HttpCompletionOption.ResponseHeadersRead);
        context.Response.StatusCode = (int)response.StatusCode;
        context.Response.ContentType = response.Content.Headers.ContentType.ToString();
        context.Response.ContentLength = response.Content.Headers.ContentLength;

        using (var stream = File.Create(videoCachePath))
        {
            await response.Content.CopyToAsync(stream);
        }

        await response.Content.CopyToAsync(context.Response.Body);
    }
};

通过以上步骤，就可以实现视频流的断网继续播放功能。当网络连接断开时，前端会提示用户当前无法访问视频流；当网络连接恢复时，后端会从缓存中读取视频流并返回给前端，实现断点续传和继续播放功能。