You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

.NET Core 3.1中Swagger UI加载视频流API失败的解决方案咨询

解决.NET Core 3.1中Swagger UI加载视频流接口失败的问题

我来帮你搞定这个视频流接口在Swagger UI里加载失败的问题,咱们一步步来调整:

1. 先修正接口的Content-Type

你当前用的application/octet-stream是通用二进制类型,Swagger UI默认会把它当成下载文件处理,没法直接渲染视频。咱们换成MKV对应的专属MIME类型video/x-matroska,这样Swagger能识别出这是视频流:

[Route("getFileById")]
public FileResult getFileById()
{
    // 替换为视频专属的MIME类型
    return PhysicalFile($"H:/Movie/Joey/Joey.S01E01.FardaDL.mkv", "video/x-matroska", enableRangeProcessing: true);
}

2. 配置SwaggerGen,让接口元数据支持视频流

Swagger需要明确知道这个接口返回的是视频流,并且支持Range请求(也就是断点续传的基础)。咱们添加一个自定义操作过滤器,给这个接口补充正确的元数据:

首先在services.AddSwaggerGen()里注册过滤器:

services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API V1", Version = "v1" });
    // 注册自定义操作过滤器
    c.OperationFilter<VideoStreamOperationFilter>();
});

然后实现这个过滤器类:

public class VideoStreamOperationFilter : IOperationFilter
{
    public void Apply(OpenApiOperation operation, OperationFilterContext context)
    {
        // 匹配你的getFileById接口
        if (context.ApiActionDescriptor.RouteValues["action"] == "getFileById")
        {
            // 清理默认的响应内容配置,替换为视频类型
            operation.Responses["200"].Content.Clear();
            operation.Responses["200"].Content.Add("video/x-matroska", new OpenApiMediaType
            {
                Schema = new OpenApiSchema { Type = "string", Format = "binary" }
            });
            
            // 添加Range请求头的支持说明,方便测试时手动输入
            operation.Parameters.Add(new OpenApiParameter
            {
                Name = "Range",
                In = ParameterLocation.Header,
                Description = "用于请求部分内容的Range头,例如: bytes=0-1024",
                Required = false,
                Schema = new OpenApiSchema { Type = "string" }
            });
        }
    }
}

3. 配置SwaggerUI,添加自定义脚本渲染视频播放器

默认Swagger UI还是不会自动把视频流渲染成播放器,咱们加一段自定义JS来拦截响应处理,把视频显示出来:

首先在Startup.csConfigure方法里,给SwaggerUI注入自定义脚本(确保UseStaticFiles()已经启用,并且放在UseSwaggerUI之前):

// 先启用静态文件中间件,才能加载自定义JS
app.UseStaticFiles();

app.UseSwagger();
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
    // 注入自定义脚本
    c.InjectJavascript("/swagger-ui/custom-video-handler.js");
});

然后在项目的wwwroot/swagger-ui目录下创建custom-video-handler.js文件,内容如下:

window.onload = function() {
    // 拦截Swagger的请求执行方法
    const originalExecute = window.ui.executeRequest;
    window.ui.executeRequest = function(request) {
        return originalExecute(request).then(response => {
            // 判断当前请求的接口是否是视频流接口
            const videoOperation = request.getOperation().responses['200']?.content['video/x-matroska'];
            if (videoOperation) {
                // 找到响应显示区域,替换为HTML5视频播放器
                const responseContainer = document.querySelector('.response-col_description');
                if (responseContainer) {
                    responseContainer.innerHTML = `<video controls width="600" src="${request.getUrl()}"></video>`;
                }
            }
            return response;
        });
    };
};

4. 验证效果

启动项目后打开Swagger UI,找到getFileById接口,点击"Try it out"然后"Execute",就能看到页面上出现一个视频播放器,直接加载并播放你的MKV视频流了。如果需要测试Range请求,还可以在请求头里添加Range参数,比如bytes=0-1048576来请求前1MB的内容。

内容的提问来源于stack exchange,提问作者mohammad kamali

火山引擎 最新活动