5

私は現在、ウェブサイトが私のウェブカメラを表示できるようにするコードを作成しようとしています。Processingの代わりにPythonとpygameを使用することを除いて、このWebサイトにリンクされているチュートリアルに大まかに従っています。

現時点では、私のコードは pygame 画像 (元々は SimpleCV 画像でした) を取得し、それを jpg 形式に変換して、websockets 経由でクライアントに送信し、そこでimgタグ内に表示しようとしています。ただし、pygame 画像を jpg に変換して Web ブラウザーで適切に表示する方法がわかりません。

これは、Flask と gevent を使用するサーバーのコードです。

#!/usr/bin/env python

import base64
import cStringIO
import time

from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from flask import Flask, request, render_template


import pygame
pygame.init()

import SimpleCV as scv

app = Flask(__name__)
cam = scv.Camera(0)

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

@app.route('/camera')
def camera():

    if request.environ.get('wsgi.websocket'):
        ws = request.environ['wsgi.websocket']

        while True:            
            image = cam.getImage().flipHorizontal().getPGSurface()
            data = cStringIO.StringIO()
            pygame.image.save(image, data)
            ws.send(base64.b64encode(data.getvalue()))
            time.sleep(0.5)

if __name__ == '__main__':
    http_server = WSGIServer(('',5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()

これは私のHTMLファイルです:

<!DOCTYPE HTML>
<html>
<head>
<title>Flask/Gevent WebSocket Test</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            if ("WebSocket" in window) {
                cam = new WebSocket("ws://" + document.domain + ":5000/camera");
                cam.onmessage = function (msg) {
                    $("#cam").attr('src', 'data:image/jpg;base64,' + msg.data);
                };
                cam.onerror = function(e) {
                    console.log(e);
                }
            } else {
                alert("WebSocket not supported");
            }
        });
    </script>
</head>
<body>
    <img id="cam" src="" width="640" height="480" />
</body>
</html>

これらは、私が問題を抱えていると思われる特定の行です。

while True:
    image = cam.getImage().flipHorizontal().getPGSurface()
    data = cStringIO.StringIO()
    pygame.image.save(image, data)
    ws.send(base64.b64encode(data.getvalue()))
    time.sleep(0.5)

現在、コードを実行しようとするとlocalhost:5000、無効な jpg 画像が表示されます。また、Firefox で実行しようとすると非常に遅くなりますが、後でデバッグできる無関係な問題である可能性があります。

別のライブラリから変換しているため、pygame イメージが有効なものであることを確認し、テキスト データをやり取りして Websockets を正しく使用していることを確認しました。

また、pygame サーフェスを RGB 形式に変換しようと呼び出しpygame.image.to_stringてみましたが、それも機能しません。

私は何を間違っていますか？

4

2 に答える 2

6

基礎となる PIL イメージを使用して、ファイルのようなオブジェクトに書き込み、読み取り、base-64 エンコードすることができます。

from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from flask import Flask, request
from time import sleep
from cStringIO import StringIO

import pygame
pygame.init()

import SimpleCV as scv

app = Flask(__name__)
cam = scv.Camera(0)


@app.route('/camera')
def camera():

    if request.environ.get('wsgi.websocket'):
        ws = request.environ['wsgi.websocket']

        while True:
            fp = StringIO()
            image = cam.getImage().flipHorizontal().getPIL()
            image.save(fp, 'JPEG')
            ws.send(fp.getvalue().encode("base64"))
            #fp.close() << benchmark and memory tests needed
            sleep(0.5)


if __name__ == '__main__':
    http_server = WSGIServer(('',5000), app, handler_class=WebSocketHandler)
    http_server.serve_forever()
于 2013-08-24T03:53:50.297 に答える