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

随机推荐

sendredirect()和forward()的区别 (转)
sendRedirect() 和forward()的区别 HttpServletResponse.sendRedirect与RequestDispatcher.forward方法都可以实现获取相应UR ...
UVA 11748 - Rigging Elections（dfs)
UVA 11748 - Rigging Elections option=com_onlinejudge&Itemid=8&page=show_problem&category ...
防遗忘笔记，Fedora交叉编译window下的virt-iewer的汉化
1. 汉化代码里的资源 virtviewer使用的是gettex的方案是标准的linux里国际化的方案.按道理仅仅须要改动virtualviewer/po/zh_CN.po的文件. 编译. 然后确认在 ...
算法题：打印1到最大的n位数
说明:本文仅供学习交流,转载请标明出处,欢迎转载! 今天看到剑指offer上的第12题,题目例如以下: 输入数字n.按顺序打印出从1到最大的n位十位数. 比方输入3,则打印 ...
Razor项目所感（上）
简单的说下我的Razor四旋翼飞行器项目,还没做完,要暂时搁一搁,就先总结一下. 此项目基于Raspberry Pi上的linux平台进行开发,现仍在开发中.项目地址:https://github.c ...
vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性
最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 后来在网上查找大神的解决方案如下: exp ...
【转载】[Oracle] Linux下手动创建数据库过程
今天发现一个Oracle测试库的字符集设置不正确,原本的字符集是UTF-8,正确的字符集应该是ZHS16GBK,因为UTF-8是ZHS16GBK的超集,无法修改,只能重建数据库,幸好该测试库上还没有数 ...
【转载】Sybase数据库服务器端安装
sybase数据库的安装分为服务器端和客户端,本文先介绍一下服务器端的安装. 1.和其他程序一样,双击setup.exe. 2.出现欢迎界面,直接点击next即可. 3.下面选择相应国家的协议 ...
通过usb连接adb
手机不同进入的方式可能不一样,我使用的是努比亚手机. 借鉴这里的:http://adbshell.com/commands/adb-connect 在Wi-Fi上使用ADB:adb connect & ...
php排序函数测试
1.sort,asort,arsort函数十万个数的数组排序,用了0.17秒 $starttime=explode(' ',microtime());;for ($i=0; $i <10000 ...

七牛直播云-m3u8格式直播

直播架构

服务端

播放端

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

随机推荐

热门专题