window系统下web拉流直播的实现

原创 hugeannex 教程 唠叨 140阅读 10 天前 举报

  前言:前段时候公司要搞个简单的直播,种种原因,付费选了一家第三方直播公司,结果bug不断,各种功能的无法实现。
  比如:拉流直播,想只播一次,而他们的是死循环,根本停不下来,只能手动停止。。匪夷所思啊。。。
  开始直播,得手动去点,不能在后台设定时间,结束也得手动点,而且还不能好好地转为“往期”的状态。。。都是亲历亲为,感觉好累。。。
   其他的就不多说了,说多了都是泪。。。

  今天放晴。。。抽了点小闲。研究了一下直播流。自己给实现了。只是公司的服务器配置不足以供给视频流,所以先封存以备以后用。
  go!
  步骤:
  1. 下载ffmpeg
  这玩儿的作用就是把mp4给切片,此文用mp4举例,其它格式的命令也没去研究,主要原因是,公司的都是mp4视频,个人觉得,就算偶尔遇上非mp4格式,用其它软件先转mp4,再进行也并非难事,所以就只研究mp4的。
  可从ffmpeg的官网下,网上可查到。不过本人是从该网站下的:
  https://ffmpeg.zeranoe.com/
 

  由于本人的是64位的机器,故选了第一个64位的。
  下载后,就是几个文件夹,放到自己想放的盘下。比如我放到了D://ffmpeg下。
 然后配置环境变量,有这方面经验的同学很容易就能配好,没相关经验的自行百度。就不截图细说了。
  环境变量path变量加上;d://ffmpeg/bin
  在cmd命令行中输入ffmpeg,看到下图,表示安装ffmpeg成功!


  
2.mp4视频文件切片
  我的思路是,在本地切好,再把文件上传到服务器相应的目录下。。。
  其实就一条ffmpeg命令,ffmpeg命令参数好多,我也不怎么了解,目前就是拿来用的阶段
  命令格式:
ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 6 -hls_time 5 20180410/output.m3u8
  其中input.mp4为视频原文件,20180410文件夹,就当做是第20180410期,output.m3u8为输出的文件名,我固定文件为output.m3u8,以方便后台语言处理。其它参数自己去查ffmpeg吧
  然后,我每次操作时,只用改input.mp4和20180410为对应该的值就可以了。
结果:


其中.ts为切片后的视频文件。把这些文件传到服务器就可以了。

  3.服务器端配置
  算不上配置,应该算是思路,以最什么的php举例。
  考虑几个方面:
  (1)直播开始前(这个没什么可多想的,开始想显示啥就显示嘛,比如海报啊)
 (2)直播开始时,播了一段时间才打开网页。不想直接暴露原播放文件,以免会代码的同学重看一遍(这个其实也可以不处理的,爱看就看呗,主要是俺就想多折腾一下)
(3)直播过后,再打开页面的。我想到的是给个海报图,再给一段固定的有意义的片头。呵呵
  基本就这么多,socket方面暂不考虑在内。
接口文件示意:

 m3u8.php视频路径防暴露文件
 ```php
 <?php

require_once 'Live.class.php';
define('OUTPUT_NAME','/output.m3u8');

$issue=$_GET['issue'];

$file=$output.OUTPUT_NAME;

//严谨一点的话,这地方应该也查数据库相应记录,判断直播是否“未开始”,“开始”,“结束”状态,然后相应处理三种状态所需的视频。在此不多写。

//default/output.m3u8防$file没有时(非法请求时),播个片头。
new Live($file,'default/output.m3u8');
?>

  目录结构示意图

  4.前端的实现
  激动人心的时刻到了,终于到我们大前端了。。。
利于vediojs播放器,省得写兼容。

  引入这三个文件,videojs-contrib-hls看名字就能猜到了,没它播m3u8会出错。。。

播放器设计(其实用js生成,逻辑会更好一点,为了直观,直接上html的),几个playsinline就是为了对付微信这货点播放全屏的。此外,移动端不能自动播放,最后加上提示。
  js文件思路设计,不写严谨代码了,累人。。。

最后,直播应该是差不多同步的,虽然有网络延时,但俺们前端也应该处理得“差不多”一样,这就要处理中途缓冲,因为缓冲完了,时间就和后台时间不一致了。
基本思路就这样,接口请求回来后,记下当时时间戳,用开始播放的时间减去请求回来时的时间,那就是已经播放过的时间。
假如为请求回来时,startTime=Date.now();
player.on("play",function(){
var diff=Date.now()-startTime; //时间差,注意这是毫秒,php的是秒
diff/=1000; //转为秒

    this.currentTime(record.currentTime+diff); 

});

over。。。。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复