一、簡介
既然webcoekt是基于tcp連接的，理論上講所有的瀏覽器是可以私有協議處理二進制的，如果我們需要播放視頻，我們可以將視頻數據在后端解碼后直接將圖片推送到webcoekt前端，然后前端通過websocket接收圖片然后將圖片顯示到img或canvas中即可，當然這個是我自己設想的，也是應該可以做的到了，做到如下需要以下技術支持：
- 后端直接ffmpeg轉碼為jpeg圖片流
- 后端定制播放協議包括基本指令如play、stop、pause、faster、slower
- 后端需要提供websocket支持發送圖片流到前端
- 前端需要接受圖片流并顯示出來
后端ffmpeg解碼這里就不說明了，我有很多庫，需要的單獨聯系我購買，前端的顯示jpg流，這里要借助前端顯示圖片放的做法，使用圖片base64數據！前端HTML顯示二進制jpeg圖片：圖片流=>二進制轉image的base64編碼=>設置到img的src中，如前端代碼
<body>
<img id="player" style="width:704px;height:576px"/>
</body>
二進制通過arraybuffer轉base64
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
最后顯示：
var player = document.getElementById('player');
var url= arrayBufferToBase64(data);
player.src='data:image/jpeg;base64,'+url;
當然，還有其他的方式：
var wsCtrl = new WebSocket("ws://127.0.0.1/ctrl/");
//Establish channel code
....
var wsVideo = new WebSocket("ws://127.0.0.1/video/channel1");
wsVideo.onmessage = function(evt)
{
//Method 1
document.getElementById("img1").src = URL.createObjectURL(evt.data);
//Method 2
var read = new FileReader();
read.onload = function(e)
{
document.getElementById("img2").src = e.target.result;
}
read.readAsDataURL(evt.data);
}
ws.onmessage = function(evt) {
if(typeof(evt.data)=="string"){
//textHandler(JSON.parse(evt.data));
}else{
var reader = new FileReader();
reader.onload = function(evt){
if(evt.target.readyState == FileReader.DONE){
var url = evt.target.result;
alert(url);
var img = document.getElementById("imgDiv");
img.innerHTML = "<img src = "+url+" />";
}
}
reader.readAsDataURL(evt.data);
}
};
關于c++的websocket開源工程：websocketpp、QWebSocketServer
二、websocket播放圖片流
多說無益，還不如痛痛快快的來一把，為了減低復雜度，我用java的websocket來實現圖片流的發送(當然c++的庫我也一個實戰項目中用過的名為WebSocket的封裝的dll工程項目，需要的自行私下購買源碼),前端使用一個img標簽展示圖片，這里說明一下，后臺模擬發送圖片(這里僅僅是圖片,不是流,如果是流直接連續不斷發送即可需要ffmpeg轉碼)
首先前端的代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket顯示二進制圖片流</title>
<style type="text/css">
</style>
</head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
//var content = $("#content").val();
$.ajax({
url: "/test/send",
data: {
//content: content
content: ""
},
success: function( result ) {
console.log("請求成功!");
}
});
});
});
</script>
<body>
<h1>WebSocket播放圖片</h1>
<img id="player" style="width:500px;height:400px"/><br/>
<button id="send">請求圖片</button>
</body>
<script type="application/javascript">
var websocket = {
send: function (str) {
}
};
window.onload = function () {
if (!'WebSocket' in window) return;
webSocketInit();
};
function webSocketInit() {
// 連接到服務端端點
websocket = new WebSocket("ws://127.0.0.1:8080/image/show");
// 成功建立連接
websocket.onopen = function () {
console.log("成功連接到服務器");
websocket.send("成功連接到服務器");
};
// 接收到消息
websocket.onmessage = function (event) {
// 文本數據包
if(typeof(event.data)=="string"){
// JSON.parse(evt.data)
console.log("收到服務端發送的消息：" + event.data);
// 圖片數據包Blob
}else{
var reader = new FileReader();
reader.onload = function(evt){
if(evt.target.readyState == FileReader.DONE){
// base64數據
var url = evt.target.result;
document.getElementById("player").src = url;
}
}
reader.readAsDataURL(event.data);
}
};
// 連接發生錯誤
websocket.onerror = function () {
console.log("WebSocket連接發生錯誤");
};
// 連接關閉
websocket.onclose = function () {
console.log("WebSocket連接關閉");
};
// 監聽窗口關閉事件，當窗口關閉時，主動關閉websocket連接
window.onbeforeunload = function () {
websocket.close()
};
}
</script>
</html>
每次點擊發送的時候就向后臺請求一張圖，后臺將改圖發送出去（我簡單的使用websocket群發,可以使用websocket的可變參數將websocket和http關聯起來,這個應該很容易我這里不再贅述，不了解的進群討論)
package com.easystudy.controller;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.Random;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.easystudy.websocket.ImgEndPoint;
/**
* @文件名稱: TestController.java
* @功能描述: 圖片流請求請求發送接口(websocket發送圖片到web端)
* @版權信息： www.easystudy.com
* @技術交流： 961179337(QQ群)
* @編寫作者： lixx2048@163.com
* @聯系方式： 941415509(QQ)
* @開發日期： 2020年9月21日
* @歷史版本： V1.0
* @備注信息：
*/
@RestController
@RequestMapping("/test")
public class TestController {
/**
* @功能描述: 發送請求接口
* @版權信息： www.easystudy.com
* @編寫作者： lixx2048@163.com
* @開發日期： 2020年9月21日
* @備注信息：
*/
@SuppressWarnings("unused")
@GetMapping("/send")
public String reponseMsgToClient(@RequestParam(name="content", required = true)String content) throws Exception{
System.out.println("開始發送圖片數據");
// 隨機選擇一張圖片發送
int index = new Random().nextInt(4) + 1;
String imgName = index + ".jpg";
// 判斷圖片是否存在
URL url = getClass().getClassLoader().getResource(imgName);
File file = new File(url.getFile());
if (!file.exists()) {
return "未找到圖片!";
}
// 創建輸入圖片流
InputStream in = new FileInputStream(file);
if (null == in) {
return "打開文件失敗!";
}
// 讀取圖片數據
int size = (int)file.length();
byte[] buffer = new byte[ size];
int count = in.read(buffer, 0, size);
System.out.println("文件長度:" + size + ", 讀取長度:" + count);
// 發送圖片數據(理論上講應該只發對端連接的)
ImgEndPoint.fanoutMessage(buffer);
// 關閉文件流
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
// 接口響應
return "消息【" +content+ "】發送成功!";
}
}
我這里多一句嘴，如果是音視頻應用的錄像播放，這里可以使用websocket傳輸圖片流，然后通過計算發送定點的圖片流數據到前端來實現自定義的播放器功能（海康螢石云使用的就是websocket播放錄像流的，做法類似）
播放效果如下：
到此這篇關于Html5之webcoekt播放JPEG圖片流的文章就介紹到這了,更多相關Html5播放JPEG圖片流內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
