‘壹’ 在网页上用websocket播放RTSP实时流 性能优化 进阶方案
最近发现有的网站上，显示的视频流很丝滑，而且在多路情况下不会出现页面卡死。 总结了一下所使用的技术。
后端推消息，把数据转为json字符串，通过websocket推给前端, 图片使用base64编码
{
"channel": "camera_1",
"url": "data:image/png;base64,iV"
}
前端接收到数据后，解码，使用img 标签展示 图片base64
客户端的传输方式改为 ArrayBuffer方式。将channel、图片文件流等信息拼接为二进制数据。 通过websocket推送给前端
举例：
channel频道: camera_1 占两个字节；
图片: file文件流 占128字节
字节顺序 Little-endian
前端读取为ArrayBuffer, 通过视图操作，取出图片的二进制流，生成Blob对象
读取blob对象， 返回 URL格式的字符串（base64编码）以表示所读取文件的内容
前端img 标签 src 赋值为 base64 字符串，显示视频流图片。
‘贰’ 前端input文件怎么转换成后端文件
前端input文件转换成后端文件方法如下。
1、设置input标签，将input标签的type属性设置为file。
2、绑定ref绑定并获取该标签的DOM节点。
3、通过FormData实例对象处理二进制文件或图片。
4、获取input节点的files属性以及上传文件/图片的业务逻辑与请求发送都放在了input事件回调函数中进行。
5、由于是发送二进制数据，发送请求时头部字段Content-type要设置成multipart/form-data。
‘叁’ java后台怎么把数据库二进制图片传到前台显示
两种思路，一种是你把图片下下来。告诉路径给前端。
另一种是你直接把图片转换成byte数组，返回给前端。前端是可以有办法的。（我用过这种用来爬虫爬验证码都是这么干的）
望采纳
‘肆’ Vue中前端接收二进制文件流实现预览PDF
1、后台Controller代码 @GetMapping("/common/getPDFStream/{key}") public void getPDFStream(@PathVariable String key,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException { FileStorage fileStorage = storageService.findByKey(key); String type = fileStorage.getType(); MediaType mediaType = MediaType.parseMediaType(type); Resource file = storageService.loadAsResource(key); if (file == null) { response.setStatus(-1); } try { //文件所在的路径file.getURI().getPath() File file1 = new File(file.getURI().getPath()); byte[] data = null; FileInputStream input = new FileInputStream(file1); data = new byte[input.available()]; input.read(data); response.getOutputStream().write(data); input.close(); } catch (Exception e) { e.printStackTrace(); } }2、前台接收 封装axios, request.js import axios from 'axios' /** * 封装axios异步请求的方法================== */ // 创建一个axios对象----------- const request = axios.create({ baseURL:process.env.VUE_APP_BASE_API,//根据不同的环境，加载不同的常量值 timeout: 50000,//请求超时，50000毫秒 }) // 设置请求拦截器==================================== // 对拦截进行请求-------------------- request.interceptors.request.use(config => { //请求拦截 config.data = { ...config.data, userId: sessionStorage.getItem('userId') } return config; }, error => { //出现异常 return Promise.reject(error);//es6写法 }); // 设置响应拦截器================================== // 对拦截进行响应-------------------- request.interceptors.response.use(response =>{ if(!response.data||response.data==""){ return '{"flag":"failure","msg":"未知错误"}'; } return response.data; },error =>{ return Promise.reject(error); }) export default request //导出自定义创建的axios对象,供其他组件进行使用3、定义方法 common.js import request from '@/utils/request' //导入已经封装好的axios请求方式 export function getPDFStream(param) { // 定义后端请求路径 let url = process.env.VUE_APP_BASE_API + '/common/getPDFStream/' + fileKey return request.get(url, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' }).then(async (data) => { console.log('getPDFStream data', data) const isLogin = await blobValidate(data.data) console.log('download isLogin', isLogin) if (isLogin) { const blob = new Blob([data.data], {type: 'application/pdf'}) return blob } else { const resText = await data.text() const rspObj = JSON.parse(resText) const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'] Message.error(errMsg) } }).catch((r) => { console.error(r) Message.error('下载文件出现错误，请联系管理员！') }) }4、vue页面代码 ①触发事件列表标签{{scope.row.courseName}}②预览展示弹窗 <el-dialog p=""> </el-dialog> width="900px" title="预览" :visible.sync="lookPdfFile" :footer="null" :forceRender="true" @ok="lookPdfFile">③ 需要导入方法、初始值、和自定义方法 // 在vue页面导入方法getPDFStream import { getPDFStream } from "@/api/common";// 在vue页面定义data data () { return { lookPdfFile:false,//预览pdf pdfUrl:'',// pdf路径 } }// 在vue页面methods定义方法handlePDF methods: { /** 课程预览 **/ async handlePDF(row) { console.log('handleLook', row)this.getPDFStream(row.fileKey).then(res => { console.log('res::::', res) // debugger if (window.createObjectURL !== undefined) { // basic this.pdfUrl = window.createObjectURL(res) + '#toolbar=0' } else if (window.webkitURL !== undefined) { // webkit or chrome try { this.pdfUrl = window.webkitURL.createObjectURL(res) + '#toolbar=0' } catch (error) {} } else if (window.URL !== undefined) { // mozilla(firefox) try { this.pdfUrl = window.URL.createObjectURL(res) + '#toolbar=0' } catch (error) {} } this.$nextTick(() => { console.log('this.pdfUrl', this.pdfUrl) this.lookPdfFile = true }) }) } }‘伍’ 如何使用Node.js处理前端代码文件的编码问题
使用 NodeJS 编写前端工具时，操作得最多的是文本文件，因此也就涉及到了文件编码的处理问题。我们常用的文本编码有 UTF8 和 GBK 两种，并且 UTF8 文件还可能带有 BOM。在读取不同编码的文本文件时，需要将文件内容转换为 JS 使用的 UTF8 编码字符串后才能正常处理。
1、BOM 的移除
BOM 用于标记一个文本文件使用 Unicode 编码，其本身是一个 Unicode 字符（"uFEFF"），位于文本文件头部。在不同的 Unicode 编码下，BOM 字符对应的二进制字节如下：
3、单字节编码
有时候，我们无法预知需要读取的文件采用哪种编码，因此也就无法指定正确的编码。比如我们要处理的某些 CSS 文件中，有的用 GBK 编码，有的用 UTF8 编码。虽然可以一定程度可以根据文件的字节内容猜测出文本编码，但这里要介绍的是有些局限，但是要简单得多的一种技术。
首先我们知道，如果一个文本文件只包含英文字符，比如 Hello World，那无论用 GBK 编码或是 UTF8 编码读取这个文件都是没问题的。这是因为在这些编码下，ASCII0~128 范围内字符都使用相同的单字节编码。
反过来讲，即使一个文本文件中有中文等字符，如果我们需要处理的字符仅在 ASCII0~128 范围内，比如除了注释和字符串以外的JS代码，我们就可以统一使用单字节编码来读取文件，不用关心文件的实际编码是 GBK 还是 UTF8。
‘陆’ css前端如何把字符串转为数字
方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换。
1. 转换函数：
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。
一些示例如下：
复制代码 代码如下：
parseInt(“1234blue”); //returns 1234
parseInt(“0xA”); //returns 10
parseInt(“22.5”); //returns 22
parseInt(“blue”); //returns NaN
parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：
复制代码代码如下：
parseInt(“AF”， 16); //returns 175
parseInt(“10”， 2); //returns 2
parseInt(“10”， 8); //returns 8
parseInt(“10”， 10); //returns 10
‘柒’ js在前端怎么把二进制数据解析成图片
关键字：Data URI scheme
相关资料链接：http://blog.csdn.net/samqingqing/article/details/7532141