js mjpeg buffer stream 項目要求使用http和mjpeg在頁面實現實時展示視頻流 基礎知識 流操作：ReadableStream 流操作API中的ReadableStream介面呈現了一個可讀取的二進位流操作。Fetch API 通過Response的body屬性提供了一個具體 ...
js mjpeg buffer stream
項目要求使用http和mjpeg在頁面實現實時展示視頻流
基礎知識
流操作：ReadableStream
- 流操作API中的
ReadableStream介面呈現了一個可讀取的二進位流操作。Fetch API 通過Response的body屬性提供了一個具體的ReadableStream對象； ReadableStream.getReader()方法創建一個讀取器並將流鎖定於其上，一旦流被鎖定，其他讀取器不能讀取它，直到它被釋放
Uint8Array && ArrayBuffer
Uint8Array數組類型表示一個8位無符號整型數組，創建時內容被初始化為0。創建完後，可以以對象的方式或使用數組下標索引的方式引用數組中的元素；ArrayBuffer對象用來表示 「通用的、固定長度的」原始二進位數據緩衝區。ArrayBuffer 不能直接操作，而是要通過類型數組對象 或 DataView 對象來操作 ，它們會將緩衝區中的數據表示為特定的格式，並通過這些格式來讀寫緩衝區的內容。new Uint8Array(new ArrayBuffer(imageLength)):創建初始化為0，包含imageLength位元組個元素的無符號整型數組
Blob
Blob（Binary Large Object）表示二進位類型的大對象。在資料庫管理系統中，將二進位數據存儲為一個單一個體的集合。Blob 通常是影像、聲音或多媒體文件。Blob構造函數的語法為：var aBlob = newBlob(blobParts, options);blobParts：它是一個由 ArrayBuffer，ArrayBufferView，Blob，DOMString 等對象構成的數組。DOMStrings 會被編碼為 UTF-8。 options：一個可選的對象- 在瀏覽器中，我們使用
URL.createObjectURL方法來創建 Blob URL，該方法接收一個 Blob 對象，併為其創建一個唯一的 URL。瀏覽器內部為每個通過 URL.createObjectURL 生成的 URL 存儲了一個 「URL → Blob」映射。因此，此類 URL 較短，但可以訪問 Blob 。 - 這裡我們先把響應對象轉換為 ArrayBuffer 對象，然後通過調用 Blob 構造函數，把 ArrayBuffer 對象轉換為 Blob 對象，再利用 createObjectURL 方法創建 Object URL，最終實現圖片預覽
Canvas
- 在畫布上定點陣圖像—> context.drawImage(img,x,y);
- 在畫布上定點陣圖像，並規定圖像的寬度和高度—> context.drawImage(img,x,y,width,height);
- 剪切圖像，併在畫布上定位被剪切的部分—> context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- 繪製一個描邊矩形，直接繪製,不需要手動調用stroke()：ctx.strokeRect( 起點x軸坐標，起點y軸坐標，寬，高 )
本示例中，我們要不斷地從後端讀取視頻流，（我們讀到的本質上是一幀一幀的圖片），然後在頁面中通過img標簽展示出來，動態變化的圖片即形成視頻。
在拿到url後，我們使用ReadableStream.getReader()方法創建一個讀取器，因為需要對視頻流進行操作；讀出每一幀圖片所攜帶的信息：圖片本身的信息和json數據，這個json數據就是我們要畫出的點的位置，但是在這裡我只做一個演示，json中存放了一個鍵值對，我們把鍵值對讀出來動態展示到畫布上即可。
js 解析 mjpeg 視頻流代碼：
點擊查看代碼
<style>
.container{
width: 800px;
height: 600px;
position: relative;
}
#canvas{
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<div class="container">
<canvas id="canvas" width="800" height="600"></canvas>
<img id="image" width="800" height="600" />
</div>
<script>
const url = 'mjpegurl';
fetch(url).then((res) => {
const reader = res.body.getReader();
let lineLength = 0;
let lineBuffer = new Uint8Array(new ArrayBuffer(1000))
let headers = "";
let contentLength = -1;
let contentType = "";
let imageLength = -1;
let imageBuffer = null;
let jsonLength = -1;
let jsonData = "";
let bytesRead = 0;
const read = () => {
reader.read().then(({done, value}) => {
if(done) return
for(let index = 0,len = value.length; index < len; index++) {
//先讀取分段的頭部塊。按行讀取，當數據塊長度未有效時，表示正在讀取頭部塊。
if(contentLength <= 0) {
lineBuffer[lineLength++] = value[index];
//每行字元長度最小為2位元組。
if(lineLength < 2) continue;
//如果行首尾不是\r\n則本行未結束，繼續讀。
if(lineBuffer[lineLength - 2] != 0x0d || lineBuffer[lineLength - 1] != 0x0a) continue;
//成功讀取一行，轉換為String類型，同時把本行數據拼接到頭部的字元串變數中。
for(let i = 0; i < lineLength; i++){
headers += String.fromCharCode(lineBuffer[i])
}
//檢查本行是否為結束行。當行首為\r\n時頭部結束。
if(lineBuffer[0] === 0x0d && lineBuffer[1] === 0x0a) {
//以下是解析頭部數據。
contentType = getValue(headers, "Content-Type");
contentLength = getValue(headers, "Content-length");
imageLength = getValue(headers, "Content-image-length");
jsonLength = getValue(headers, "Content-json-length");
imageBuffer = new Uint8Array(new ArrayBuffer(imageLength));
}
//清空行長度，用於讀取下一行。
lineLength = 0;
}
//讀取分段的數據塊。按數據塊的長度讀取。
else if(bytesRead < contentLength) {
let tempLength = imageLength + jsonLength;
//先讀取圖片數據。
if(bytesRead < imageLength){
imageBuffer[bytesRead] = value[index]
}
//圖片數據後緊接著是json數據。
else if(bytesRead < tempLength) {
jsonData += String.fromCharCode(value[index])
}
bytesRead++;
}else{
//把圖像更新到img控制項上。
let img = document.getElementById("image")
img.src = URL.createObjectURL(new Blob([imageBuffer], {type: contentType}))
//把圖像更新到canvas控制項上。
let ctx = document.getElementById("canvas").getContext("2d")
ctx.drawImage(img, 0, 0, 800, 600);
var obj = {}
try {
obj = JSON.parse(jsonData)
} catch (error) {
console.log("obj parse error", error);
}
for(var key in obj){
ctx.font = "24px Arial"
ctx.fillStyle = "#ca0c16"
ctx.fillText(`${key}:${obj[key]}`, 115, 140)
}
contentLength = 0;
imageLength = 0;
jsonLength = 0;
bytesRead = 0 ;
headers = '';
jsonData = '';
}
}
read();
}).catch((error) => {
console.log("read error", error);
})
}
read()
}).catch((error) => {
console.error(error);
})
const getValue = (headers, key) => {
let value = ''
headers.split("\n").forEach((item) => {
const itemArr = item.split(":")
if(itemArr[0] === key) value = itemArr[1]
})
if(key.includes('length')) {
return Number(value)
}else{
return value;
}
}
</script>
</body>
