将捕获的图像从python服务器发送到javascript客户端

Question

Now I try to make server using Raspberry Pi which send live stream image data to browser. 现在，我尝试使用Raspberry Pi制作服务器，该服务器将实时流图像数据发送到浏览器。 The server side was written in Python & Tornado, while client side was written in HTML and javascript. 服务器端用Python＆Tornado编写，而客户端则用HTML和javascript编写。 Both use WebSocket. 两者都使用WebSocket。 (I am a beginner of javascript.) （我是javascript的初学者。）

These are the codes 这些是代码

Server side: 服务器端：

class WSHandler(WebSocketHandler):
    def initialize(self, camera):
        self.camera = camera
        cv.SetCaptureProperty(self.capture, cv.CV_CAP_PROP_FRAME_WIDTH, 480)
        cv.SetCaptureProperty(self.capture, cv.CV_CAP_PROP_FRAME_HEIGHT, 360)

    def open(self):
        print("connection opened")
        while True:
            self.loop()

    def loop(self):
        img = self.camera.takeImage()
        self.write_message(img, binary=True)

class Camera():
    def __init__(self):
        self.capture = cv.CaptureFromCAM(0)

    def takeImage(self):
        img = cv.QueryFrame(self.capture)
        img = cv.EncodeImage(".jpg", img).tostring()
        return img

def main():
    camera = Camera()
    app = tornado.web.Application([
        (r"/camera", WSHandler, dict(camera=camera)),
    ])
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(8080)
    IOLoop.instance().start()

if __name__ == "__main__":
    main()

Client side: 客户端：

javascript(client.js) JavaScript的（client.js）

var canvas =  document.getElementById("liveCanvas");;
var context =  canvas.getContext("2d");

var ws = new WebSocket("ws://localhost:8080/camera");
ws.onopen = function(){
        console.log("connection was established");
};
ws.onmessage = function(evt){   
    context.drawImage(evt.data,0,0);
};

html(index.html) HTML（的index.html）

<html>
 <head>
  <title>livecamera</title>
  <canvas id="liveCanvas" width="480" height="360"></canvas>
  <script type="text/javascript" src="./client.js"></script>
 </head>
</html>

When I access this 'index.html' while the server is running, next error appeared. 当服务器运行时访问此“ index.html”时，出现下一个错误。

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

I guess, this is caused by mistaking of data format sent from server. 我猜这是由于服务器发送的数据格式错误引起的。

My questions are, What data format should be used? 我的问题是，应使用哪种数据格式？ How should the server send data? 服务器应如何发送数据？ How should the client receive data? 客户应如何接收数据？

Answer 1

I found similar question between C++ and javascript Display image from blob using javascript and websockets 我在C ++和javascript之间发现了类似的问题，使用javascript和websockets从blob显示图像

The Server side is same as before. 服务器端与以前相同。

The Client side, 'ws.binaryType' has to be set to 'arraybuffer' to receive blob object. 客户端的“ ws.binaryType”必须设置为“ arraybuffer”才能接收blob对象。 And It should be encoded by base64 and 'encode' function which is referred from link I wrote above. 并且它应该由base64和“编码”函数编码，该函数是从我上面写的链接引用的。

The code: 编码：

javascript JavaScript的

var img = document.getElementById("liveImg");
var arrayBuffer;

var ws = new WebSocket("ws://localhost:8080/camera");
ws.binaryType = 'arraybuffer';

ws.onopen = function(){
    console.log("connection was established");
};
ws.onmessage = function(evt){
arrayBuffer = evt.data;
img.src = "data:image/jpeg;base64," + encode(new Uint8Array(arrayBuffer));
};

function encode (input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input[i++];
        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                  keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}

html HTML

I replaced canvas tag to img tag 我将canvas标签替换为img标签

<html>
 <head>
  <title>livecamera</title>
  <img id="liveImg" width="480" height="360"></canvas>
  <script type="text/javascript" src="./client.js"></script>
 </head>
</html>

将捕获的图像从python服务器发送到javascript客户端

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-10 06:59:52

将捕获的图像从python服务器发送到javascript客户端

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-10 06:59:52

解决方案1
1 已采纳 2014-04-10 06:59:52