Search code examples
c#angular.net-coremp4webapi

Send mp4 file as response ASP.NET Core Web API


I'm trying to send a mp4 video as downloadable link but when I trigger API from Angular, I get the following error:

net::ERR_FAILED 200

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null,
        "headers": {}
    },
    "status": 0,
    "statusText": "Unknown Error",
    "url": "https://localhost:5001/YouTube/DownloadVideoMp4Async/xU2U73Tk-DM",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for https://localhost:5001/YouTube/DownloadVideoMp4Async/xU2U73Tk-DM: 0 Unknown Error",
    "error": {
        "isTrusted": true
    }
}

It works when I directly paste API url in browser. But for some reason it's not working in Angular.

Please help me out here. Thanks!

Angular code:

downloadVideoMp4(url: string): Observable<Blob> {
    var RequestData = {
      url: url,
      type: 0
    }
    const headers = new HttpHeaders({
      'Content-Type': 'video/mp4',
      'Accept': 'video/mp4'
    });
    return this.http.get<Blob>(this.endpoint + url, {headers: headers, responseType: 'blob' as 'json' });
}

C# code:

[HttpGet]
[Route("DownloadVideoMp4Async/{videoLink}")]
public async Task<ActionResult<HttpResponseMessage>> DownloadVideoMp4Async(string videoLink)
{
    try
    {
        // Approach 1
        var memory = new MemoryStream();

        using (var file = new FileStream(pathToFile, FileMode.Open, FileAccess.Read, FileShare.Read))
        {
            await file.CopyToAsync(memory);
        }

        memory.Position = 0;
        var ext = Path.GetExtension(pathToFile).ToLowerInvariant();

        return File(memory, "video/mp4", $"{video.Title}.mp4");
            
        // Approach 2
        // var stream = new FileStream(pathToFile, FileMode.Open, FileAccess.Read);
        // var result = new HttpResponseMessage(HttpStatusCode.OK)
        // {
        //    Content = new StreamContent(stream)
        // };
        // result.Content.Headers.ContentType = new MediaTypeHeaderValue("video/mp4");
        // result.Content.Headers.ContentRange = new ContentRangeHeaderValue(0, stream.Length);
        // result.Content.Headers.Add("filename", $"{video.Title}.mp4");

        // return result;
    }
    catch (Exception ex)
    {
        return new HttpResponseMessage() { StatusCode = HttpStatusCode.InternalServerError };
    }
}

Solution

  • I figured out the solution.

    Replaced

    return File(memory, "video/mp4", $"{video.Title}.mp4");
    

    with

    return File(memory, "video/mp4", $"{video.Title}");
    

    Finally my API started working.