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、修改的地方:

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;
   }
}

三、结果展示

相关推荐
西瓜er9 小时前
JAVA:Spring Boot 集成 FFmpeg 实现多媒体处理
java·spring boot·ffmpeg
QMCY_jason19 小时前
ubuntu 24.04 FFmpeg编译 带Nvidia 加速记录
linux·ubuntu·ffmpeg
eqwaak01 天前
动态图表导出与视频生成:精通Matplotlib Animation与FFmpeg
开发语言·python·ffmpeg·音视频·matplotlib
执尺量北斗1 天前
LinkMate 智能会议室系统:基于 Qt / QML / WebRTC / FFmpeg / Whisper / OpenGL 的实时音视频会议平台
qt·ffmpeg·webrtc
月起星九2 天前
为什么ffmpeg进行视频合成有时长误差
ffmpeg·音视频
长沙红胖子Qt3 天前
FFmpeg开发笔记(十二):ffmpeg音频处理、采集麦克风音频录音为WAV
ffmpeg·pcm·wav·录音·麦克风
aqi004 天前
FFmpeg开发笔记(八十一)FFmpeg代码对RTSP和RTMP的推流区别
ffmpeg·音视频·直播·流媒体
奔跑吧邓邓子5 天前
【C++实战(71)】解锁C++音视频开发:FFmpeg从入门到实战
c++·ffmpeg·实战·音视频
骄傲的心别枯萎5 天前
项目1:FFMPEG推流器讲解(一):FFMPEG重要结构体讲解
linux·ffmpeg·音视频·视频编解码·rv1126
骄傲的心别枯萎6 天前
项目1:FFMPEG推流器讲解(二):FFMPEG输出模块初始化
linux·ffmpeg·音视频·视频编解码·rv1126