海康威视云台获取视频流数据——vue前端页面实时显示

链接地址：https://www.jianshu.com/p/fcd131c08b0dimport cv2class VideoCamera(object):url = "rtsp://admin:admin@192.168.1.37:554/h264/ch1/main/av_stream"def __init__(self):#capturing videoself.video = cv2.Vi

K歌、之王

7045人浏览 · 2022-03-08 09:44:22

K歌、之王 · 2022-03-08 09:44:22 发布

方式1： python rstp推送

原文链接地址

https://www.jianshu.com/p/fcd131c08b0d

import cv2

class VideoCamera(object):
    url = "rtsp://admin:admin@192.168.1.37:554/h264/ch1/main/av_stream"
    def __init__(self):
       #capturing video
       self.video = cv2.VideoCapture(self.url)
    
    def __del__(self):
        #releasing camera
        self.video.release()
        
    def get_frame(self):
       #extracting frames
        ret, frame = self.video.read()
        
        # encode OpenCV raw frame to jpg and displaying it
        ret, jpeg = cv2.imencode('.jpg', frame)
        return jpeg.tobytes()



#!/usr/bin/env python
from flask import Flask, render_template, Response, url_for

app = Flask(__name__)

@app.route('/')
def index():
    return '''<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h1>Video Streaming Demonstration</h1>
    <img src="'''+url_for('video_feed')+'''">
  </body>
</html>
'''

def gen(camera):
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/video_feed')
def video_feed():
    return Response(gen(VideoCamera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

方式2： vlc rstp 转 http 推流

使用的vlc版本 3.0.16
在这里插入图片描述

在这里插入图片描述

前端

<!DOCTYPE HTML>
<html>
<body>

<video src="http://localhost:8055/camera" controls="controls">
    your browser does not support the video tag
</video>

</body>
</html>

效果
在这里插入图片描述

方式三：采用webrtc-streamer获取rstp流展示

一：下载

https://github.com/mpromonet/webrtc-streamer/releases

一、docker安装webrtc-streamer

docker中获取webrtc-streamer

docker pull mpromonet/webrtc-streamer

把自己服务流加入进去并启动（这个地方raspicam是别名待会有用）

docker run -p 8000:8000 -it mpromonet/webrtc-streamer -n raspicam -u rtsp://admin:123456@192.168.0.109:554/h264/ch1/main/av_stream

二、输入localhost:8000

可以看到页面，而我们不就是要得这个界面吗。点击raspicam会定向到一个新得页面。然后仔细观察url
在这里插入图片描述

这个地方用的页面不就是下载包得webrtcstreamer.html吗

然后分析源码

从重定向得url分析出 :
http://localhost:8000/webrtcstreamer.html?video=raspicam&options=rtptransport%3Dtcp%26timeout%3D60&
这里
let url = {video: “raspicam”};
let options = “rtptransport=tcp”;

三：所以html就是

其中adapter.min.js、webrtcstreamer.js、webrtcstreamer.json在下载的包下。
这个页面我是通过localhost:8000查看源码分析出来得。
这个raspicam就是上面设置得别名。options 是rtptransport=tcp 网上查了，很多人这里就没有说清楚。

<html>
<head>
    <script src="libs/adapter.min.js" ></script>
    <script src="webrtcstreamer.js" ></script>
    <script>
        let url = {video: "raspicam"};
        let options = "rtptransport=tcp";
        window.onload         = function() {
            this.webRtcServer = new WebRtcStreamer("video", "http://localhost:8000");
            webRtcServer.connect(url.video, null, options);
        }
        window.onbeforeunload = function() { this.webRtcServer.disconnect() }
    </script>
</head>
<body>
<div>
    <video id="video" muted playsinline controls></video>
</div>
</body>
</html>

效果
在这里插入图片描述

方式4：萤石云平台播放这个应该是最稳的。

方式5：janus gateway 这个也是最近了解到的

总结

方式一有点不稳定，方式三有cpu拉满的情况。还是直接用萤石云平台展示视频吧。莫走弯路。

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^