title: How to send a pygame image over websockets?
body: <p>I'm currently trying to code something that will let websites view my webcam. I'm roughly following the tutorial linked on <a href="http://badankles.com/?p=209" rel="noreferrer">this website</a>, except using Python and pygame instead of Processing.</p>
  
  <p>At the moment, my code is grabbing a pygame image (which was originally a SimpleCV image), attempting to convert it into jpg format, and send it over websockets to the client where it will display it inside an <code>img</code> tag. However, I can't seem to figure out how to convert a pygame image into jpg and get it to display properly on the web browser.</p>
  
  <p>This is my code for the server, which uses Flask and gevent:</p>
  
  <pre><code>#!/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()
  </code></pre>
  
  <p>This is my HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Flask/Gevent WebSocket Test&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          $(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");
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;img id="cam" src="" width="640" height="480" /&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>These are the specific lines that I think I'm having trouble with:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>Currently, if I try and run my code, going to <code>localhost:5000</code> will display an invalid jpg image. It also becomes really laggy if I try running it on Firefox, but that may be an unrelated issue that I can debug later.</p>
  
  <p>I've checked and made sure that the pygame image is a valid one, since I'm converting it from another library, and also checked that I was using websockets correctly by sending text data back and forth.</p>
  
  <p>I've also tried calling <code>pygame.image.to_string</code> to try and convert the pygame surface into RGB format, but that also doesn't work.</p>
  
  <p>What am I doing wrong?</p>