『壹』 在網頁上用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