最近遇到調試本地的車牌識別相機,需要解碼視頻編碼H.264/MJPEG/支持雙碼流2格式的視頻,解析方法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
var ws = {};//初始化ws對象
//init()方法爲了初始化ws的一些具體回調函數，在body的onload事件中觸發
function init() {
//鏈接服務端
ws = new WebSocket("ws://192.168.0.101:9080/ws");
//配置客戶端連接成功的回調方法
ws.onopen = function (event) {
console.log("open...");
};
//配置客戶端處理消息的回調方法
ws.onmessage = function (event) {
//創建FileReader對象，該對象時html5中的特有對象，詳細用法可以//參照html5相關資料
var reader = new FileReader();
//設置FileReader對象的讀取文件回調方法
reader.onload = function (eve) {
//判斷文件是否讀取完成
if (eve.target.readyState == FileReader.DONE) {
//讀取文件完成後，創建img標籤來顯示服務端傳來的字節數//組
var img = document.getElementById("show");
//讀取文件完成後內容放在this===當前
//fileReader對象的result屬性中，將該內容賦值img標籤//瀏覽器就可以自動解析內容格式並且渲染在瀏覽器中
img.src = this.result;
//將標籤添加到id爲show的div中否則，即便是有img也看不見
// document.getElementById("show") = img;
}
};
//調用FileReader的readAsDataURL的方法自動就會觸發onload事件
reader.readAsDataURL(event.data);
};
}
</script>
<body onload="init()">
<img id="show" style="width:300px; height:300px; border:1px solid" />
</body>
</html>