java 实现监控rtsp流转flv,实现前端播放(前后端代码都有)

这篇具有很好参考价值的文章主要介绍了java 实现监控rtsp流转flv,实现前端播放(前后端代码都有)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.服务代码

  1. 目录结构

java 实现监控rtsp流转flv,实现前端播放(前后端代码都有)
  1. maven配置文件引入坐标:

        <dependency>
            <groupId>org.bytedeco</groupId>
            <artifactId>javacv-platform</artifactId>
            <version>1.5.1</version>
        </dependency>

        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.0</version>
        </dependency>
  1. 服务器代码

controller层:

import com.xr.web.rtspconverterflvspringbootstarter.service.IFLVService;
import io.swagger.annotations.Api;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * FLV流转换
 *
 * @author gc.x
 */
@Api(tags = "flv")
@RequestMapping("/flv")
@RestController
public class FLVController {

    @Autowired
    private IFLVService service;


    @GetMapping()
    public void open4(HttpServletResponse response,
                      HttpServletRequest request) {
        String test = "rtsp://admin:sdxr@2022@192.168.0.205:554";

        service.open(test, response, request);
    }
}

config层:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.TaskScheduler;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.concurrent.ThreadPoolTaskScheduler;

/**
 * 使用多线程执行定时任务
 * 
 * @author gc.x
 *
 */
@Configuration
@EnableScheduling
public class SchedulerConfig {
    @Bean
    public TaskScheduler taskScheduler() {
        ThreadPoolTaskScheduler scheduler = new ThreadPoolTaskScheduler();
        // 线程池大小
        scheduler.setPoolSize(3);
        // 线程名字前缀
        scheduler.setThreadNamePrefix("task-thread-");
        return scheduler;
    }

}

factories层:

/**
 * 转换器状态(初始化、打开、关闭、错误、运行)
 * 
 * @author gc.x
 */
public enum ConverterState {
    INITIAL, OPEN, CLOSE, ERROR, RUN
}
import javax.servlet.AsyncContext;
import java.io.IOException;

public interface Converter {

    /**
     * 获取该转换的key
     */
    public String getKey();

    /**
     * 获取该转换的url
     * 
     * @return
     */
    public String getUrl();

    /**
     * 添加一个流输出
     * 
     * @param entity
     */
    public void addOutputStreamEntity(String key, AsyncContext entity) throws IOException;

    /**
     * 退出转换
     */
    public void exit();

    /**
     * 启动
     */
    public void start();

}
import com.alibaba.fastjson.util.IOUtils;
import lombok.extern.slf4j.Slf4j;
import org.bytedeco.ffmpeg.avcodec.AVPacket;
import org.bytedeco.ffmpeg.global.avcodec;
import org.bytedeco.javacv.FFmpegFrameGrabber;
import org.bytedeco.javacv.FFmpegFrameRecorder;
import javax.servlet.AsyncContext;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

/**
 * javacv转包装<br/>
 * 无须转码,更低的资源消耗,更低的延迟<br/>
 * 确保流来源视频H264格式,音频AAC格式
 * 
 * @author gc.x
 */
@Slf4j
public class ConverterFactories extends Thread implements Converter {
    public volatile boolean runing = true;
    /**
     * 读流器
     */
    private FFmpegFrameGrabber grabber;
    /**
     * 转码器
     */
    private FFmpegFrameRecorder recorder;
    /**
     * 转FLV格式的头信息<br/>
     * 如果有第二个客户端播放首先要返回头信息
     */
    private byte[] headers;
    /**
     * 保存转换好的流
     */
    private ByteArrayOutputStream stream;
    /**
     * 流地址,h264,aac
     */
    private String url;
    /**
     * 流输出
     */
    private List<AsyncContext> outEntitys;

    /**
     * key用于表示这个转换器
     */
    private String key;

    /**
     * 转换队列
     */
    private Map<String, Converter> factories;

    public ConverterFactories(String url, String key, Map<String, Converter> factories, List<AsyncContext> outEntitys) {
        this.url = url;
        this.key = key;
        this.factories = factories;
        this.outEntitys = outEntitys;
    }

    @Override
    public void run() {
        boolean isCloseGrabberAndResponse = true;
        try {
            grabber = new FFmpegFrameGrabber(url);
            if ("rtsp".equals(url.substring(0, 4))) {
                grabber.setOption("rtsp_transport", "tcp");
                grabber.setOption("stimeout", "5000000");
            }
            grabber.start();
            if (avcodec.AV_CODEC_ID_H264 == grabber.getVideoCodec()
                    && (grabber.getAudioChannels() == 0 || avcodec.AV_CODEC_ID_AAC == grabber.getAudioCodec())) {
                log.info("this url:{} converterFactories start", url);
                // 来源视频H264格式,音频AAC格式
                // 无须转码,更低的资源消耗,更低的延迟
                stream = new ByteArrayOutputStream();
                recorder = new FFmpegFrameRecorder(stream, grabber.getImageWidth(), grabber.getImageHeight(),
                        grabber.getAudioChannels());
                recorder.setInterleaved(true);
                recorder.setVideoOption("preset", "ultrafast");
                recorder.setVideoOption("tune", "zerolatency");
                recorder.setVideoOption("crf", "25");
                recorder.setFrameRate(grabber.getFrameRate());
                recorder.setSampleRate(grabber.getSampleRate());
                if (grabber.getAudioChannels() > 0) {
                    recorder.setAudioChannels(grabber.getAudioChannels());
                    recorder.setAudioBitrate(grabber.getAudioBitrate());
                    recorder.setAudioCodec(grabber.getAudioCodec());
                }
                recorder.setFormat("flv");
                recorder.setVideoBitrate(grabber.getVideoBitrate());
                recorder.setVideoCodec(grabber.getVideoCodec());
                recorder.start(grabber.getFormatContext());
                if (headers == null) {
                    headers = stream.toByteArray();
                    stream.reset();
                    writeResponse(headers);
                }
                int nullNumber = 0;
                while (runing) {
                    AVPacket k = grabber.grabPacket();
                    if (k != null) {
                        try {
                            recorder.recordPacket(k);
                        } catch (Exception e) {
                        }
                        if (stream.size() > 0) {
                            byte[] b = stream.toByteArray();
                            stream.reset();
                            writeResponse(b);
                            if (outEntitys.isEmpty()) {
                                log.info("没有输出退出");
                                break;
                            }
                        }
                        avcodec.av_packet_unref(k);
                    } else {
                        nullNumber++;
                        if (nullNumber > 200) {
                            break;
                        }
                    }
                    Thread.sleep(5);
                }
            } else {
                isCloseGrabberAndResponse = false;
                // 需要转码为视频H264格式,音频AAC格式
                ConverterTranFactories c = new ConverterTranFactories(url, key, factories, outEntitys, grabber);
                factories.put(key, c);
                c.start();
            }
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        } finally {
            closeConverter(isCloseGrabberAndResponse);
            completeResponse(isCloseGrabberAndResponse);
            log.info("this url:{} converterFactories exit", url);

        }
    }

    /**
     * 输出FLV视频流
     * 
     * @param b
     */
    public void writeResponse(byte[] b) {
        Iterator<AsyncContext> it = outEntitys.iterator();
        while (it.hasNext()) {
            AsyncContext o = it.next();
            try {
                o.getResponse().getOutputStream().write(b);
            } catch (Exception e) {
                log.info("移除一个输出");
                it.remove();
            }
        }
    }

    /**
     * 退出转换
     */
    public void closeConverter(boolean isCloseGrabberAndResponse) {
        if (isCloseGrabberAndResponse) {
            IOUtils.close(grabber);
            factories.remove(this.key);
        }
        IOUtils.close(recorder);
        IOUtils.close(stream);
    }

    /**
     * 关闭异步响应
     * 
     * @param isCloseGrabberAndResponse
     */
    public void completeResponse(boolean isCloseGrabberAndResponse) {
        if (isCloseGrabberAndResponse) {
            Iterator<AsyncContext> it = outEntitys.iterator();
            while (it.hasNext()) {
                AsyncContext o = it.next();
                o.complete();
            }
        }
    }

    @Override
    public String getKey() {
        return this.key;
    }

    @Override
    public String getUrl() {
        return this.url;
    }

    @Override
    public void addOutputStreamEntity(String key, AsyncContext entity) throws IOException {
        if (headers == null) {
            outEntitys.add(entity);
        } else {
            entity.getResponse().getOutputStream().write(headers);
            entity.getResponse().getOutputStream().flush();
            outEntitys.add(entity);
        }
    }

    @Override
    public void exit() {
        this.runing = false;
        try {
            this.join();
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        }
    }

}
import com.alibaba.fastjson.util.IOUtils;
import lombok.extern.slf4j.Slf4j;
import org.bytedeco.ffmpeg.global.avcodec;
import org.bytedeco.javacv.FFmpegFrameGrabber;
import org.bytedeco.javacv.FFmpegFrameRecorder;
import org.bytedeco.javacv.Frame;

import javax.servlet.AsyncContext;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

/**
 * javacv转码<br/>
 * 流来源不是视频H264格式,音频AAC格式 转码为视频H264格式,音频AAC格式
 * 
 * @author gc.x
 */
@Slf4j
public class ConverterTranFactories extends Thread implements Converter {
    public volatile boolean runing = true;
    /**
     * 读流器
     */
    private FFmpegFrameGrabber grabber;
    /**
     * 转码器
     */
    private FFmpegFrameRecorder recorder;
    /**
     * 转FLV格式的头信息<br/>
     * 如果有第二个客户端播放首先要返回头信息
     */
    private byte[] headers;
    /**
     * 保存转换好的流
     */
    private ByteArrayOutputStream stream;
    /**
     * 流地址,h264,aac
     */
    private String url;
    /**
     * 流输出
     */
    private List<AsyncContext> outEntitys;

    /**
     * key用于表示这个转换器
     */
    private String key;

    /**
     * 转换队列
     */
    private Map<String, Converter> factories;

    public ConverterTranFactories(String url, String key, Map<String, Converter> factories,
            List<AsyncContext> outEntitys, FFmpegFrameGrabber grabber) {
        this.url = url;
        this.key = key;
        this.factories = factories;
        this.outEntitys = outEntitys;
        this.grabber = grabber;
    }

    @Override
    public void run() {
        try {
            log.info("this url:{} converterTranFactories start", url);
            grabber.setFrameRate(25);
            if (grabber.getImageWidth() > 1920) {
                grabber.setImageWidth(1920);
            }
            if (grabber.getImageHeight() > 1080) {
                grabber.setImageHeight(1080);
            }
            stream = new ByteArrayOutputStream();
            recorder = new FFmpegFrameRecorder(stream, grabber.getImageWidth(), grabber.getImageHeight(),
                    grabber.getAudioChannels());
            recorder.setInterleaved(true);
            recorder.setVideoOption("preset", "ultrafast");
            recorder.setVideoOption("tune", "zerolatency");
            recorder.setVideoOption("crf", "25");
            recorder.setGopSize(50);
            recorder.setFrameRate(25);
            recorder.setSampleRate(grabber.getSampleRate());
            if (grabber.getAudioChannels() > 0) {
                recorder.setAudioChannels(grabber.getAudioChannels());
                recorder.setAudioBitrate(grabber.getAudioBitrate());
                recorder.setAudioCodec(avcodec.AV_CODEC_ID_AAC);
            }
            recorder.setFormat("flv");
            recorder.setVideoBitrate(grabber.getVideoBitrate());
            recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264);
            recorder.start();
            if (headers == null) {
                headers = stream.toByteArray();
                stream.reset();
                writeResponse(headers);
            }
            int nullNumber = 0;
            while (runing) {
                // 抓取一帧
                Frame f = grabber.grab();
                if (f != null) {
                    try {
                        // 转码
                        recorder.record(f);
                    } catch (Exception e) {
                    }
                    if (stream.size() > 0) {
                        byte[] b = stream.toByteArray();
                        stream.reset();
                        writeResponse(b);
                        if (outEntitys.isEmpty()) {
                            log.info("没有输出退出");
                            break;
                        }
                    }
                } else {
                    nullNumber++;
                    if (nullNumber > 200) {
                        break;
                    }
                }
                Thread.sleep(5);
            }
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        } finally {
            closeConverter();
            completeResponse();
            log.info("this url:{} converterTranFactories exit", url);
            factories.remove(this.key);
        }
    }

    /**
     * 输出FLV视频流
     * 
     * @param b
     */
    public void writeResponse(byte[] b) {
        Iterator<AsyncContext> it = outEntitys.iterator();
        while (it.hasNext()) {
            AsyncContext o = it.next();
            try {
                o.getResponse().getOutputStream().write(b);
            } catch (Exception e) {
                log.info("移除一个输出");
                it.remove();
            }
        }
    }

    /**
     * 退出转换
     */
    public void closeConverter() {
        IOUtils.close(grabber);
        IOUtils.close(recorder);
        IOUtils.close(stream);
    }

    /**
     * 关闭异步响应
     */
    public void completeResponse() {
        Iterator<AsyncContext> it = outEntitys.iterator();
        while (it.hasNext()) {
            AsyncContext o = it.next();
            o.complete();
        }
    }

    @Override
    public String getKey() {
        return this.key;
    }

    @Override
    public String getUrl() {
        return this.url;
    }

    @Override
    public void addOutputStreamEntity(String key, AsyncContext entity) throws IOException {
        if (headers == null) {
            outEntitys.add(entity);
        } else {
            entity.getResponse().getOutputStream().write(headers);
            entity.getResponse().getOutputStream().flush();
            outEntitys.add(entity);
        }
    }

    @Override
    public void exit() {
        this.runing = false;
        try {
            this.join();
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        }
    }

}

result层:

import com.alibaba.fastjson.JSONObject;

import java.io.Serializable;
import java.util.HashMap;

/**
 * 封装返回结果
 * 
 */
public class JsonResult extends HashMap<String, Object> implements Serializable {

    private static final long serialVersionUID = 1L;
    public static final int SUCCESS = 200;

    public JsonResult() {
    }

    /**
     * 返回成功
     */
    public static JsonResult ok() {
        return ok("操作成功");
    }

    /**
     * 返回成功
     */
    public static JsonResult okFallBack() {
        return okFallBack("操作成功");
    }

    /**
     * 返回成功
     */
    public JsonResult put(Object obj) {
        return this.put("data", obj);
    }

    /**
     * 返回成功
     */
    public static JsonResult ok(String message) {
        return result(200, message);
    }

    /**
     * 降级函数 - 返回成功
     */
    public static JsonResult okFallBack(String message) {
        return result(205, message);
    }

    /**
     * 返回成功
     */
    public static JsonResult result(int code, String message) {
        JsonResult jsonResult = new JsonResult();
        jsonResult.put("timestamp", System.currentTimeMillis());
        jsonResult.put("status", code);
        jsonResult.put("message", message);
        return jsonResult;
    }

    /**
     * 返回失败
     */
    public static JsonResult error() {
        return error("操作失败");
    }

    /**
     * 返回失败
     */
    public static JsonResult error(String message) {
        return error(500, message);
    }

    /**
     * 返回失败
     */
    public static JsonResult error(int code, String message) {
        JsonResult jsonResult = new JsonResult();
        jsonResult.put("timestamp", System.currentTimeMillis());
        jsonResult.put("status", code);
        jsonResult.put("message", message);
        return jsonResult;
    }

    /**
     * 设置code
     */
    public JsonResult setCode(int code) {
        super.put("status", code);
        return this;
    }

    /**
     * 设置message
     */
    public JsonResult setMessage(String message) {
        super.put("message", message);
        return this;
    }

    /**
     * 放入object
     */
    @Override
    public JsonResult put(String key, Object object) {
        super.put(key, object);
        return this;
    }

    /**
     * 权限禁止
     */
    public static JsonResult forbidden(String message) {
        JsonResult jsonResult = new JsonResult();
        jsonResult.put("timestamp", System.currentTimeMillis());
        jsonResult.put("status", 401);
        jsonResult.put("message", message);
        return jsonResult;
    }

    @Override
    public String toString() {
        return JSONObject.toJSONString(this);
    }

    public JSONObject toJSONObject() {
        return JSONObject.parseObject(toString());
    }

}

service层:

import com.alibaba.fastjson.JSONObject;

import java.io.Serializable;
import java.util.HashMap;

/**
 * 封装返回结果
 * 
 */
public class JsonResult extends HashMap<String, Object> implements Serializable {

    private static final long serialVersionUID = 1L;
    public static final int SUCCESS = 200;

    public JsonResult() {
    }

    /**
     * 返回成功
     */
    public static JsonResult ok() {
        return ok("操作成功");
    }

    /**
     * 返回成功
     */
    public static JsonResult okFallBack() {
        return okFallBack("操作成功");
    }

    /**
     * 返回成功
     */
    public JsonResult put(Object obj) {
        return this.put("data", obj);
    }

    /**
     * 返回成功
     */
    public static JsonResult ok(String message) {
        return result(200, message);
    }

    /**
     * 降级函数 - 返回成功
     */
    public static JsonResult okFallBack(String message) {
        return result(205, message);
    }

    /**
     * 返回成功
     */
    public static JsonResult result(int code, String message) {
        JsonResult jsonResult = new JsonResult();
        jsonResult.put("timestamp", System.currentTimeMillis());
        jsonResult.put("status", code);
        jsonResult.put("message", message);
        return jsonResult;
    }

    /**
     * 返回失败
     */
    public static JsonResult error() {
        return error("操作失败");
    }

    /**
     * 返回失败
     */
    public static JsonResult error(String message) {
        return error(500, message);
    }

    /**
     * 返回失败
     */
    public static JsonResult error(int code, String message) {
        JsonResult jsonResult = new JsonResult();
        jsonResult.put("timestamp", System.currentTimeMillis());
        jsonResult.put("status", code);
        jsonResult.put("message", message);
        return jsonResult;
    }

    /**
     * 设置code
     */
    public JsonResult setCode(int code) {
        super.put("status", code);
        return this;
    }

    /**
     * 设置message
     */
    public JsonResult setMessage(String message) {
        super.put("message", message);
        return this;
    }

    /**
     * 放入object
     */
    @Override
    public JsonResult put(String key, Object object) {
        super.put(key, object);
        return this;
    }

    /**
     * 权限禁止
     */
    public static JsonResult forbidden(String message) {
        JsonResult jsonResult = new JsonResult();
        jsonResult.put("timestamp", System.currentTimeMillis());
        jsonResult.put("status", 401);
        jsonResult.put("message", message);
        return jsonResult;
    }

    @Override
    public String toString() {
        return JSONObject.toJSONString(this);
    }

    public JSONObject toJSONObject() {
        return JSONObject.parseObject(toString());
    }

}
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public interface IFLVService {

    /**
     * 打开一个流地址
     * 
     * @param url
     * @param response
     */
    public void open(String url, HttpServletResponse response, HttpServletRequest request);

}

二.客户端代码基于flv.js进行播放

<!-- @format -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="flv.min.js"></script>
        <video id="videoElement"></video>
        <button onclick="playflv()">点击播放</button>
        <script>
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: 'http://127.0.0.1:10010/xr/flv',
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
            }
            //自动播放,浏览器不支持
            function playflv() {
                flvPlayer.play();
            }
        </script>
    </body>
</html>

这里因为浏览器把自动播放给禁止了,加了个按钮点击事件

https://www.bootcdn.cn/

引入的flv.js文件在如下网站下载即可:文章来源地址https://www.toymoban.com/news/detail-509158.html

java 实现监控rtsp流转flv,实现前端播放(前后端代码都有)

到了这里,关于java 实现监控rtsp流转flv,实现前端播放(前后端代码都有)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • LiveNVR监控流媒体Onvif/RTSP功能-支持无人机、IPC等设备RTMP推流转码分发H5无插件播放也支持GB28181输出

    目前不是所有的无人机都支持GB28181的国标注册,有的只能输出直播流,有的只能支持RTMP的推流。比如大疆无人机有的产品上不能直接注册国标平台,只能rtmp推流。那么,项目中如果将无人机的rtmp的推流转成GB/T28181 示例:rtmp://192.168.2.135:10935/live/stream_1 192.168.2.135 是部署Liv

    2024年02月16日
    浏览(49)
  • 前后端 java 对接海康威视监控-hls实现h5播放

    海康的获取监控预览流的接口当中支持 rtsp、rtmp、hls等协议。 这篇文章主要是说hls协议的。 贴上海康的开发平台地址,其中有对应的API:海康开发平台 这里除了main方法之外,有两个方法,分别是: 1)分页获取监控点资源。 即返回所有的监控点信息。 2)获取监控点预览取

    2024年02月08日
    浏览(52)
  • Java 实现Rtsp 转rtmp,hls,flv

    服务支撑:FFmpeg  + srs(流媒体服务器)   整个流程是 java 调用 FFmpeg 收流转码 并把流推 rtmp 到流媒体服务 ,流媒体服务再分发流到公网(如果使用得流媒体服务器支持转协议 可以分发 flv ,hls等) 搭建流媒体服务: 1.  SRS (Simple Realtime Server) | SRS ( 本例子使用的是SrS 安装使用

    2024年02月13日
    浏览(29)
  • vue3+nodejs(websocket)实现监控拉rtsp流,使用flv.js+ffmpeg包(主要建立websocket是为了转码传流)

    关于拉取监控摄像头的流,我个人去查了很多资料,也是因为之前没有接触过这一模块,加上目前公司也没有后端去写接口,所以我直接用node去写websocket,与前端建立起通信,能够进行后续转码、传流,能够实现实时播放监控画面。 这里的rtsp流是要事先知道的,监控的这个

    2024年02月20日
    浏览(49)
  • Monibucav4(开源流媒体服务器)在Windows上搭建rtmp服务器并实现拉取rtsp视频流以及转换flv播放

    开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放: 开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放_srs按需拉流_霸道流氓气质的博客-CSDN博客 上面讲了ZLMediaKit的使用流

    2024年02月11日
    浏览(66)
  • vue使用webrtcstreamer实现rtsp无转码播放实时监控

    因为video标签只能播放特定格式的视频,比如MP4、WebM和Ogg格式,而对于这种视频流文件则需要通过转码实现,而vue-video-player也只能播放特定格式的视频。所以要播放监控的实时视频,除了在浏览器的地址栏直接打开摄像头的地址,还可以通过webrtc-streamer和video标签在页面实现

    2024年02月06日
    浏览(85)
  • VUE+webrtc-streamer实现实时视频播放(监控设备-rtsp)

    首先说明目前我只完成了本地测试,因还没确定技术选型所以暂无项目应用,先做一下储备,后续项目应用的话这篇文章会持续更新。 监控设备播放效果如下:基于公司环境测试了大华和海康的监控设备(H264编码)可以正确播放 1、下载webrtc-streamer,本机测试我下载的最新

    2024年02月01日
    浏览(39)
  • VUE+webrtc-streamer 实现实时视频播放(监控设备-rtsp)

    下图则启动成功,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面 地址:https://github.com/mpromonet/webrtc-streamer/releases 注意:第三步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1端口可 文章参考链接:https://blog.csdn.net/liona_koukou/article/details/126605137

    2024年02月02日
    浏览(57)
  • Windows上搭建Nginx-http-flv实现rtsp视频流推流到rtmp流媒体服务器并转换和前端拉取http-flv视频流

    Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流_霸道流氓气质的博客-CSDN博客 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Vue中使用vue-vi

    2024年02月15日
    浏览(74)
  • 纯前端ELECTRON+VUE+FFMPEG实现多路播放RTSP流

    近期有项目需求前端播放rtsp视频流,项目是由electron+vue3搭建,没有后端,因此需要在前端实现解析rtsp流及播放,经过多方考察最后选用了ffmpeg+jsmpeg方案实现,具体实现是参考了@牧也の旅行 大佬的这篇文章 原文地址 实现的,感谢@牧也の旅行 一直在回复我的各种小白问题,

    2024年02月04日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包