在React Frontend上显示rtsp流

Question

我需要在带有Python+Django后端的react组件上显示视频流。

现状：

我正在使用opencv库来获取流：

import cv2
[...]
def read_data():
cap = cv2.VideoCapture("rtsp://user:password/bla bla bla")
while(cap.isOpened()):
ret, frame              = cap.read()
retval, buffer          = cv2.imencode('.jpg', frame)
image_result_base64     = base64.b64encode(buffer)
return HttpResponse(image_result_base64, 200)

在React上，this.state.response_data是后端调用的内容responseText：

render ()
{
const img_data ="data:image/png;base64," + this.state.response_data;
return <img id="overView" class="overView" alt="Stream" src={ img_data}  width="90%" />
}

这种方法很有效，在前端我可以看到组件中的框架。

不幸的是，要创建某种流，我需要每秒至少调用后端10次才能达到10fps。这对后端来说很重。

我读过关于StreamingHttpResponse的文章，但我不知道是否符合我的需求。

Answer 1

使用StreamingHttpResponse，

在Django，

import cv2
from django.http import StreamingHttpResponse
def gen(camera):
video = cv2.VideoCapture()
video.open(camera)
print("streaming live feed of ",camera)
while True:
success, frame = video.read()  
if not success:
break
else:
ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--framern'
b'Content-Type: image/jpegrnrn' + frame + b'rn')
#url:"localhost:8000/camera_feed"
def camerafeed(request): 
return StreamingHttpResponse(gen("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"),content_type="multipart/x-mixed-replace;boundary=frame")

在前端，

<img src="localhost:8000/camera_feed"></img>

我不知道这是否更好。。。但它有效！