七牛直播云-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 ...

随机推荐

SQL语句多表连接查询语法
一.外连接 1.左连接 left join 或 left outer join SQL语句:select * from student left join score on student.Num= ...
Scikit-learn库中的数据预处理（一）
数据标准化:当单个特征的样本取值相差甚大或明显不遵从高斯正态分布时,标准化表现的效果较差.实际操作中,经常忽略特征数据的分布形状,移除每个特征均值,划分离散特征的标准差,从而等级化,进而实现数据中心化 ...
Java 数组的 12 个方法
1. 声明一个数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...
js判断出两个字符串最大子串的函数
<!DOCTYPE html><html><head> <title></title></head><script typ ...
canvas做的一个写字板
<!DOCTYPE html><html><head><title>画板实验</title> <meta charset=" ...
Kafka详解与总结(一)
1. Kafka概述 1.1. 消息队列 1)点对点模式(一对一,消费者主动拉取数据,消息收到后消息清除) 点对点模型通常是一个基于拉取或者轮询的消息传送模型,这种模型从队列中请求信息,而不是将消息推 ...
cookie和seesion区别
cookie 和session 的区别详解这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie ...
Windows键盘驱动结构与消息机制--转
https://www.douban.com/note/318793892/ 本文主要介绍按键消息是如何传递到窗口并转化为具体的按键消息的. Windows系统是事件驱动的多任务系统,其中按键和鼠标是 ...
synchronized关键字详解（一）
synchronized官方定义: 同步方法支持一种简单的策略防止线程干扰和内存一致性错误,如果一个对象对多个线程可见,则对该对象变量的所有读取或写入都是通过同步方法完成的(这一个synchroniz ...
记Spring下autowire为name时的一个现象
当autowire为byname时,假如有一个名为“user”的component,恰巧还有另一个属性为“user”,它的set方法为setUser(User user),Spring会强行把comp ...

七牛直播云-m3u8格式直播

直播架构

服务端

播放端

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

随机推荐

热门专题