如何在Javascript中显示base64图像

Question

我正在尝试流式处理Raspberry Pi摄像机，并且出于安全原因，即使客户端位于同一LAN上，我也在通过安全服务器建立服务器通道。 但是，这导致了可怕的延迟。 我现在正在尝试通过LAN而不是通过服务器流式传输视频。 我知道浏览器仅允许在被动元素（例如）上通过HTTPS服务器进行HTTP连接。

我的服务器将图像保存为编码为base64的本地jpeg文件：

camera = cv2.VideoCapture(0)
grabbed, frame = camera.read()
frame = cv2.resize(frame, (320, 240))
buffer = cv2.imencode('.jpg', frame)[1]
buffer = base64.b64encode(buffer)
buffer.decode('utf-8')
with open(ROOT + '/static/image.jpeg', mode='wb+') as image:
    image.write(buffer)

我的客户有一个图像标签，和一个简单的脚本来请求保存的文件：

 <img id='img'> <script> setInterval(function() { var myImageElement = document.getElementById('img'); myImageElement.src = 'data:image/jpg;base64,http://10.0.0.35:8000/static/image.jpg?rand=' + Math.random(); }, 500); </script> 

结果是不断出现控制台错误，例如：

data:image/jpg;charset=utf-8;base64,http://10.0.0.35:8000/static/image.jpg?rand=0.7520646586573345:1 GET data:image/jpg;charset=utf-8;base64,http://10.0.0.35:8000/static/image.jpg?rand=0.7520646586573345 net::ERR_INVALID_URL

我检查了图片是否可以访问（在浏览器中输入了http://10.0.0.35:8000/static/image.jpg ，并且没有出现任何错误）我还检查了文件是否为base64 jpeg，在线工具。 我已经看过这个问题，但没有任何效果，我不明白为什么会收到此错误以及如何解决。 有人可以指引我正确的方向吗？

Answer 1

为了解决此问题，我使用了两种不同的解决方案：

[A]：我使用mjpg-streamer将视频流式传输到LAN mjpg-streamer正在打开本地服务器以流式传输或捕获端口8080上摄像机的图像。因此，我已将图像的src属性更改为：

[B]： myImageElement.src = http://10.0.0.35:8080

就是这样。