~~~
<div class="panel panel-default panel-intro">
<div class="panel-heading">
{:build_heading(null, false)}
</div>
<div class="panel-body">
<div id="mobile">
<img src="" id="dfffff">
</div>
</div>
</div>
<script>
let ws_str = 'ws://*.*.*.*:9911/clinet';
//創建一個webSocket實例，執行后，客戶端就會與服務端連接
var ws = new WebSocket(ws_str);
ws.binaryType = "arraybuffer";
//當WebSocket創建成功時，觸發onopen事件
ws.onopen = function(){
console.log("open");
// 復雜的數據結構，在通過連接發送之前，必須進行序列化。
const json = JSON.stringify({
"fun": "loop_device_screenshot",
"msgid": 0,
"data": {
"deviceid": "E4:9A:79:66:E0:88",//設備id
"time": 100, //循環間隔時間
"isjpg":true //是否返回jpg格式的圖片，不填默認jpg
}
});
ws.send(json); //將消息發送到服務端
}
//當客戶端收到服務端發來的消息時，觸發onmessage事件
ws.onmessage = function(e){
// console.log(e.data);
console.log(binaryEvent(e));
// if (e.data.constructor.name === "Blob") {
// let reader = new FileReader();
// reader.readAsText(e.data, 'utf-8');
// reader.onload = function (e) {
// let data = reader.result;
// console.log("result", data);
// let deviceId = getDeviceId(data);
// // console.log("deviceId=", deviceId);
// let imgUrl = getImage(data);
// // console.log("imgUrl=", imgUrl);
// let isJpg = getJpg(data);
// // console.log("isJpg=", isJpg);
// }
// } else {
// let obj = JSON.parse(e.data);
// console.log("string:", obj)
// }
}
const binaryEvent = (event) => {
// console.log(event);
let data = event.data
if (data instanceof ArrayBuffer) {
data = new Uint8Array(data);
}
// console.log('data.length :>> ', data.length);
const decoder = new TextDecoder('utf-8');
const device_id = decoder.decode(data.slice(0, 261)).split('\x00')[0];
const is_jpg = parseInt(data.slice(261, 265))
const img_data = data.slice(265);
// console.log('device_id, is_jpg :>> ', device_id, is_jpg);
// console.log('img_data :>> ', img_data);
const _uint8Array = new Uint8Array(img_data);
// 轉換為base64字符串
const base64String = uint8ArrayToBase64(_uint8Array);
// var img = document.createElement('img');
var img_src = 'data:image/jpeg;base64,' + base64String;
// document.body.appendChild(img);
document.getElementById("dfffff").src = img_src;
return { device_id, is_jpg, img_data, base64String }
}
function uint8ArrayToBase64(uint8Array) {
// 將Uint8Array轉換為一個字符串
const binaryString = String.fromCharCode.apply(null, uint8Array);
const base64String = btoa(binaryString);
return base64String;
}
function getJpg(data){
return data.slice(261, 265);
}
function getImage(data){
//創建節點
// var img = document.createElement('img');
// img.src = imgUrl;
// document.body.appendChild(img);
return data.slice(265);
}
function getDeviceId(data){
let encoder = new TextEncoder();
let decoder = new TextDecoder('utf-8');
let utf8Array = encoder.encode(data.slice(0, 261));
let decodedStr = decoder.decode(utf8Array);
return decodedStr.split('\x00')[0];
}
//當客戶端收到服務端發送的關閉連接請求時，觸發onclose事件
ws.onclose = function(e){
console.log("close");
}
//如果出現連接、處理、接收、發送數據失敗的時候觸發onerror事件
ws.onerror = function(e){
console.log(e);
}
</script>
~~~
