零、环境安装

小弟的另一篇文章：

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

 三、结果展示