H5解码H264实时视频流

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>

	<title>h.264 To fmp4</title>
	<script type="text/javascript" src="wfs.js"></script>
</head>
<body>
	<button onclick="clickbtn()">click</button>
	<h2>h.264 To fmp4</h2>
	<div class="wfsjs">
		<video id="video1" width="640" height="480" controls></video>
		<div class="ratio"></div>
	</div>
	<div class="wfsjs2">
		<video id="video2" width="640" height="480" controls></video>
		<div class="ratio2"></div>
	</div>

	<script type="text/javascript">
		function clickbtn() {
			if (Wfs.isSupported()) {

				var video1 = document.getElementById("video1"),
					wfs = new Wfs();
				wfs.attachMedia(video1, 'ch1');
				
			}
		};


	</script>

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

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

static bool GetOneFrame()
        {
            if(m_BufH264.Count<=8)
            {
                return false;
            }
            int iCount = 0;
            for (int i = 4;i<m_BufH264.Count-4;i++)
            {
                if(m_BufH264[i]==0 && m_BufH264[i+1] == 0&& m_BufH264[i+2] == 0&& m_BufH264[i+3] == 1)
                {
                    iCount = i;
                    break;
                }
            }
            if(iCount>0)
            {
                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#编译通过，在火狐浏览器可以查看视频

工程源码

H5解码H264实时视频流

猜你喜欢