流萤337 2025-02-08 11:57 采纳率: 33.3%
浏览 6
已结题

遇到难关了，找不到是html还是python文件的问题。



import cv2
import numpy as np
import mss
from flask import Flask, Response, render_template, request
import threading
import pyautogui

app = Flask(__name__)

# 全局变量来存储最新的图像
latest_image = None
image_lock = threading.Lock()

def capture_screen():
    global latest_image
    with mss.mss() as sct:
        monitors = sct.monitors
        if len(monitors) < 1:
            print("没有检测到屏幕")
            return
        
        monitor = monitors[2]  # 修改为第一块屏幕
        
        while True:
            screenshot = sct.grab(monitor)
            img = np.array(screenshot)
            img = cv2.cvtColor(img, cv2.COLOR_BGRA2BGR)
            
            with image_lock:
                latest_image = img

@app.route('/')
def index():
    return render_template('index.html')

def generate_frames():
    global latest_image
    while True:
        with image_lock:
            if latest_image is not None:
                ret, buffer = cv2.imencode('.jpg', latest_image)
                frame = buffer.tobytes()
                yield (b'--frame\r\n'
                       b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video_feed')
def video_feed():
    return Response(generate_frames(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

# 新增路由来接收触摸事件
@app.route('/touch_event', methods=['POST'])
def touch_event():
    data = request.get_json()
    print(f"Received touch event: {data}")
    pyautogui.move(data['x'], data['y'], duration=0.1)
    return '', 204

if __name__ == "__main__":
    # 启动屏幕捕获线程
    screen_thread = threading.Thread(target=capture_screen)
    screen_thread.daemon = True
    screen_thread.start()
    
    # 启动Flask应用
    app.run(host='0.0.0.0', port=5000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screen Capture</title>
    <style>
        #videoContainer {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #videoContainer img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
    <div id="videoContainer">
        <img id="videoFrame" src="{{ url_for('video_feed') }}">
    </div>
    <script>
        document.addEventListener('touchstart', function(event) {
            fetch('/touch_event', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    type: 'touchstart',
                    touches: Array.from(event.touches).map(touch => ({
                        clientX: touch.clientX,
                        clientY: touch.clientY
                    }))
                })
            });
        });

        document.addEventListener('touchend', function(event) {
            fetch('/touch_event', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    type: 'touchend',
                    touches: Array.from(event.touches).map(touch => ({
                        clientX: touch.clientX,
                        clientY: touch.clientY
                    }))
                })
            });
        });

        // 新增鼠标点击事件监听器
        document.addEventListener('click', function(event) {
            fetch('/touch_event', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    type: 'click',
                    x: event.clientX,
                    y: event.clientY
                })
            });
        });

        // 添加脚本在页面加载时自动进入全屏模式
        window.onload = function() {
            var videoFrame = document.getElementById('videoFrame');
            if (videoFrame.requestFullscreen) {
                videoFrame.requestFullscreen();
            } else if (videoFrame.mozRequestFullScreen) { // Firefox
                videoFrame.mozRequestFullScreen();
            } else if (videoFrame.webkitRequestFullscreen) { // Chrome, Safari and Opera
                videoFrame.webkitRequestFullscreen();
            } else if (videoFrame.msRequestFullscreen) { // IE/Edge
                videoFrame.msRequestFullscreen();
            }
        };
    </script>
</body>
</html>

为什么我以上的代码在运行时是这个样子？

img


本来我是因为平板无法下载软件也无法adb无法打开开发者模式的情况下不得已用平板网页端来作为我的电脑副屏，但是现在却有屏幕信息在网页上显示歪了以及没有虚拟鼠标，触摸事件所同步的鼠标在第一个显示器操作的问题。

  • 写回答

6条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2025-02-08 11:57
    关注

    以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

    HTML文件中出现错误时，PYTHON文件中可能也存在问题。这个问题可能是由于HTML文档的结构或元素定位不正确导致的。在这种情况下，需要查看HTML文档以确定问题所在，并使用适当的PYTHON脚本来修复它。

    为了解决此问题，首先确保你有一个包含HTML和CSS文件的项目。然后，在HTML文件中查找并替换与PYTHON脚本相关的错误。这通常可以通过在PYTHON脚本中添加适当的错误处理来实现。例如：

    TRY:
    # ... PYTHON 代码...
EXCEPT EXCEPTION AS E:
    PRINT(F"ERROR IN {E}")

    如果在PYTHON脚本中遇到了错误，可以尝试捕获并打印这个错误。然后，你可以检查PYTHON版本是否支持特定的异常处理功能（例如，PYCHARM或IDE自带的调试工具）。

    以下是一个简单的示例，展示如何在PYTHON脚本中捕获并打印错误：

    TRY:
    # ... PYTHON 代码...
EXCEPT EXCEPTION AS E:
    PRINT("AN ERROR OCCURRED:", E)
FINALLY:
    # 这里应该执行一些操作，比如关闭浏览器或者保存日志

    请注意，上述代码仅作为一个起点，实际解决问题的方法可能取决于具体的应用场景和需求。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？

问题事件

  • 系统已结题 3月1日
  • 已采纳回答 2月21日
  • 创建了问题 2月8日