浏览器如何解码实时视频流?最近研究了一下,大体思路为通过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#编译通过,在火狐浏览器可以查看视频