将捕获的图像从python服务器发送到javascript客户端 [英] Send captured images from python server to javascript client
问题描述
现在我尝试使用 Raspberry Pi 制作服务器，将实时流图像数据发送到浏览器.服务器端是用Python&龙卷风，而客户端是用HTML和javascript编写的.两者都使用WebSocket.(我是javascript的初学者.)
Now I try to make server using Raspberry Pi which send live stream image data to browser. The server side was written in Python & Tornado, while client side was written in HTML and javascript. Both use WebSocket. (I am a beginner of 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)
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>
当服务器运行时访问此"index.html"时，出现下一个错误.
When I access this 'index.html' while the server is running, next error appeared.
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?
推荐答案
我在C ++和javascript之间发现了类似的问题使用javascript和websocket显示来自blob的图像
I found similar question between C++ and javascript Display image from blob using javascript and websockets
服务器端与以前相同.
必须将客户端'ws.binaryType'设置为'arraybuffer'才能接收blob对象.而且它应该由base64和编码"功能编码，该功能是从我上面写的链接中引用的.
The Client side, 'ws.binaryType' has to be set to 'arraybuffer' to receive blob object. And It should be encoded by base64 and 'encode' function which is referred from link I wrote above.
代码:
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
我将canvas标签替换为img标签
I replaced canvas tag to img tag
<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客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
