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

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

javascript python html raspberry-pi

将捕获的图像从python服务器发送到javascript客户端,javascript,python,html,raspberry-pi,live-streaming,Javascript,Python,Html,Raspberry Pi,Live Streaming,现在我尝试使用Raspberry Pi制作服务器，它将实时流图像数据发送到浏览器。服务器端是用Python和Tornado编写的，而客户端是用HTML和javascript编写的。两者都使用WebSocket。（我是javascript的初学者。）这些是代码服务器端： class WSHandler(WebSocketHandler): def initialize(self, camera): self.camera = camera cv.Set

现在我尝试使用Raspberry Pi制作服务器，它将实时流图像数据发送到浏览器。服务器端是用Python和Tornado编写的，而客户端是用HTML和javascript编写的。两者都使用WebSocket。（我是javascript的初学者。）

这些是代码

服务器端：

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()

客户端：

javascript（client.js）

html（index.html）

我猜，这是由于服务器发送的数据格式错误造成的

我的问题是,，应该使用什么数据格式？服务器应该如何发送数据？

客户端应该如何接收数据？

< P>我发现了C++和JavaScript之间的类似问题。

服务器端和以前一样

客户端“ws.binaryType”必须设置为“arraybuffer”才能接收blob对象。它应该由base64和“encode”函数进行编码，这是从我上面写的链接中引用的

守则：

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;
}

var-img=document.getElementById（“liveImg”）；
var arrayBuffer；
var ws=newwebsocket（“ws://localhost:8080/camera”）；
ws.binaryType='arraybuffer'；
ws.onopen=函数（）{
日志（“已建立连接”）；
};
ws.onmessage=函数（evt）{
arrayBuffer=evt.data；
img.src=“data:image/jpeg；base64，”+编码（新的Uint8Array（arrayBuffer））；
};
功能编码（输入）{
var keyStr=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyz012456789+/=”；
var输出=”；
变量chr1，chr2，chr3，enc1，enc2，enc3，enc4；
var i=0；
while（i>2；
enc2=（（chr1&3）>4）；
enc3=（（chr2&15）>6）；
enc4=chr3&63；
if（isNaN（chr2））{
enc3=enc4=64；
}否则如果（isNaN（chr3））{
enc4=64；
}
输出+=按键字符（enc1）+按键字符（enc2）+
按键字符（enc3）+按键字符（enc4）；
}
返回输出；
}

html

我将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在一个简单的脚本中拍摄照片，并将它们存储在一个知名的目录中。然后将nodeJS作为服务器运行（为其安装socket.io库），然后使用HTML+jquery（为客户端安装socket.io库）。您有几个示例说明如何在nodeJS服务器和客户端之间打开套接字。

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

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