实现思路
1、Ffmpeg实现视频转码推流
2、nginx流媒体搭建，实现转码播放
3、前端video.js拉流播放测试
具体实操:
1.下载nginx
地址: https://github.com/arut/nginx-rtmp-module
下载带rtmp模块的nginx
2.配置nginx.conf
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } rtmp { server { listen 1935; application live { live on; } application hls { live on;#开启实时 hls on; #开启hls #hls_path temp/hls; hls_path D:/zjiac_code/uploadPath/video; #切片存放位置 hls_fragment 5s; #每个TS文件包含5秒的视频内容 } } } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 8072; root html; index index.html; location / { try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; } #新增能访问到hls流协议配置 location /hls { types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } alias D:/zjiac_code/uploadPath/video; expires -1; add_header Access-Control-Allow-Origin *; } } server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
3.准备一个rtsp流
我的是 rtsp://XX:15@192.168.2.3/Streaming/Channels/101?transportmode=unicast&profile=Profile_1
可以使用vlc播放器测试下是否通。
4. ffmpeg手动推流
ffmpeg -f rtsp -rtsp_transport tcp -i "rtsp://XX:XXX@192.168.2.3/Streaming/Channels/101?transportmode=unicast&profile=Profile_1" -codec copy -f hls -hls_list_size 10 -hls_wrap 20 -hls_time 15 "D:/zjiac_code/uploadPath/video/test.m3u8"
可以看到已经有test.m3u8和ts文件了。
nginx访问测试
使用video.js播放测试
新建个html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式视频</title> <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet"> <script src='https://vjs.zencdn.net/7.4.1/video.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script> <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 --> </head> <body> <style> .video-js .vjs-tech {position: relative !important;} </style> <div> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'> <source id="source" src="http://localhost:8072/hls/test.m3u8" type="application/x-mpegURL"></source> </video> </div> <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div> </body> <script> // videojs 简单使用 var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, }) myVideo.play() var changeVideo = function (vdoSrc) { if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式 myVideo.src({ src: vdoSrc, type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值 }) } else { myVideo.src(vdoSrc) } myVideo.load(); myVideo.play(); } var src = 'http://localhost:8072/hls/test.m3u8'; document.querySelector('.qiehuan').addEventListener('click', function () { changeVideo(src); }) </script>
查看效果
已经显示播放成功了。
至此，摄像头网页播放的demo完成了，可以集成到vue或者react项目进行使用了。
大功告成!!!
