.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.cs的Configure方法里,给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




