如何使用Python vidstream实现屏幕共享并展示到Django HTML页面

问题本质 #

你当前用的vidstream自带的StreamingServer默认会把收到的屏幕流直接渲染到本地GUI窗口，没有输出可被web服务调用的数据流，所以需要修改接收端逻辑，把流转成浏览器可识别的格式再对接Django。

步骤1：修改receiver.py，捕获帧到内存 #

我们重写StreamingServer的帧处理方法，把收到的RGB帧转成JPEG格式存入全局缓存，供Django调用：

from vidstream import StreamingServer
import threading
from PIL import Image
import io
import time

# 全局缓存最新的JPEG帧和线程锁
latest_frame = None
frame_lock = threading.Lock()

class DjangoCompatibleStreamingServer(StreamingServer):
    # 重写帧处理回调
    def handle_frame(self, data):
        global latest_frame
        # data是收到的RGB帧数据
        img = Image.frombytes('RGB', (self._width, self._height), data)
        # 转成JPEG格式压缩
        buf = io.BytesIO()
        img.save(buf, format='JPEG', quality=70)
        with frame_lock:
            latest_frame = buf.getvalue()

# 替换原来的StreamingServer为自定义类，填入你Linux设备的实际内网IP
receiver = DjangoCompatibleStreamingServer('ipaddr', 8080)

t = threading.Thread(target=receiver.start_server)
t.start()

while input("") != 'STOP':
    continue

receiver.stop_server()

注意：修改前需要先安装依赖pip install pillow

步骤2：编写Django相关代码 #

视图文件（views.py） #

写两个视图，一个返回展示页面，一个输出MJPEG流：

from django.http import HttpResponse
from django.shortcuts import render
# 导入上一步receiver里的帧缓存和锁，注意路径对应你的项目结构
from .receiver import latest_frame, frame_lock 
import time

def index(request):
    # 返回展示页面
    return render(request, 'screen_share.html')

def stream(request):
    # 输出MJPEG流
    def generate():
        while True:
            with frame_lock:
                if latest_frame is None:
                    # 没有帧的时候等待0.1秒重试
                    time.sleep(0.1)
                    continue
                frame = latest_frame
            # MJPEG流的固定传输格式
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
            time.sleep(1/30) # 控制每秒30帧输出
    return HttpResponse(generate(), content_type='multipart/x-mixed-replace; boundary=frame')

路由配置（urls.py） #

绑定两个视图的访问地址：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('stream/', views.stream, name='stream'),
]

前端模板（templates/screen_share.html） #

用img标签直接加载流地址即可：

<!DOCTYPE html>
<html>
<head>
    <title>屏幕共享</title>
</head>
<body>
    <h1>远程屏幕共享</h1>
    <img src="{% url 'stream' %}" width="100%" style="max-width: 1920px;">
</body>
</html>

运行流程 #

1. 先运行修改后的receiver.py
2. 在Windows虚拟机上运行原来的sender.py
3. 启动Django服务，在任意设备的浏览器访问Django服务地址即可看到屏幕流

注意事项 #

• 如果需要更低延迟，可替换为WebRTC方案，但改造成本更高，当前MJPEG方案对新手最友好
• 确保Linux设备的8080（vidstream接收端口）和Django的运行端口（默认8000）开放防火墙权限
• 可调整JPEG保存的quality参数平衡清晰度和带宽占用

内容的提问来源于stack exchange，提问作者user16954278