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。我看过this question，但没有任何效果，我不明白为什么会收到此错误，以及如何解决该错误。有人可以指引我正确的方向吗？

Answer 1

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

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

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

就是这样。

如何使用Javascript

1 个答案: