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 streamingtitle>
    <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>

代码下载

你可能感兴趣的:(音视频和c++,java,物联网,websocket,协议,js解码,h264,websocket)