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