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中。
最好能够支持用户发言,发送小礼物,或者查看在线人数,和观看视频的人数。这些都需要处理。