H5解码H264实时视频流

浏览器如何解码实时视频流？最近研究了一下，大体思路为通过websocket把裸H264传输到浏览器，在通过js封装成mp4格式，再通过Html5的video标签进行解码，效果还是比较不错。

websocket传输数据可以参考本人上一篇

基于net4.5websocket

这里Html5解码H264参考了guthub上实现，链接如下：

https://github.com/ChihChengYang/wfs.js

写了一个简单的html进行测试：

	
	


	click
	
h.264 To fmp4
	

		
		

	
	

		
		

	

	

通过websocket发送裸H264思路如下：

首先保持一个文件为H264的视频文件，然后去读取视频文件，由于H264每frame间隔通过nul头可以区分，即0001区分。

static bool GetOneFrame()
        {
            if(m_BufH264.Count<=8)
            {
                return false;
            }
            int iCount = 0;
            for (int i = 4;i0)
            {
                m_H264Frame = new byte[iCount];
                m_BufH264.CopyTo(0, m_H264Frame, 0, iCount);
                m_BufH264.RemoveRange(0, iCount);
                return true;
            }
            else
            {
                return false;
            }
        }

读取文件数据如下：

 static FileStream m_fs = new FileStream("bigbuckbunny_480x272.h264", FileMode.Open);

                    byte[] bRead = new byte[m_iReadLenth];
                    m_fs.Read(bRead, 0, m_iReadLenth);
                    m_BufH264.AddRange(bRead);

效果展示如下：

为了方便大学研究，工程源码如下：

工程内demo文件夹是网页显示

工程程序为通过websocket发送H264到demo网页

本工程通过vs2017 C#编译通过，在火狐浏览器可以查看视频

工程源码