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 οnclick="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#编译通过,在火狐浏览器可以查看视频
更多推荐
已为社区贡献6条内容
所有评论(0)