Question

我有一个带网络摄像头的python客户端和一个python服务器。我想动态地在服务器上使用相机框架，因此想在浏览器中使用python socketio服务器观看框架。

我尝试将帧发送到python socketio服务器，并使用它更新img src，但我不知道如何使用接收到的数据更新img标签src。

我该如何解决更新在socketio服务器上从客户端网络摄像头收到的img的问题？谢谢。

client / test.py

...
socketIO = SocketIO(host, port)
camnamespace = socketIO.define(CamNamespace, namespace)
video = cv2.VideoCapture(0)
success, frame = video.read()
encode_param=[int(cv2.IMWRITE_JPEG_QUALITY),90]
result, imgencode = cv2.imencode('.jpeg', frame, encode_param)
stringData = imgencode.tostring()
data=stringData
while True:
    camnamespace.emit('dash_event', {'data':str(data)})
...

webserver / templates / index.html

    ...
    <img id="bg">
    <script>
        var myroom = "test";
        var namespace = "/live";

        $(document).ready(function() {
            var socket = io.connect('http://' + document.domain 
                        + ':' + location.port + namespace);
            socket.on('connect', function() {
                socket.emit('join',{room:myroom});
            });
            socket.on("livedash", function(msg) {
                data = msg['data']
                $("#bg").attr("src", '--frame\r\n'+ 'Content-Type: image/jpeg\r\n\r\n' + data + '\r\n\r\n');
            });
        });
    </script>
    ...

webserver / sock_namespace.py

...
class MyNamespace(Namespace):
    def on_dash_event(self, message):
        emit('livedash',{'data':str(message['data']) },room="test")
...

我如何使用flask-socketio动态更新流式img？

0 个答案: