websocket实现视频流图片帧

<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')) { // 如果浏览器原生支持HLS
       video.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并回显

<el-upload 
         ref="upload"
         action=""
         drag
         accept=".jpg,.png,.gif"
         list-type="picture-card"
         :before-upload="beforeAvatarUpload"
         :show-file-list="false">
         <div class="uploadTips">
             <img class="uploadTipsImg" :src="require('@/assets/images/portrait/uploadTipsImg.png')" />
             <span class="uploadTipsText">选择本地上传</span>
         </div>
     </el-upload>

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);
       }
   }