三种方法实现在VUE前端播放海康摄像头的监控视频

最新推荐文章于 2024-12-25 14:41:11 发布

2401_83641533

最新推荐文章于 2024-12-25 14:41:11 发布

阅读量975

点赞数 4

分类专栏：程序员文章标签：前端 vue.js 音视频

本文链接：https://blog.csdn.net/2401_83641533/article/details/138060368

版权

本文介绍了如何在VUE前端实现海康摄像头监控视频的播放，包括使用opencv通过http协议拉流，ffmpeg结合srs流媒体服务器通过http或rtmp协议播放的方法。

摘要由CSDN通过智能技术生成

经过几天的努力成功将海康的视频流推到了VUE前端播放（ps：三种方法按照复杂程度排序，小白，仅个人经验）

三种方法：
1.opencv拉取流，使用http协议播放（python）
2.ffmpeg拉取流，使用http协议播放（srs流媒体服务器）
3.ffmpeg拉取流，使用rtmp协议播放（srs流媒体服务器）

一、opencv拉取流

拉流端（python）（这也是一个博主的代码，但是没到那页博客了）

from flask import Flask, render_template, Response
import cv2
app = Flask(__name__)

class VideoCamera(object):
    def \_\_init\_\_(self):
        # 通过opencv获取实时视频流
        self.video = cv2.VideoCapture("rtsp://账号:密码@ip:554/Streaming/Channels/101")

    def \_\_del\_\_(self):
        self.video.release()

    def get\_frame(self):
        success, image = self.video.read()
        # 因为opencv读取的图片并非jpeg格式，因此要用motion JPEG模式需要先将图片转码成jpg格式图片
        ret, jpeg = cv2.imencode('.jpg', image)
        return jpeg.tobytes()

def ge