<img ref="imgFrame" width="100%" height="100%" style="object-fit: fill" alt="" src="">
createSocket(url) {let socket = new WebSocket('ws://192.168.4.120:2222');socket.onopen = e => {socket.send('camera:ALVAM0001');}const imgRef = this.$refs.imgFrame;socket.onmessage = event => {if (event.data instanceof Blob) {const reader = new FileReader();reader.onload = function () {const arrayBuffer = reader.result;const uint8Array = new Uint8Array(arrayBuffer);const blob = new Blob([uint8Array], { type: 'image/png' });if (imgRef) {imgRef.src = URL.createObjectURL(blob);}}reader.readAsArrayBuffer(event.data);}}socket.onclose = async e => {console.log(3, 'onclose');}socket.onerror = async e => {console.log(4, 'onerror');}socket.close()
}
H5使用Hls摄像头监控画面
npm install --save hls
<video id="video" controls muted width="100%" height="100%" style="object-fit: fill"loop="false"@ended="videoEnded"></video>
import Hls from 'hls.js';init(){let video = document.getElementById('video');let hls = null // 定义的hls对象let url = '' // 这个是直播视频流的地址if(Hls.isSupported()) { hls = new Hls();hls.loadSource(url); // 设置播放路径hls.attachMedia(video); // 解析到video标签上hls.on(Hls.Events.MANIFEST_PARSED, function () {video.play(); // 播放视频});this.hls = hls;} else if (video.canPlayType('application/vnd.apple.mpegurl')) { // 如果浏览器原生支持HLSvideo.src = url;video.addEventListener('loadedmetadata', function () {video.play();});}setInterval(() => {if (this.searchData.cameraData) {devicePlayAPI({uid: this.searchData.cameraData});// 每分钟发送一次请求告知服务端流被链接}}, 1000);
}videoEnded(){this.video && this.video.play();},// 更换流地址：
changeUrl(){this.hls.loadSource(this.playHeader + this.playDevice);// 地址分为ip+设备id,
}
// 销毁：
beforeDestoryed(){if (this.hls) {this.hls.destroy();}
}elementui input 文件上传 图像转base64并回显
beforeImgUpload(file){this.fileToBase64(file).then(base64=>{this.formData.imgBase64 = base64;})
}
fileToBase64(file){return new Promise((resolve,reject)=>{const reader = new FileReader();reader.readAsDataURL(file);reader.onload=()=>resolve(reader.result.split(',')[1]);reader.onerror = error => reject(error)})
}wait多个async await
使用场景：请求回来的数据，列表里的图片数据不能直接用，要挨个根据列表里的文件图片内容拿取新地址
async getCovers(arr, cb) {let newArr = JSON.parse(JSON.stringify(arr));for (let i = 0,len = newArr.length; i < len; i++) {const element = newArr[i];try {const res1 = await codeGet(element.path);element.pathUrl = res1.data.downloadUrl || 'none';} catch (err) { }try {const res2 = await codeGet(element.cover);element.coverUrl = res2.data.downloadUrl || 'none';} catch (err) { }}if(cb) {cb(newArr);}}