流媒体技术探索(一)
一、远景目标
我老家的婆婆不会用手机,她当了一辈子的农民,不会说也听不懂普通话。从我爸爸那一代起,我们就成了工人,虽然政府吝于承认我们这些打工人是工人,但自从工作以来,我每次与婆婆通电话,都觉得她不了解我们,不依靠任何人的骄傲自耕农与一无所有的工人的思想在向两个方向远离。因此,我希望能够让她看看自己那一亩三分地的外面,看看他的子辈,孙辈,生活与他有什么差别。
刚好我学了软件,不知道会不会用到硬件,但无论如何,让她能通过一种易操作的设备看到我们的生活,有可能做到。因此,我决定尝试流媒体技术,希望能实现视频的目标。
二、软件
1.视频点播
我在一边看许多人写的博客,一边尝试着实现。终于,这个周末实现了视频点播。
采用的技术方案是ffmpeg产生hls流,用nginx推流,用videojs拉流。
第一步,下载ffmpeg和配置环境变量便于操作。
ffmpege下载地址如下:链接: https://pan.baidu.com/s/1A9zLtYoqOsCyxq7PW4Oo7Q
提取码:q88a
nginx下载下载地址如下:链接:https://pan.baidu.com/s/1tiEv2_X74B9pxuKfg3ZUxw
提取码:p8n0
设置环境变量,->此电脑->属性->高级系统设置->环境变量
添加此变量,指向ffmpeg.exe的路径
将定义的添加到Path中
这样就可以在任何路径用命令行运行ffmpeg了。nginx同理,但我在配置好nginx后启动,关闭总是有问题,还是只能在nginx所在文件夹下运行nignx,现在还没解决。
第二步,得到hls流
将要编码的视频放到存储结果的文件夹,使用ffmpeg将h264编码的mp4视频转hls流,我是在桌面上新建的文件夹里面进行的。
这一步要保证mp4视频的编码正确,如果失败,可以用格式工厂转码一次,如图
编码命令如下:ffmpeg -y -i 待编码视频文件.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 输出视频文件.ts
ffmpeg -y -i input.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb output.ts
结果如下:
再使用命令将ts文件按几秒一段进行分片
分片命令如下:ffmpeg -i 要分片的文件.ts -c copy -map 0 -f segment -segment_list 分片后的索引文件.m3u8 片段名%03d.ts
ffmpeg -i output.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 output%03d.ts
结果如下:
从0到58.ts,与playlist.m3u8就是我们需要的hls流
第三步,在nginx上创建一个服务器,让客户端可以通过服务器得到视频流
打开nignx的conf->nginx.conf配置文件,在http下面添加一个服务器
#http服务器 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 8099; #项目ip地址 server_name localhost; location / { #项目根目录 root C:/Users/张国/Desktop; #项目首页,随便 index javascript输出.html; charset utf-8; } } 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; # } #} }
第四步,创建客户端
现在在服务器目录下,(我是桌面)创建一个html,在其中引入videojs
链接如下:链接:https://pan.baidu.com/s/1zc3fT4Y_hUGJWUfvkSDLBg
提取码:z3y6
DOCTYPE html>
<html>
<head>
<title>播放器title>
<link href="http://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/7.0/video.min.js">script>
head>
<body>
<video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
<source src="http://localhost:8099/videoPush/playlist.m3u8">
video>
<script>
var player = videojs('myvideo', {}, function(){
console.log('videojs播放器初始化成功');
if(player.canPlayType('application/vnd.apple.mpegurl') === "probably" || player.canPlayType('application/vnd.apple.mpegurl') === "maybe"){
console.log("yes");
}
else{
console.log("no");
}
player.play();
});
script>
body>
html>
第六步,运行!
在nginx所在目录下使用打开powershell,运行命令
start nginx
启动服务器
然后打开浏览器,输入我们那个HTML的url
点击播放
视频点播基本功能完成