企業(yè)網(wǎng)站建設(shè)基本流程危機(jī)公關(guān)處理方案
0.什么是WebSocket,由于普通的請求是間斷式發(fā)送的,如果要同一時(shí)間發(fā)生大量的請求,必然導(dǎo)致響應(yīng)速度慢(因?yàn)楦鶕?jù)tcp協(xié)議要經(jīng)過三層握手,如果不持續(xù)發(fā)送,就會(huì)導(dǎo)致n多次握手,關(guān)閉連接,打開連接)
1.業(yè)務(wù)需求: 由于我需要使用java來處理視頻的問題,視頻其實(shí)就是圖片,相當(dāng)于每張圖片就是幀,不停發(fā)送幀去實(shí)現(xiàn)人臉失敗,然后返回處理結(jié)果,(支付寶刷臉支付也是同樣的道理)
2.前端建立WebSocket()對象,onMessage函數(shù)監(jiān)聽返回的結(jié)果
<!DOCTYPE html>
<html>
<head><title>視頻幀捕獲</title>
</head>
<body><video id="videoElement" autoplay></video><canvas id="canvasElement" style="display: none;"></canvas><script>//如果是https協(xié)議的話,就需要改為 wssvar socket = new WebSocket("ws://localhost:8080/facedetect");const video = document.getElementById('videoElement');const canvas = document.getElementById('canvasElement');const context = canvas.getContext('2d');socket.onopen = function() {console.log("xxxx");// 每1秒發(fā)送一次視頻幀數(shù)據(jù),必須要在這里寫定時(shí)器,因?yàn)榇蜷_連接后才能發(fā)送請求,不然每次都會(huì)報(bào)Websocket close的錯(cuò)誤setInterval(captureFrame,10000)};socket.onmessage = function(event) {var result = event.data;// 處理服務(wù)器返回的結(jié)果console.log(result);//打印出結(jié)果};socket.onclose = function(event) {console.log("WebSocket已關(guān)閉");};socket.onerror = function(event) {console.error('WebSocket錯(cuò)誤:', event);};navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {video.srcObject = stream;}).catch(error => {console.error('無法訪問攝像頭:', error);});function captureFrame() {context.drawImage(video, 0, 0, canvas.width, canvas.height);const imageDataUrl = canvas.toDataURL('image/jpeg', 0.5);console.log(imageDataUrl) socket.send(imageDataUrl);// 將數(shù)據(jù)URL發(fā)送到WebSocket服務(wù)器}// 每隔一段時(shí)間捕獲一幀并發(fā)送到Servlet</script>
</body>
</html>
3.后端寫配置類,配置websocket的路徑
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {//錄入人臉數(shù)據(jù)頁面registry.addHandler(myHandler(), "/face").setAllowedOrigins("*");//人臉識(shí)別頁面registry.addHandler(myHandler1(), "/facedetect").setAllowedOrigins("*");}@Beanpublic WebSocketHandler myHandler() {return new FaceController();}@Beanpublic WebSocketHandler myHandler1() {return new FaceController1();}
}
4.寫controller
//人臉錄入的controller
@Controller
@RequestMapping("/face")
@CrossOrigin
public class FaceController extends TextWebSocketHandler {private WebSocketSession session;// 處理WebSocket連接請求@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("WebSocket連接已建立");// 保存WebSocket會(huì)話this.session = session;}// 處理WebSocket文本消息@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {String text = message.getPayload();System.out.println(text);text = text.replaceFirst("^data:image/[^;]+;base64,?\\s*", "");text = text.replaceAll("[^A-Za-z0-9+/=]", "");System.out.println(text);byte[] imageBytes = Base64.getDecoder().decode(text);if (imageBytes != null) {try {// 讀取字節(jié)數(shù)組并返回BufferedImage對象ByteArrayInputStream bis = new ByteArrayInputStream(imageBytes);BufferedImage bufferedImage = ImageIO.read(bis);if (bufferedImage != null) {// 示例：顯示圖像寬度和高度int width = bufferedImage.getWidth();int height = bufferedImage.getHeight();System.out.println("圖像寬度：" + width);System.out.println("圖像高度：" + height);//錄入人臉Employee e1 = HRService.addEmp(UUID.randomUUID().toString().substring(0,10), bufferedImage);ImageService.saveFaceImage(bufferedImage, e1.getCode());// 保存員工照片文件System.out.println(e1.getCode());// 在這里可以對BufferedImage對象進(jìn)行其他操作} else {System.out.println("無法讀取圖像");}} catch (Exception e) {e.printStackTrace();}} else {System.out.println("無效的base64數(shù)據(jù)");}}// 根據(jù)接收到的文本消息進(jìn)行相應(yīng)的處理}
//人臉檢測的控制器
@Controller
@RequestMapping("/facedetect")
@CrossOrigin
public class FaceController1 extends TextWebSocketHandler {
private WebSocketSession session;// 處理WebSocket連接請求@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("WebSocket連接已建立");// 保存WebSocket會(huì)話this.session = session;}// 處理WebSocket文本消息@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("detect");String text = message.getPayload();System.out.println(text);text = text.replaceFirst("^data:image/[^;]+;base64,?\\s*", "");text = text.replaceAll("[^A-Za-z0-9+/=]", "");System.out.println(text);byte[] imageBytes = Base64.getDecoder().decode(text);if (imageBytes != null) {try {// 讀取字節(jié)數(shù)組并返回BufferedImage對象ByteArrayInputStream bis = new ByteArrayInputStream(imageBytes);BufferedImage bufferedImage = ImageIO.read(bis);if (bufferedImage != null) {FaceEngineService.loadAllFaceFeature();FaceFeature faceFeature = FaceEngineService.getFaceFeature(bufferedImage);// 獲取當(dāng)前幀中出現(xiàn)的人臉對應(yīng)的特征碼String code = FaceEngineService.detectFace(faceFeature);System.out.println(code);if (code != null) {// 如果特征碼不為null，表明畫面中存在某員工的人臉Employee e = HRService.getEmp(code);// 根據(jù)特征碼獲取員工對象HRService.addClockInRecord(e);// 為此員工添加打卡記錄// 文本域添加提示信息session.sendMessage(new TextMessage("打卡成功"));}// 在這里可以對BufferedImage對象進(jìn)行其他操作} else {session.sendMessage(new TextMessage("打卡成功"));}} catch (Exception e) {e.printStackTrace();}} else {System.out.println("無效的base64數(shù)據(jù)");}}// 根據(jù)接收到的文本消息進(jìn)行相應(yīng)的處理}