[英]MVC Video streaming to mobile web browsers
I want to stream a video from my Azure blob via a ASP.NET MVC web application to users on desktop browsers and of course mobile browsers.我想通过 ASP.NET MVC Web 应用程序将视频从我的 Azure blob 流式传输到桌面浏览器和移动浏览器上的用户。
I have build so far is a ASP.NET MVC Application that serves the website and a WebApi service that would PushStreamContent.到目前为止,我已经构建了一个为网站提供服务的 ASP.NET MVC 应用程序和一个将 PushStreamContent 的 WebApi 服务。 This works awesome on Chrome and Edge on the desktop.
这在桌面上的 Chrome 和 Edge 上效果很好。 But when I try to open it on a mobile device Chrome, Safari, Firefox it just wont play.
但是当我尝试在移动设备 Chrome、Safari、Firefox 上打开它时,它就无法播放。
My Code so far:到目前为止我的代码:
The view on the MVC project对MVC项目的看法
<video id="vPlayer" class="video-js" autoplay controls playsinline preload="auto" data-setup='{"fluid": true}'poster="@ImgManager.GetVideoImgUrl(Model.ThumbnailUrl)">
<source src="//xyz.nl/api/Videos/Get?filename=340a85a3-ccea-4a2a-bab6-74def07e416c.webm&type=video%2Fwebm" type="video/webm">
<source src="//xyz.nl/api/Videos/Get?filename=340a85a3-ccea-4a2a-bab6-74def07e416c.mp4&type=video%2Fmp4" type="video/mp4">
The WebApi WebApi
public HttpResponseMessage Get(string filename, string type)
{
var video = new VideoStream(filename);
var response = Request.CreateResponse();
response.Content = new PushStreamContent(video.WriteToStream, new MediaTypeHeaderValue(type));
return response;
}
Helper on webAPI webAPI 上的助手
public class VideoStream
{
private readonly string _filename;
public VideoStream(string fileName)
{
_filename = fileName;
}
public async Task WriteToStream(Stream outputStream, HttpContent content, TransportContext context)
{
try
{
var storage = new AzureMainStorage("avideo");
byte[] file = await storage.GetFileAsync(_filename);
var buffer = new byte[65536];
using (var video = new MemoryStream(file))
{
var length = (int)video.Length;
var bytesRead = 1;
while (length > 0 && bytesRead > 0)
{
bytesRead = video.Read(buffer, 0, Math.Min(length, buffer.Length));
await outputStream.WriteAsync(buffer, 0, bytesRead);
length -= bytesRead;
}
}
}
catch (HttpException ex)
{
Utilities.LogErrorToDb(ex);
return;
}
finally
{
outputStream.Close();
}
}
}
}
So after some time trying different stuff i dumpt in to this article from Microsoft witch solved my problem perfectly.因此,经过一段时间尝试不同的东西后,我转储到 Microsoft 女巫的这篇文章中,完美地解决了我的问题。 Link to article
文章链接
Here is the code that worked for me:这是对我有用的代码:
public HttpResponseMessage Get(string filename, string type)
{
MemoryStream stream = new MemoryStream(new AzureMainStorage("avideo").GetFile(filename));
HttpResponseMessage partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, "video/mp4");
return partialResponse;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.