零、环境安装
小弟的另一篇文章:
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)修改内容如下:文章来源:https://www.toymoban.com/news/detail-726246.html
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;
}
}
三、结果展示
文章来源地址https://www.toymoban.com/news/detail-726246.html
到了这里,关于Vue显示FFmpeg推的流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!