七牛直播云-m3u8格式直播

直播架构

业务服务器：负责协调直播类应用的业务逻辑
创建直播房间
返回直播房间播放地址列表
关闭直播房间
LiveNet 实时流网络：负责流媒体的分发、直播流的创建、查询等相关操作
采集端：负责采集和推送流媒体
播放端：负责拉取并播放流媒体

直播云API：https://developer.qiniu.com/pili

服务端

SDK：https://developer.qiniu.com/pili/sdk/1220/server-sdk

关键代码：

        // 配置企业开发者密钥,密钥使用七牛账号登录https://portal.qiniu.com/user/key 获取
        String accessKey = "xxx";
        String secretKey = "xxx";

        // 直播空间名称
        // 直播空间必须事先存在，可以在 portal.qiniu.com 上创建
        String hubName = "xxx";

        Config.APIHost = "pili.qiniuapi.com";

        //初始化client
        Client cli = new Client(accessKey,secretKey);

        //初始化Hub
        Hub hub = cli.newHub(hubName);

//列出所有流
try{
    Hub.ListRet listRet = hub.list("liu", 0, "");
    System.out.printf("hub=%s 列出流: keys=%s marker=%s\n", hubName,printArrary(listRet.keys) , listRet.omarker);
}catch (PiliException e){
    e.printStackTrace();
    return;
}

//列出正在直播的流
try{
    Hub.ListRet listRet = hub.listLive("liu", 0, "");
    System.out.printf("hub=%s 列出正在直播的流: keys=%s marker=%s\n", hubName, printArrary(listRet.keys), listRet.omarker);


}catch (PiliException e){
    e.printStackTrace();
    return;
}

// RTMP推流地址
String url = cli.RTMPPublishURL("pili-publish.www.gs369.cn", hubName, keyA, 3600);
System.out.printf("keyA=%s RTMP推流地址=%s\n", keyA, url);

//RTMP直播地址
String RTMPUrl = cli.RTMPPlayURL("pili-live-rtmp.www.gs369.cn", hubName, keyA);
System.out.printf("keyA=%s RTMP直播地址=%s\n", keyA, RTMPUrl);
request.setAttribute("RTMPUrl",urlTimestamp(RTMPUrl));

//HLS直播地址
String HLSUrl = cli.HLSPlayURL("pili-live-hls.www.gs369.cn", hubName, keyA);
System.out.printf("keyA=%s HLS直播地址=%s\n", keyA, HLSUrl);
request.setAttribute("HLSUrl",urlTimestamp(HLSUrl));

//HDL直播地址
String FLVUrl = cli.HDLPlayURL("pili-live-hdl.www.gs369.cn", hubName, keyA);
System.out.printf("keyA=%s HDL直播地址=%s\n", keyA, FLVUrl);
request.setAttribute("FLVUrl",urlTimestamp(FLVUrl));

// 截图直播地址
url = cli.SnapshotPlayURL("pili-live-snapshot.www.gs369.cn", hubName, keyA);
System.out.printf("keyA=%s 截图直播地址=%s\n", keyA, url);

将URL添加时间戳代码：

 1 　　　private static String urlTimestamp(String url,String key){
 2         String t = Long.toHexString(new Long(new Date().getTime() + 60));
 3         //String key = "yuanda";
 4         int index = url.indexOf("/",url.indexOf("//")+3);
 5         String s = key+url.substring(index)+t;
 6         System.out.println("s:"+s);
 7         String sign="";
 8         try {
 9             MessageDigest md5 = MessageDigest.getInstance("md5");
10             md5.update(s.getBytes());
11             byte[] tmp = md5.digest();
12             StringBuilder sb = new StringBuilder();
13             for (byte b : tmp) {
14                 if (b > 0 && b < 16)
15                     sb.append("0");
16                 sb.append(Integer.toHexString(b & 0xff));
17             }
18             sign=sb.toString().toLowerCase();
19         } catch (NoSuchAlgorithmException e) {
20             e.printStackTrace();
21         }
22         //System.out.println("sign:"+sign);
23         String resultUrl = url + "?sign=" + sign + "&t=" + t ;
24         return resultUrl;
25     }

播放端

web播放端，m3u8格式，此处JSP

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
 2 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head><title>Qiniu Web Player in HTML5</title>
 6 
 7 </head>
 8 <body>
 9 
10 HLSUrl:  ${HLSUrl } <br/>
11 RTMPUrl:  ${RTMPUrl } <br/>
12 FLVUrl:  ${FLVUrl } <br/>
13 <hr/>
14  HLS格式播放：
15 <link href="http://sdk-release.qnsdk.com/qiniuplayer-0.3.9.min.css" rel="stylesheet">
16 <script src="http://sdk-release.qnsdk.com/qiniuplayer-0.3.9.min.js"></script>
17 <video id="demo-video" class="video-js vjs-big-play-centered"></video>
18 <p>播放器状态：  0: 视频尚未开始加载，当前没有可用媒体信息；
19     1: 视频元数据已经可用；
20     2: 视频可以播放；
21     3: 视频可以播放，并且可以被快进；
22     4: 视频可以无终止的播放。</p>
23 <p id="ddd"></p>
24 
25 <script>
26     var options = {
27         controls: true,
28         url: '${HLSUrl }',
29         type: 'MP4', //视频播放类型hls或MP4
30         preload: true,
31         autoplay: false, // 如为 true，则视频将会自动播放
32         poster: '', //视频封面
33     };
34     var player = new QiniuPlayer('demo-video', options);
35     //实时显示播放状态
36     setInterval(function () {
37         var d=document.getElementById("ddd").innerHTML=player.state();
38     },2000);
39 </script>
40 </body>
41 </html>

-------------------或者videojs播放器：

源码：https://github.com/saysmy/videojs-hls

<video style="height:300px;width:400px" id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
    <source src="${HLSUrl }"  type="application/x-mpegURL">
</video>
<button id="btn">play</button>

<script src="./videojs/video.js?v=fc5104a2ab23"></script>
<script src="./videojs/videojs-contrib-hls.js?v=c726b94b9923"></script>

<script type="text/javascript">
    var myPlayer = videojs('roomVideo',{
        bigPlayButton : false,
        textTrackDisplay : false,
        posterImage: true,
        errorDisplay : false,
        controlBar : false
    },function(){
        console.log(this)
        this.on('loadedmetadata',function(){
            console.log('loadedmetadata');
            //加载到元数据后开始播放视频
            //startVideo();
        })

        this.on('ended',function(){
            console.log('ended')
        })
    });

    document.getElementById('btn').addEventListener('click', function(){
        myPlayer.play();
    })


    var isVideoBreak;
    function startVideo() {

        myPlayer.play();

        //微信内全屏支持
        document.getElementById('roomVideo').style.width = window.screen.width + "px";
        document.getElementById('roomVideo').style.height = window.screen.height + "px";


        //判断开始播放视频，移除高斯模糊等待层
        var isVideoPlaying = setInterval(function(){
            var currentTime = myPlayer.currentTime();
            if(currentTime > 0){
                $('.vjs-poster').remove();
                clearInterval(isVideoPlaying);
            }
        },200)

        //判断视频是否卡住，卡主3s重新load视频
        var lastTime = -1,
            tryTimes = 0;

        clearInterval(isVideoBreak);
        isVideoBreak = setInterval(function(){
            var currentTime = myPlayer.currentTime();
            console.log('currentTime'+currentTime+'lastTime'+lastTime);

            if(currentTime == lastTime){
                //此时视频已卡主3s
                //设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
                myPlayer.currentTime(currentTime+10000);
                myPlayer.play();

                //尝试5次播放后，如仍未播放成功提示刷新
                if(++tryTimes > 5){
                    alert('您的网速有点慢，刷新下试试');
                    tryTimes = 0;
                }
            }else{
                lastTime = currentTime;
                tryTimes = 0;
            }
        },3000)
    }
</script>

七牛直播云-m3u8格式直播

直播架构

服务端

播放端

猜你喜欢