MVC 视频流式传输到移动网络浏览器

Posted

技术标签:

【中文标题】MVC 视频流式传输到移动网络浏览器【英文标题】:MVC Video streaming to mobile web browsers 【发布时间】:2017-10-08 21:18:32 【问题描述】:

我想通过 ASP.NET MVC Web 应用程序将视频从我的 Azure blob 流式传输到桌面浏览器上的用户,当然还有移动浏览器。

到目前为止,我已经构建了一个为网站提供服务的 ASP.NET MVC 应用程序和一个将 PushStreamContent 的 WebApi 服务。这在桌面上的 Chrome 和 Edge 上效果很好。但是当我尝试在移动设备 Chrome、Safari、Firefox 上打开它时,它就无法播放。

到目前为止我的代码:

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">

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;
        

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();
            

        

    

【问题讨论】:

【参考方案1】:

所以经过一段时间尝试不同的东西后,我从微软女巫那里转储到这篇文章中,完美地解决了我的问题。 Link to article

这是对我有用的代码:

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;  

【讨论】:

还可以查看这个有用的链接:***.com/questions/39834714/…

以上是关于MVC 视频流式传输到移动网络浏览器的主要内容,如果未能解决你的问题,请参考以下文章

将 openCV C++ 视频流式传输到浏览器

当前在网络浏览器中流式传输实时视频的最佳实践?

如何使用 C# 流式传输网络摄像头视频? [关闭]

在流式传输网络摄像头时定期拍照

是否可以在 iOS、Android、浏览器之间流式传输视频 p2p(或其他技术)

OpenCV:将视频流式传输到网页浏览器/HTML页面