websocketでjpgデータを受信してcanvasに表示したい

Question

実現したいこと

pythonでWebsocketでjpgデータを受信してtkinter canvasに表示したい
クライアント側はUSBカメラOpenCVで毎秒、画像バイト数、jpeg画像(base64)で送信しています
サーバ側は受信したらjpeg画像をバイナリにしcanvasに表示する

前提

Websocketでデータ受信してファイルmyfile.jpgに出力しています
ファイルは正常に画像表示できています。
tk_image = ImageTk.PhotoImage(img1)
で以下のエラーメッセージが発生していると思われます。
この辺、分かる方がいれば教えてください。

発生している問題・エラーメッセージ

エラーメッセージ
Exception occurred during processing of request from ('127.0.0.1', 53064)
Traceback (most recent call last):
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\socketserver.py", line 683, in process_request_thread
    self.finish_request(request, client_address)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\socketserver.py", line 360, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\websocket_server\websocket_server.py", line 271, in __init__
    StreamRequestHandler.__init__(self, socket, addr, server)
  File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10_3.10.3056.0_x64__qbz5n2kfra8p0\lib\socketserver.py", line 747, in __init__
    self.handle()
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\websocket_server\websocket_server.py", line 284, in handle
    self.read_next_message()
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\websocket_server\websocket_server.py", line 341, in read_next_message
    opcode_handler(self, message_bytes.decode('utf8'))
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\websocket_server\websocket_server.py", line 163, in _message_received_
    self.message_received(self.handler_to_client(handler), self, msg)
  File "E:\linux関係\TinkerBoard\pg\websocket\server2.py", line 78, in on_recieve
    tk_image = ImageTk.PhotoImage(img1)
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\PIL\ImageTk.py", line 108, in __init__
    mode = Image.getmodebase(mode)
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\PIL\Image.py", line 267, in getmodebase
    return ImageMode.getmode(mode).basemode
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\PIL\ImageMode.py", line 74, in getmode
    return _modes[mode]
TypeError: unhashable type: 'numpy.ndarray'
----------------------------------------
Exception ignored in: <function PhotoImage.__del__ at 0x0000025706A58CA0>
Traceback (most recent call last):
  File "C:\Users\Arail\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\PIL\ImageTk.py", line 118, in __del__
    name = self.__photo.name
AttributeError: 'PhotoImage' object has no attribute '_PhotoImage__photo'

該当のソースコード

import tkinter as tk
import threading
import base64
import io
import numpy as np
from PIL import Image
from PIL import ImageTk
from datetime import datetime
from websocket_server import WebsocketServer

class Application(tk.Frame):
	thread1 = None
	server  = None

	def __init__(self,master):
		super().__init__(master)

		try:
			self.master.geometry("1024x720")
			self.master.title("WebsocketServer")
			#Frame_Camera
			self.frame_cam = tk.Frame(self.master, relief= tk.FLAT)
			self.frame_cam.place(x = 2, y = 2)
			self.frame_cam.configure(width = 640, height = 480)
			#Canvas
			self.canvas1 = tk.Canvas(self.frame_cam, bg='#000000')
			self.canvas1.configure( width= 640, height=480)
			self.canvas1.place( x=1, y=2 )
			# Close
			self.btn_close = tk.Button( self.master, text='閉じる')
			self.btn_close.configure(command=self.press_close_button )
			self.btn_close.place( x=750, y=50, width=250, height=100 )

			self.thread1 = threading.Thread(target = self.thread1)
			self.thread1.daemon = True
			self.thread1.start() 

		except Exception as e:
			print('=== エラー内容 __init__() ===')
			print('type:' + str(type(e)))
			print('e自身:' + str(e))

	def press_close_button(self):
		self.master.destroy()
		#websocketを終了させる
		#self.server.shutdown_gracefully()
		#self.server.shutdown_abruptly()
		self.server.shutdown()
		exit(-1)


	def thread1(self):
		try:
			self.server = WebsocketServer(port=8765, host='127.0.0.1')
			self.server.set_fn_new_client(self.new_client)
			self.server.set_fn_message_received(self.on_recieve)
			self.server.run_forever()

		except Exception as e:
			print('=== エラー内容 thread1() ===')
			print('type:' + str(type(e)))
			print('e自身:' + str(e))


	def new_client(self, client, server):
		server.send_message_to_all(datetime.now().isoformat() + ": new client joined!")

	def on_recieve(self, client, server, message):
		flen = message[:6]
		picb = base64.b64decode(message[6:])
		img1 = np.frombuffer(picb,dtype=np.uint8)
		f = open('myfile.jpg', 'wb')
		f.write(img1)
		f.close()
		tk_image = ImageTk.PhotoImage(img1)
		self.canvas1.create_image(0,0, image = tk_image)
		print(client["address"][0]+":" + str(client["address"][1]) + "から受信 : " + flen)


if __name__ == "__main__":
	root = tk.Tk()
	app = Application(master = root)
	app.mainloop()

Answer 1

通信データがjpeg画像なのであれば、BASE64デコード後のバイナリはJPEG形式なはずなのでnumpyで処理するのではなく、以下のようにjpgフォーマット指定してPhotoImageで処理させるべきと思います。

tk_image = tk.PhotoImage(data=picb, format='jpg')
self.canvas1.create_image(0,0, image = tk_image)

参考：how to display an image in tkinter from a byte array

Comments

[yk3125]

下記のようなコードでエラーが出なくなりましたが、一瞬だけ表示され真っ暗になります
受信した一瞬しか表示されないのですが原因が分かりますでしょうか
def on_recieve(self, client, server, message):
flen = message[:6]
picb = base64.b64decode(message[6:])
img1 = Image.open(io.BytesIO(picb))
tk_image = ImageTk.PhotoImage(img1)
self.canvas1.create_image(0,0, image = tk_image)

[can110]

おそらくtk_imageがローカル変数で、すぐにリソースが解放されているためだと思います。
canvas1と同じくメンバ変数にするとよいと思います。

[yk3125]

下記のようにself.tk_imageにしたらうまくいきました。
ありがとうございました。
class Application(tk.Frame):
tk_image = None
:
self.tk_image = ImageTk.PhotoImage(img1)
self.canvas1.create_image(0,0, image = self.tk_image, anchor = tk.NW)