直播架构

业务服务器：负责协调直播类应用的业务逻辑
创建直播房间
返回直播房间播放地址列表
关闭直播房间
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添加时间戳代码：

 　　　private static String urlTimestamp(String url,String key){

         String t = Long.toHexString(new Long(new Date().getTime() + 60));

         //String key = "yuanda";

         int index = url.indexOf("/",url.indexOf("//")+3);

         String s = key+url.substring(index)+t;

         System.out.println("s:"+s);

         String sign="";

         try {

             MessageDigest md5 = MessageDigest.getInstance("md5");

             md5.update(s.getBytes());

             byte[] tmp = md5.digest();

             StringBuilder sb = new StringBuilder();

             for (byte b : tmp) {

                 if (b > 0 && b < 16)

                     sb.append("0");

                 sb.append(Integer.toHexString(b & 0xff));

             }

             sign=sb.toString().toLowerCase();

         } catch (NoSuchAlgorithmException e) {

             e.printStackTrace();

         }

         //System.out.println("sign:"+sign);

         String resultUrl = url + "?sign=" + sign + "&t=" + t ;

         return resultUrl;

     }

播放端

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

 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head><title>Qiniu Web Player in HTML5</title>

 </head>

 <body>

 HLSUrl:  ${HLSUrl } <br/>

 RTMPUrl:  ${RTMPUrl } <br/>

 FLVUrl:  ${FLVUrl } <br/>

 <hr/>

  HLS格式播放：

 <link href="http://sdk-release.qnsdk.com/qiniuplayer-0.3.9.min.css" rel="stylesheet">

 <script src="http://sdk-release.qnsdk.com/qiniuplayer-0.3.9.min.js"></script>

 <video id="demo-video" class="video-js vjs-big-play-centered"></video>

 <p>播放器状态：  0: 视频尚未开始加载，当前没有可用媒体信息；

     1: 视频元数据已经可用；

     2: 视频可以播放；

     3: 视频可以播放，并且可以被快进；

     4: 视频可以无终止的播放。</p>

 <p id="ddd"></p>

 <script>

     var options = {

         controls: true,

         url: '${HLSUrl }',

         type: 'MP4', //视频播放类型hls或MP4

         preload: true,

         autoplay: false, // 如为 true，则视频将会自动播放

         poster: '', //视频封面

     };

     var player = new QiniuPlayer('demo-video', options);

     //实时显示播放状态

     setInterval(function () {

         var d=document.getElementById("ddd").innerHTML=player.state();

     },2000);

 </script>

 </body>

 </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格式直播的更多相关文章

  1. video.js支持m3u8格式直播

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...

  2. UEditor+七牛，实现图片直连上传

    最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等 ...

  3. WordPress网站加速优化，一键免费使用七牛CDN插件

    利用wordpress搭建网站是个人建站的主流方案,我曾分享过wordpress网站加速优化必做的十件事,帮助了不少个人站长.今天介绍帮助wordpress网站提升速度至少10倍的免费CDN加速插件: ...

  4. 「视频直播技术详解」系列之七：直播云 SDK 性能测试模型

    ​关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...

  5. (转)云存储：阿里云OSS 、又拍云和 七牛 的比较

    阿里OSS:好处就是,那是一套完整的体系,存储,数据库,CDN,服务器,阿里都可以给你全包.缺点,费用对于没有盈利的网站来说太高了,好像定位就是给那些高端客户使用的,而且CDN,OSS的流量是分开收费 ...

  6. 从QQ音乐开发，探讨如何利用腾讯云SDK在直播中加入视频动画

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...

  7. 自建存储与使用微软Azure、七牛等第三方云存储综合考察分析

    http://www.cnblogs.com/sennly/p/4136734.html 各种云服务这两年炒的火热,加之可以降低成本,公司想先在部分业务上尝试使用下,刚好最近有个项目有大量小文件需要存 ...

  8. 七牛对用户使用webp图片格式的使用建议

    Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...

  9. 阿里云 ECS 迁移到七牛 QVM 记

    操作 下载脚本 curl -O http://p70nwjoid.bkt.clouddn.com/go2qvm_client1.5_linux_x86_64.zip 解压填写配置 unzip go2q ...

随机推荐

  1. HDU 5305 Friends（dfs）

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...

  2. libcurl库进行http通讯-一些主要的函数

    这里就简介一下libcurl的一些主要的函数. 调用curl_global_init()初始化libcurl 调用curl_easy_init()函数得到 easy interface型指针 调用cu ...

  3. CoffeeScript里的字符串插值

    拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...

  4. 一次次迭代 百度语音生成 api 字幕 语音的同步性 关键

    发音字符 数一样 D:\myv\semHAND9myuid1523961381.avi 0.7053863117786668 --------------- 深圳市雅超服饰有限公司是一家专业设计制作高 ...

  5. jeesite自定义主题

    jeesite cms首页太丑不够逼格,然而国内有很多高大上的皮肤供你选择,那么本文就一步一步教你如何定制自己的CMS站点视图. 1.下载 jeesite 源码,并安装配置成功 2.进入jeesite ...

  6. myeclipse配背景色

    1:使jsp,html等页面为纯黑色. 2:发现JS的背景颜色还是默认的.而且还是块状的.将它设置背景为黑色的. *效果图: 参考:http://blog.csdn.net/ltqwby/articl ...

  7. A. Power Consumption Calculation

    http://codeforces.com/problemset/problem/10/A 题很简单,就是题意难懂啊... #include <stdio.h> #include < ...

  8. B. Mashmokh and ACM(dp)

    http://codeforces.com/problemset/problem/414/B B. Mashmokh and ACM time limit per test 1 second memo ...

  9. [Swift通天遁地]二、表格表单-(13)实时调整表单元素的显示和隐藏

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  10. [Swift通天遁地]九、拔剑吧-(5)创建Tab图标具有多种样式的Tab动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...