'MJPEG Instable On Safari / iOS

I developed a WebAPI MJPEG Image stream, main loop looks like the following (class VisualInputMJPEGStreamResult):

 public async override Task PushAction(Stream stream, CancellationToken cancel)
    {
        try
        {
            byte[] newLine = Encoding.UTF8.GetBytes("\r\n");

            while (!cancel.IsCancellationRequested)
            {                   
                using Bitmap Bmp = GetImage(); // Methods returns the image

                using MemoryStream m = new MemoryStream();
                m.SetLength(0);
                Converter.BitmapToJPGMemoryStream(Bmp, m);

                byte[] bytes = m.ToArray();

                var header = $"--Data\r\nContent-Type: image/jpeg\r\nContent-Length: {bytes.Length}\r\n\r\n";
                var headerData = Encoding.UTF8.GetBytes(header);

                await stream.WriteAsync(headerData, 0, headerData.Length, cancel);
                if (cancel.IsCancellationRequested)
                {
                    return;
                }

                await stream.WriteAsync(bytes, 0, bytes.Length);

                await stream.WriteAsync(newLine, 0, newLine.Length, cancel);
                if (cancel.IsCancellationRequested)
                {
                    return;
                }

                await stream.WriteAsync(newLine, 0, newLine.Length, cancel);
                if (cancel.IsCancellationRequested)
                {
                    return;
                }

                await stream.FlushAsync(cancel);
            }
        }
        catch (TaskCanceledException)
        {
            return;
        }
        catch (OperationCanceledException)
        {
            return;
        }
        catch (Exception ex)
        {
            Shared.Logging.Log.LogError(ex, DetailSource);                
        }
    }

PushStream Base class:

public abstract class PushStreamResult : IActionResult
{
    private string ContentType { get; set; }
    public abstract Task PushAction(Stream s, CancellationToken c);

    public PushStreamResult(string contentType = 'multipart/x-mixed-replace; boundary=Data')
    {
        ContentType = contentType;
    }

    public Task ExecuteResultAsync(ActionContext context)
    {

        HttpResponse response = context.HttpContext.Response;

        response.ContentType = ContentType;
        response.StatusCode = StatusCodes.Status200OK;

        return PushAction(response.Body, context.HttpContext.RequestAborted);
    }
}

Web Api:

    [HttpGet]
    [Route("[action]")]
    public IActionResult GetStream()
    {
        try
        {
            [...]

            return new VisualInputMJPEGStreamResult();
        }
        catch (Exception ex)
        {
            Shared.Logging.Log.LogError(ex, DetailSource);
            return StatusCode(Microsoft.AspNetCore.Http.StatusCodes.Status500InternalServerError);
        }            
    }

This works perfect on Windows/Firefox, but on Safari/iOS this works 'sometimes'. I did not figure out yet, when it works and when it doesn't, it seems to be random.

Does anybody know, if my implementation contains maybe incomplete data?

Edit: Frontent is a vue application, if the code is neccessary I can share it.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source