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