Vue显示FFmpeg推的流

这篇具有很好参考价值的文章主要介绍了Vue显示FFmpeg推的流。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

零、环境安装

小弟的另一篇文章:

FFmpeg和rtsp服务器搭建视频直播流服务-CSDN博客

一、FFmpeg推流

1、拉取rtsp摄像头流

sudo ffmpeg -f v4l2 -input_format mjpeg -i /dev/video0 -c:v copy -f rtsp rtsp://10.168.3.196:8554/mystream

 2、推视频的rtmp流

sudo ffmpeg -re -stream_loop -1 -i movies/test.mp4 -c copy -f flv rtmp://localhost:8554/mystream

3、推hls的视频流

sudo ffmpeg -re -i /media/jetson/JETSONNANO1/movies/test.mp4 -c copy -f hls -bsf:v h264_mp4toannexb -hls_wrap 10 output.m3u8

 4、推hls视频流

# 拉取rtmp摄像头流
sudo ffmpeg -re -i /dev/video0 -c:v libx264 -c:a copy -f flv rtmp://10.168.3.196:1935/mystream
# 通过hls进行推rtmp流
sudo ffmpeg -i rtmp://10.168.3.196:1935/mystream -c:v copy -f hls -hls_time 10  output.m3u8

二、Vue显示rtmp或hls流

1、代码:https://github.com/caip1299920300/Vue-video-hls

 2、修改的地方:

Vue显示FFmpeg推的流,FFMPEG,ffmpeg

3、配置ngnix,用于解决vue的跨域问题

参考:Ubuntu系统下Nginx安装_ubuntu安装nginx-CSDN博客

(1)配置nginx

sudo vi /etc/nginx/sites-enabled/default

(2)修改内容如下:


server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # 文件访问
        location /files/ {
            proxy_pass http://localhost:8011/;
            add_header 'Access-Control-Allow-Origin' '*';
        }

        # vue页面
        location /{
                # root /var/www/html;
                root /data/app/dist;
                try_files $uri $uri/ /index.html;
                index index.html index.htm;
         }

}

# 文件访问
server{
    listen 8011;
    root /datas;

    location ~* \/()$ {
         deny all;
   }
}
                                                                                                                                                                           

 三、结果展示

Vue显示FFmpeg推的流,FFMPEG,ffmpeg文章来源地址https://www.toymoban.com/news/detail-726246.html

到了这里,关于Vue显示FFmpeg推的流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Qt中ffmpeg API存储和显示摄像头视频

    Qt中ffmpeg API存储和显示摄像头视频的功能需要之前写的视频ffmpegAPI的视频播放的流程。 代码源码位置:https://download.csdn.net/download/qq_43812868/88157743?spm=1001.2014.3001.5503 这是读取打开视频文件的流程,视频文件在avformat_open_input参数中,最终将数据传递到av_frame_alloc创建的AVFrame。

    2024年02月14日
    浏览(34)
  • 第2课 使用FFmpeg读取rtmp流并用openCV显示视频

     本课对应源文件下载链接: https://download.csdn.net/download/XiBuQiuChong/88680079 这节课我们开始利用ffmpeg和opencv来实现一个rtmp播放器。播放器的最基本功能其实就两个:显示画面和播放声音。在实现这两个功能前,我们需要先用ffmpeg连接到rtmp服务器,当然也可以打开一个文件。 1.压

    2024年02月04日
    浏览(40)
  • Vue 2.0 前端使用 ffmpeg 压缩视频

    1. (我之前因为直接装了导致报错)  要安装这个版本 npm install @ffmpeg/ffmpeg@0.10.1 -S npm install @ffmpeg/core@0.10.0 -S 2.找到vue.config.js devServer: {      headers: {       \\\"Cross-Origin-Opener-Policy\\\": \\\"same-origin\\\",       \\\"Cross-Origin-Embedder-Policy\\\": \\\"require-corp\\\",     }, } 加上红色这段代码 3

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

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

    2024年02月04日
    浏览(36)
  • Qt/C++视频监控安卓版/多通道显示视频画面/录像存储/视频播放安卓版/ffmpeg安卓

    随着监控行业的发展,越来越多的用户场景是需要在手机上查看监控,而之前主要的监控系统都是在PC端,毕竟PC端屏幕大,能够看到的画面多,解码性能也强劲。早期的手机估计性能弱鸡,而现在的手机性能不是一般的牛,甚至超越了PC机的性能,所以手机上查看多路监控也

    2024年02月03日
    浏览(47)
  • Vue使用ffmpeg,报ReferenceError: SharedArrayBuffer is not defined 如何解决

    “SharedArrayBuffer is not defined” 错误是因为在浏览器环境中,SharedArrayBuffer 对象被认为是一种潜在的安全风险。为了防止 Spectre 攻击等漏洞,现代浏览器通常会禁用或限制对 SharedArrayBuffer 的使用。 SharedArrayBuffer 是一种 JavaScript 对象,用于在多线程环境中共享内存。然而,由于

    2024年02月11日
    浏览(56)
  • vue 使用ffmpeg上传视频前压缩视频,压缩后在上传到服务器

    1,使用ffmpeg: npm install @ffmpeg/ffmpeg @ffmpeg/core -S ; 2,vue 引入ffmpeg 3,需要配置vue.config.js,否则会报错 完整代码:

    2024年02月11日
    浏览(43)
  • SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)

    其实原理就是: 将监控通过FFMPEG,推送给Nginx,前端通过Nginx地址拉取视频,就可以播放了。 1:安装FFMPEG. 2:下载并且配置nginx. 3:使用java代码实现调用cmd或者linux窗口,并且运行操作FFMPEG的命令,进行监控视频rtsp格式的推送,推送给nginx. 4:前端写一个video标签就可以,Src写nginx的固定地

    2023年04月16日
    浏览(84)
  • [FFmpeg] 常用ffmpeg命令

    去水印  ffmpeg -i water.jpeg -strict -2 -vf delogo=x=300:y=250:w=56:h=18:show=0 no_water.jpeg 打时间戳 ffmpeg -i perf_60Hz_Raw.mp4 -vf \\\"drawtext=fontsize=160:fontcolor=red:text=\\\'%{pts:hms}\\\'\\\" -c:v libx264 -an -f mp4 perf_output.mp4 -y ffmpeg -i perf_8k.mp4 -vf \\\"drawtext=fontsize=160:fontcolor=red:text=\\\'%{pts:hms}\\\'\\\" -c:v libx264 -an -f mp4 perf_outpu

    2024年02月10日
    浏览(36)
  • 【ffmpeg基础】ffmpeg视频编码

    通过-s来指定输入yuv的分辨率(需要先指定分辨率); 通过-pix_fmt来指定输入yuv的像素格式; 通过-i来指定输入yuv的路径和名称; 通过-r 来指定要编码的帧率; 通过-vcodec来指定视频编码的编码器为libx264 通过-an参数来去掉输入input.mp4中的音频,并通过-vcodec libx264将输入的视频进

    2024年02月14日
    浏览(35)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包