h264 解码前端显示

下载该前端代码

h264 分为几种，一种为baseline，一种为main，一种为pro
这里前端使用js解码的库只能支持baseline方式，因此必须在摄像头里面如海康或者大华的编码设置h264成为baseline模式才能正确解码。

1、准备一个websocket server

websocketserver 是转发使用的，协议接收应该选取sip协议也就是国标gb28181是最好的，再次就是使用rtsp协议，这里先不涉及这两种协议，先介绍使用h264 解码
websocket server 可以使用很多方法去做，如果不想自己动手，可以使用websocketpp去做这个，当然也可以使用其他方式，websocketpp是很简单的，给出一个示例代码

typedef websocketpp::server<websocketpp::config::asio> server;using websocketpp::connection_hdl;
using websocketpp::lib::placeholders::_1;
using websocketpp::lib::placeholders::_2;
using websocketpp::lib::bind;class b_server {public:class Lock {private:std::unique_lock<std::mutex> m_lock;public:inline Lock(b_server * parent) : m_lock(parent->_mutex) {}};std::mutex  _mutex;b_server() {m_server.init_asio();m_server.set_open_handler(bind(&b_server::on_open, this, ::_1));m_server.set_close_handler(bind(&b_server::on_close, this, ::_1));m_server.set_message_handler(bind(&b_server::on_message, this, ::_1, ::_2));}void on_open(connection_hdl hdl) {//钱波:单线程这里不用加锁/Lock lock(this);m_connections.insert(hdl);}void on_close(connection_hdl hdl) {printf("erase remove client");Lock lock(this);m_connections.erase(hdl);}void on_message(connection_hdl hdl, server::message_ptr msg) {/*for (auto it : m_connections) {m_server.send(it, msg);}*/}void b2c(uint8_t *data, size_t len) {//server::message_ptr msg;//msg->set_payload(data, len);Lock lock(this);for (auto it : m_connections) {//m_server.send(it, msg);//钱波 直接用二进制发送数据，注意这个代码不正确，一定要捕获错误，这里省略了m_server.send(it,data, len , websocketpp::frame::opcode::binary);}}void run(uint16_t port) {m_server.listen(port);m_server.start_accept();m_server.run();}
private:typedef std::set<connection_hdl, std::owner_less<connection_hdl>> con_list;server m_server;con_list m_connections;
};

2、html代码

涉及到的几个文件下载里面有

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=320, initial-scale=1" /><title>h264 streaming</title><style type="text/css">body {background: #333;text-align: center;margin-top: 10%;}#videoCanvas {/* Always stretch the canvas to 640x480, regardless of itsinternal size. */width: 640px;height: 480px;}</style>
</head>
<body><script type="text/javascript" src="Decoder.js"></script><script type="text/javascript" src="YUVCanvas.js"></script><script type="text/javascript" src="Player.js"></script><script type="text/javascript">var player = new Player({size: {width: 640,height: 320}});document.body.appendChild(player.canvas);//var strhost = "ws://" + window.location.host ;var strhost = "ws://192.168.3.245:9002" ;// Setup the WebSocket connection and start the playervar client = new WebSocket( strhost );client.binaryType = 'arraybuffer';client.onopen = function(evt) {onOpen(evt)};client.onclose = function(evt) {onClose(evt)};client.onmessage = function(evt) {onMessage(evt)};client.onerror = function(evt) {onError(evt)};function onOpen(evt) {//  document.getElementById('messages').innerHTML = 'Connection established';console.log("connection ");//  alert("open");}function onClose(evt) {alert("close");}function onMessage(evt) {//console.log(evt.data);//return;var messageData = new Uint8Array(evt.data);player.decode(messageData);}function onError(evt) {alert("error");}</script>
</body>
</html>

代码下载

h264js解码直播解码显示相关推荐

ffmpeg实战教程（七）Android CMake avi解码后SurfaceView显示
ffmpeg实战教程(七)Android CMake avi解码后SurfaceView显示本篇我们实现Android平台解码avi并用SurfaceView播放. 先上图看效果: 思路: 1.把 ...
视频编解码（十六）：VE解码器解码demo解码流程
一.VE解码器解码demo解码流程解码器初始化.创建.读取码流.解码.显示
SkeyeARS 8K视频播放器软解码硬解码功能实现
SkeyeARS 8K视频播放器软解码&硬解码功能实现首先,我们简单了解一下软解码&硬解码: 软解码:由CPU负责解码进行播放优点:不受视频格式限制.画质可能略好于硬解缺点:会占用 ...
stretchblt 模糊_拼多多直播不显示画面？直播画面模糊怎么调整
拼多多开店,想要流量.想要销量?其实方法有很多种,比如说多多进宝推广,又比如说拼多多开直通车,再比如说参加拼多多平台活动--其实这些方法都是可以的!不过今天我们要来说的是拼多多直播!对于拼多多直播,其 ...
html5播放推流播放地址是黑屏的,OBS Studio直播推流显示黑屏怎么办？教你解决方法...
利用OBS Studio进行直播推流可以吸引更多用户,快速涨粉,当然了,如果你是第一次接触OBS推流,可能会遇到一些困扰.如果OBS Studio直播推流显示画面黑屏,大家可以参考本文整理的方法进行解 ...
实时音频编解码之十七 Opus解码 SILK解码
本文谢绝任何形式转载,谢谢. 5.2 Silk解码流程解码器线性预测层主要使用长短时预测合成滤波器对激励信号滤波实现,线性预测层内部的工作带宽为NB.MB以及WB,对于SWB以及FB的混合编码工作模 ...
NIOS2随笔——BMP解码与VGA显示
1. 系统概述本设计采用NIOS2 32位处理器,通过SPI接口将SD/TF卡中的BMP图片数据读取到内存中,SD/TF卡的文件系统为FAT32,NIOS2软件实现BMP解码后,启动framerea ...
解码失败会显示绿屏，及yuv和rgb简单理解
音视频图片相关基础: 1:rgb 红绿蓝光的三原色在RGB中,一幅图像有三个独立的图像平面或通道组成:红,绿,蓝(以及第四个通道透明度).RGB(255,23,140)是光的三原色,也即红绿蓝Re ...
【经验分享】为什么视频画面解码失败之后显示的是绿幕？
项目场景: 项目场景:我们在处理视频数据解码时,经常会遇到解码失败出现绿幕的情况,这个时候一般我们会去检查解码端的程序代码. 问题描述在出现问题的时候,是否有考虑过以下的问题: "为什么是 ...
H264文件解析出nalu数据，送给ffmpeg解码，opencv显示
本博客主要是H264的视频码流有ffmpeg 解码后,有opencv先,这里贴出全部代码,你只需自己建个工程,配置一下ffmpeg库和opencv3.0库就好了.(这里采用自己打开h264文件,解析出 ...

h264js解码直播解码显示

h264 解码前端显示

1、准备一个websocket server

2、html代码

代码下载

h264js解码直播解码显示相关推荐

最新文章

热门文章