h264js解码直播解码显示
Posted qianbo_insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h264js解码直播解码显示相关的知识，希望对你有一定的参考价值。
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 its
internal 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 player
var 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解码直播解码显示的主要内容，如果未能解决你的问题，请参考以下文章
视频学习笔记：Android ffmpeg解码多路h264视频并显示