apicloud,aliyunlive,测试成功-低调大师

apicloud,aliyunlive,测试成功

2018-01-06 685

1.推流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>直播测试</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
</head>

<body style="overflow: hidden;">

<header class="aui-bar aui-bar-nav">
    发起直播
</header>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>

<script>
    var aliyunLive;
    apiready = function () {
        fix_status_bar();
        aliyunLive = api.require('aliyunLive');
        aliyunLive.configStream({
            rect: {
                x: 0,
                y: 0,
                w: 375,
                h: 667
            },
            url: 'rtmp://video-center.alivecdn.com/yunlutong/test?vhost=live.yunlutong.com&auth_key=1490162678-0-0-0a084668d1f4b0eb1066a33c04c3bcf8',
            bitRate: {
                videoMaxBitRate: 1500 * 1000,
                videoMinBitRate: 400 * 1000,
                videoBitRate: 600 * 1000,
                audioBitRate: 64 * 1000
            },
            fps: 20,
            screenOrientation: 'vertical',
            reconnectTimeout: 5,
            videoResolution: '240P',
            videoPreset: '1280*720',
            cameraPosition: 'front',
            waterMarkImage: {
                path: '',
                location: 'leftTop',
                maginX: 20,
                maginY: 20
            },
            fixed: true
        },function(ret) {
            startStream();
        });
    }


    // 增加连接状态监听
    function addConnectStatusListener() {
        aliyunLive.addConnectStatusListener(function(ret){
            alert(JSON.stringify(ret));
        });
    }

    // 销毁推流，测试有效
    function destroyStream() {
        aliyunLive.destroyStream();
    }


    // 转换摄像头,测试有效
    function toggleCamera() {
        aliyunLive.toggleCamera();
    }

    // 设置美颜,测试有效
    function setBeauty() {
        aliyunLive.setBeauty({
            beauty: 'on'
        });
    }

    // 设置静音
    function setMute() {
        aliyunLive.setMute({
            mute: 'on'
        });
    }


    // 设置闪光灯，测试有效，对后置摄像头有效
    function setFlash() {
        aliyunLive.setFlash({
            flash: 'on'
        });
    }

    // 停止推流
    function stopStream() {
        aliyunLive.stopStream(function(ret){
            alert(JSON.stringify(ret));
        });
    }

    // 开始推流
    function startStream() {
        aliyunLive.startStream(function(ret){
            alert(JSON.stringify(ret));
        });
    }

</script>

</body>
</html>

2.拉流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>直播测试</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
</head>

<body style="overflow: hidden;">

<header id="aui-header" class="aui-bar aui-bar-nav">
    看直播
</header>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script>
    var mediaPlayer;
    apiready = function () {
        fix_status_bar();
        mediaPlayer = api.require('aliyunLive');
        mediaPlayer.init({
            rect: {
                x: 0,
                y: $("#aui-header").height(),
                w: api.winWidth,
                h: api.winHeight - $("#aui-header").height()
            },
            accessKeyId : 'xxxxx',
            accessKeySecret : 'xxxxx',
            businessId : 'yunlutong'
        }, function(ret, err) {
            prepareToPlay();
            play();
        });


    }

    // 添加监听
    function addEventListener() {
        mediaPlayer.addEventListener(function(ret){
            alert(JSON.stringify(ret));
        });
    }

    // 设置缓冲时长
    function setMaxBufferDuration() {
        mediaPlayer.setMaxBufferDuration({
            duration:10000
        });
    }
    
    // 设置默认解码器,0硬件解码器,1软件解码器
    function setDefaultDecoder() {
        mediaPlayer.setDefaultDecoder({
            type : 1
        });
    }
    
    // 视频缩放,0等比例缩放,1剪切缩放
    function setVideoScalingMode() {
        mediaPlayer.setVideoScalingMode({
            mode : 1
        });
    }

    // 设置静音
    function setMuteMode() {
        mediaPlayer.setMuteMode({
            isMute:true
        });
    }

    // 设置媒体类型
    function setMediaType() {
        var mediaPlayer = api.require('aliyunLive');
        mediaPlayer.setMediaType({
            type:0
        });
    }

    // 请求超时时间
    function setTimeout() {
        mediaPlayer.setTimeout({
            timeout:5000
        });
    }

    // 获取视频高度
    function getVideoHeight() {
        mediaPlayer.getVideoHeight(function(ret){
            if(ret){
                alert("Video height : " + ret.height);
            }
        });
    }

    // 获取视频宽度
    function getVideoWidth() {
        mediaPlayer.getVideoWidth(function(ret){
            if(ret){
                alert("Video width : " + ret.width);
            }
        });
    }

    // 摧毁直播
    function destroy() {
        mediaPlayer.destroy();
    }

    // 停止播放
    function stop() {
        mediaPlayer.stop();
    }

    // 暂停
    function pause() {
        mediaPlayer.pause();
    }


    // 播放
    function play() {
        mediaPlayer.play();
    }
    
    // 准备播放
    function prepareToPlay() {
        mediaPlayer.prepareToPlay({
            url:'http://live.yunlutong.com/yunlutong/test.m3u8?auth_key=1490164347-0-0-a19f94a4fcd8a033f6b778bedd48545c'
        }, function(ret, err) {
            if(ret && ret.status){
            }
        });
    }

</script>

</body>
</html>

ps:
1.这里需要申请Access Key ID，Access Key Secret

2.配置好推流和拉流的url。

3.这里只是初步实现了视频直播的功能，具体的还是需要配合服务器，把直播列表的数据获取到，展示到app中。
最好能够支持用户发言，发送小礼物，或者查看在线人数，和观看视频的人数。这些都需要处理。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6599906.html，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/337073

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

阿里云aliyunlive视频直播，设置元素浮在视频上方

视频直播，视频是可以看到了。但是还需要其他的元素，比如聊天内容，小礼物效果，观看人员列表等等。怎样让其他的元素，浮在视频上方呢？解决方案，通过打开一个frame层，设置body的背景为透明的。新的frame层，会漂浮在视频上方，背景透明，可以不遮挡住视频。这样，视频和其他元素就能够共同存在了。需要两个页面，一个用于被视频依附，aliyunlive_play_con.html 一个用于存放其他的页面元素，比如聊天内容，小礼物效果，观看人员列表等等，aliyunlive_play_frm.html 在aliyunlive_play_con页面中开启视频，并开启frame。 apiready = function () { mediaPlayer(); // 开启视频直播 openFrmPro('aliyunlive_play_frm'); // 打开frame层 } function mediaPlayer() { mediaPlayer = api.require('aliyunLive'); mediaPlayer.init({ rect: { x: 0, y: 0, w: a...

2018-01-07

645

1.下载sdk放入项目文件夹中核心就是aliyun-php-sdk-core，它的配置文件会自动加载相应的类 2.引入文件 include_once LIB_PATH . 'ORG/aliyun-openapi/aliyun-php-sdk-core/Config.php'; 3.配置客户端对象,需要Access Key ID,Access Key Secret $iClientProfile = DefaultProfile::getProfile("cn-hangzhou", "xxxx", "xxxx"); // Access Key ID,Access Key Secret $client = new DefaultAcsClient($iClientProfile); 4.调用请求类，并配置参数，就拿直播推流历史为例 $request = new live\Request\V20161101\DescribeLiveStreamsPublishListRequest(); $request ->setDomainName('live.yunlutong.com'); ...

2018-01-07

606

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。