Initial commit

.gitignore

@@ -0,0 +1,37 @@
+HELP.md
+.gradle
+build/
+!gradle/wrapper/gradle-wrapper.jar
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+bin/
+!**/src/main/**/bin/
+!**/src/test/**/bin/
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+out/
+!**/src/main/**/out/
+!**/src/test/**/out/
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+
+### VS Code ###
+.vscode/

build.gradle

@@ -0,0 +1,31 @@
+plugins {
+	id 'java'
+	id 'org.springframework.boot' version '3.2.2'
+	id 'io.spring.dependency-management' version '1.1.4'
+}
+
+group = 'com.hyp'
+version = '1.0'
+
+java {
+	sourceCompatibility = '21'
+}
+
+configurations {
+	compileOnly {
+		extendsFrom annotationProcessor
+	}
+}
+
+repositories {
+	mavenCentral()
+}
+
+dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	implementation 'org.springframework.boot:spring-boot-starter-websocket'
+	 implementation 'cn.hutool:hutool-all:5.8.25'
+	implementation 'com.alibaba.fastjson2:fastjson2:2.0.42'
+	compileOnly 'org.projectlombok:lombok'
+	annotationProcessor 'org.projectlombok:lombok'
+}

gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

gradlew

@@ -0,0 +1,249 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

gradlew.bat

@@ -0,0 +1,92 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

settings.gradle

@@ -0,0 +1 @@
+rootProject.name = 'web-screen-share'

src/main/java/com/hyp/recordservice/WebScreenShareApplication.java

@@ -0,0 +1,13 @@
+package com.hyp.recordservice;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class WebScreenShareApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(WebScreenShareApplication.class, args);
+	}
+
+}

src/main/java/com/hyp/recordservice/config/AppStart.java

@@ -0,0 +1,17 @@
+package com.hyp.recordservice.config;
+
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.boot.ApplicationArguments;
+import org.springframework.boot.ApplicationRunner;
+import org.springframework.stereotype.Component;
+
+@Slf4j
+@Component
+public class AppStart implements ApplicationRunner {
+    @Override
+    public void run(ApplicationArguments args) throws Exception {
+        log.info("请先打开播放地址");
+        log.info("播放地址：http://127.0.0.1:8080/play-demo/play.html");
+        log.info("采集地址：http://127.0.0.1:8080/record-demo/record.html");
+    }
+}

src/main/java/com/hyp/recordservice/config/WebSocketConfig.java

@@ -0,0 +1,18 @@
+package com.hyp.recordservice.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.socket.server.standard.ServerEndpointExporter;
+
+@Configuration
+public class WebSocketConfig {
+    /**
+     * 	注入ServerEndpointExporter，
+     * 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
+     */
+    @Bean
+    public ServerEndpointExporter serverEndpointExporter() {
+        return new ServerEndpointExporter();
+    }
+
+}

src/main/java/com/hyp/recordservice/record/controller/RecordController.java

@@ -0,0 +1,28 @@
+package com.hyp.recordservice.record.controller;
+
+import com.alibaba.fastjson2.JSONArray;
+import com.alibaba.fastjson2.JSONObject;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@Slf4j
+@RestController
+@RequestMapping("record")
+public class RecordController {
+    private final static JSONArray allEvent = new JSONArray();
+
+    @RequestMapping("push")
+    public void push(@RequestBody String body){
+        log.info("收到事件：{}",body);
+        JSONObject request = JSONObject.parse(body);
+
+        allEvent.addAll(request.getJSONArray("events"));
+    }
+
+    @RequestMapping("get")
+    public JSONArray get(){
+        return allEvent;
+    }
+}

src/main/java/com/hyp/recordservice/record/service/RecordPlaySocket.java

@@ -0,0 +1,47 @@
+package com.hyp.recordservice.record.service;
+
+import jakarta.websocket.*;
+import jakarta.websocket.server.ServerEndpoint;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+import java.io.IOException;
+
+@Component
+@Slf4j
+@ServerEndpoint("/play")
+public class RecordPlaySocket {
+
+    static Session session = null;
+
+    @OnOpen
+    public void onOpen(Session session) {
+        RecordPlaySocket.session = session;
+    }
+
+    @OnClose
+    public void onClose() {
+        RecordPlaySocket.session = null;
+    }
+
+    @OnMessage
+    public void onMessage(String messageStr) throws Exception {
+//        log.info("play 收到消息：{}",messageStr);
+    }
+
+    @OnError
+    public void onError(Session session, Throwable error) {
+        log.error("play 用户错误,原因:"+error.getMessage());
+        RecordPlaySocket.session = null;
+    }
+
+    public void sendMessage(String text) throws IOException {
+//        log.info("play 发送消息：{}", text);
+        if (session == null) {
+            return;
+        }
+        synchronized(session){
+            session.getBasicRemote().sendText(text);
+        }
+    }
+}

src/main/java/com/hyp/recordservice/record/service/RecordPushSocket.java

@@ -0,0 +1,52 @@
+package com.hyp.recordservice.record.service;
+
+import cn.hutool.extra.spring.SpringUtil;
+import jakarta.annotation.Resource;
+import jakarta.websocket.*;
+import jakarta.websocket.server.ServerEndpoint;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+
+
+@Component
+@Slf4j
+@ServerEndpoint("/push")
+public class RecordPushSocket {
+
+    @Resource
+    RecordPlaySocket recordPlaySocket;
+
+    static Session session = null;
+
+    @OnOpen
+    public void onOpen(Session session) {
+        RecordPushSocket.session = session;
+    }
+
+    @OnClose
+    public void onClose() {
+        RecordPushSocket.session = null;
+    }
+
+    @OnMessage
+    public void onMessage(String messageStr) throws Exception {
+        log.info("push 收到消息：{}",messageStr);
+        RecordPlaySocket socket = SpringUtil.getBean(RecordPlaySocket.class);
+        socket.sendMessage(messageStr);
+    }
+
+    @OnError
+    public void onError(Session session, Throwable error) {
+        log.error("push 用户错误,原因:"+error.getMessage());
+        RecordPushSocket.session = null;
+    }
+
+    public void sendMessage(String text){
+        log.info("push 发送消息：{}", text);
+        if (session == null) {
+            return;
+        }
+        session.getAsyncRemote().sendText(text);
+    }
+}

src/main/resources/application.properties

@@ -0,0 +1 @@
+

src/main/resources/static/play-demo/play.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>播放</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
+    <style>
+        .replayer-wrapper {
+            left: 0;
+        }
+    </style>
+</head>
+<body style="height: 100vh">
+
+</body>
+<script>
+
+    let replayer = null
+
+    // WebSocket构造函数，创建WebSocket对象
+    let ws = new WebSocket('ws://localhost:8080/play')
+
+    // 连接成功后的回调函数
+    ws.onopen = function (params) {
+        console.log('客户端连接成功')
+    };
+
+    // 从服务器接受到信息时的回调函数
+    ws.onmessage = function (e) {
+        let events = JSON.parse(e.data).events
+        addEvents(events)
+    };
+
+    // 连接关闭后的回调函数
+    ws.onclose = function (evt) {
+        console.log("关闭客户端连接");
+    };
+
+    // 连接失败后的回调函数
+    ws.onerror = function (evt) {
+        console.log("连接失败了");
+    };
+
+    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
+    window.onbeforeunload = function () {
+        ws.close();
+    }
+
+    function addEvents(events) {
+        if (replayer == null) {
+            replayer = new rrwebPlayer({
+                target: document.body, // 可以自定义 DOM 元素
+                // 配置项
+                props: {
+                    events: events,
+                    height: '99vh',
+                    UNSAFE_replayCanvas: true,
+                    liveMode: true,
+                    skipInactive: false,
+                    autoPlay: true,
+                    showController: false
+                },
+            });
+            replayer.play();
+        }
+        for (let i = 0; i < events.length; i++) {
+            console.log('添加事件：', events[i])
+            replayer.addEvent(events[i])
+
+        }
+    }
+
+
+</script>
+</html>

src/main/resources/static/record-demo/record.css

@@ -0,0 +1,11 @@
+.tpys{
+    color: blueviolet;
+}
+
+.myCanvas {
+    margin-top: 10px;
+    margin-left: 50px;
+    background: #FFF;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+}

src/main/resources/static/record-demo/record.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>录制</title>
+    <script src="../record/record.js"></script>
+
+    <link rel="stylesheet" href="./record.css">
+    <style>
+        body{
+            font-size: 25px;
+        }
+    </style>
+</head>
+<body>
+<label>
+    <h1 class="tpys">同屏功能演示</h1>
+    客户姓名： <input><br>
+    证件号码： <input><br>
+    客户性别：
+    <select>
+        <option>先生</option>
+        <option>女士</option>
+    </select><br>
+
+    签名：<br>
+    <canvas id="myCanvas" class="myCanvas" width="500px" height="300px"></canvas><br>
+    <button>提交</button>
+    <br>
+    <img width="300px" src="https://foruda.gitee.com/images/1702358540061515631/95da4ed5_9560465.png"><br>
+</label>
+<label>
+
+</label>
+</body>
+<script src="./record.js"></script>
+<script>
+
+
+    // WebSocket构造函数，创建WebSocket对象
+    let ws = new WebSocket('ws://localhost:8080/push')
+
+    // 连接成功后的回调函数
+    ws.onopen = function (params) {
+        console.log('客户端连接成功')
+        initRecord()
+    };
+
+    // 从服务器接受到信息时的回调函数
+    ws.onmessage = function (e) {
+        console.log('收到服务器响应', e.data)
+    };
+
+    // 连接关闭后的回调函数
+    ws.onclose = function(evt) {
+        console.log("关闭客户端连接");
+    };
+
+    // 连接失败后的回调函数
+    ws.onerror = function (evt) {
+        console.log("连接失败了");
+    };
+
+    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
+    window.onbeforeunload = function() {
+        ws.close();
+    }
+
+    let events = [];
+    let reportFrequency = 0
+
+    function initRecord(){
+        rrwebRecord({
+
+            recordCanvas: true,
+            recordCrossOriginIframes: true,
+            inlineImages: true,
+            collectFonts: true,
+            emit(event) {
+                events.push(event);
+                if (events.length > reportFrequency) {
+                    save()
+                }
+            },
+        });
+    }
+
+    // save 函数用于将 events 发送至后端存入，并重置 events 数组
+    function save() {
+        const body = JSON.stringify({ events });
+        events = [];
+        console.log('发送消息',body)
+        ws.send(body)
+    }
+
+    async function sendPost(url,data){
+        return new Promise((resolve, reject) => {
+            let httpRequest = new XMLHttpRequest();
+            httpRequest.open('POST', url, true);
+            httpRequest.setRequestHeader("Content-type", "application/json");
+            httpRequest.send(data);
+            httpRequest.onreadystatechange = function () {
+                if (httpRequest.readyState === 4) {
+                    resolve({status:httpRequest.status,data:httpRequest.response})
+                }
+            };
+        })
+    }
+
+</script>
+</html>

src/main/resources/static/record-demo/record.js

@@ -0,0 +1,51 @@
+const canvas = document.getElementById('myCanvas');//1.获取画布
+const ctx = canvas.getContext('2d');//2.获取上下文
+
+
+
+//按下标记
+let isOnOff = false;
+let oldX = null;
+let oldY = null;
+
+//设置画笔颜色
+let lineColor = '#000';  //默认线条颜色为黑色
+
+//设置画笔线宽
+let lineWidth = 5;
+
+//添加鼠标移动事件
+canvas.addEventListener('mousemove', draw, false);
+//添加鼠标按下事件
+canvas.addEventListener('mousedown', down, true);
+//添加鼠标按下事件
+canvas.addEventListener('mouseup', up, false);
+
+function down(event) {
+    isOnOff = true;
+    oldX = event.offsetX;
+    oldY = event.offsetY;
+}
+
+function up() {
+    isOnOff = false;
+}
+
+function draw(event) {
+    if (isOnOff === true) {
+        console.log(event)
+        let newX = event.offsetX;
+        let newY = event.offsetY;
+
+        ctx.beginPath();
+        ctx.moveTo(oldX, oldY);
+        ctx.lineTo(newX, newY);
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+        ctx.lineCap = 'round';
+        ctx.stroke();
+
+        oldX = newX;
+        oldY = newY;
+    }
+}