七牛直播云-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添加时间戳代码：

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

video.js支持m3u8格式直播
为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...
UEditor+七牛，实现图片直连上传
最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案目前来说,Web端基于七牛等 ...
WordPress网站加速优化，一键免费使用七牛CDN插件
利用wordpress搭建网站是个人建站的主流方案,我曾分享过wordpress网站加速优化必做的十件事,帮助了不少个人站长.今天介绍帮助wordpress网站提升速度至少10倍的免费CDN加速插件: ...
「视频直播技术详解」系列之七：直播云 SDK 性能测试模型
关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...
(转)云存储：阿里云OSS 、又拍云和七牛的比较
阿里OSS:好处就是,那是一套完整的体系,存储,数据库,CDN,服务器,阿里都可以给你全包.缺点,费用对于没有盈利的网站来说太高了,好像定位就是给那些高端客户使用的,而且CDN,OSS的流量是分开收费 ...
从QQ音乐开发，探讨如何利用腾讯云SDK在直播中加入视频动画
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...
自建存储与使用微软Azure、七牛等第三方云存储综合考察分析
http://www.cnblogs.com/sennly/p/4136734.html 各种云服务这两年炒的火热,加之可以降低成本,公司想先在部分业务上尝试使用下,刚好最近有个项目有大量小文件需要存 ...
七牛对用户使用webp图片格式的使用建议
Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...
阿里云 ECS 迁移到七牛 QVM 记
操作下载脚本 curl -O http://p70nwjoid.bkt.clouddn.com/go2qvm_client1.5_linux_x86_64.zip 解压填写配置 unzip go2q ...

随机推荐

iOS常用的宏定义总结
字符串是否为空 1 #define kStringIsEmpty(str) ([str isKindOfClass:[NSNull class]] || str == nil || [str le ...
虚拟化（二）：虚拟化及vmware workstation产品使用
虚拟化(一):虚拟化及vmware产品介绍 vmware workstation的最新版本号是10.0.2. 相信大家也都使用过,当中的简单的虚拟机的创建.删除等,都非常easy.这里就不再具体说明了 ...
_stdcall与_cdecl
_cdecl(C Declaration的缩写)是C/C++和MFC程序默认使用的调用约定,因此可以省略,也可以在函数声明时加上_cdecl关键字来手工指定.采用_cdecl约定时,函数参数按照从右到 ...
Mysql 存储引擎中InnoDB与MyISAM差别(网络整理)
1. 事务处理 innodb 支持事务功能,myisam 不支持. Myisam 的运行速度更快,性能更好. 2,select ,update ,insert ,delete 操作 MyISAM:假设 ...
【bzoj1015】[JSOI2008]星球大战starwar
给定一个无向图,求联通块个数,以及k次每次摧毁一个点后的联通块个数将边和摧毁的点全记录下来,反着做即可注意被摧毁的点不能算作联通块 #include<algorithm> #inclu ...
java 四种实现延迟加载的方法
1. 延迟初始化 2. 虚拟代理(virtual proxy) 原文地址: http://www.oodesign.com/proxy-pattern.html Intent The intent ...
android TabHost控件
(一)TabHost控件,默认是在顶部显示的 TabHost是盛放Tab按钮和Tab内容的首要容器, TabWidget(tabs标签)用于选择页面,是指一组包含文本或图标的 ,FrameLayout ...
Eclipse自定义HTML5，JSP模板
原文:http://blog.csdn.net/xz2585458279/article/details/78833893 我们知道在MyEclipse里面编写的html和jsp模板并不符合html5 ...
[Apple开发者帐户帮助]六、配置应用服务（5.2）推送通知（APN）：使用TLS证书与APN通信
您的通知服务器可以使用TLS证书与Apple推送通知服务(APN)通信. 首先在开发者帐户中启用推送通知.接下来生成适用于开发和生产环境的APNs客户端TLS证书.然后从Mac导出客户端TLS标识并将 ...
python自动化测试学习笔记-4内置函数，处理json
函数.全局变量写代码时注意的几点事项: 1.一般写代码的时候尽量少用或不用全局变量,首先全局变量不安全,大家协作的情况下,代码公用容易被篡改,其次全局变量会一直占用系统内容. 2.函数里如果有多个r ...

七牛直播云-m3u8格式直播

直播架构

服务端

播放端

七牛直播云-m3u8格式直播的更多相关文章

随机推荐

热门专题