本文出自APICloud官方論壇
qiniuLive 封裝了七牛直播雲服務平臺的移動端開放 SDK。該模塊包括視頻流採集和視頻流播放兩部分
iOS連麥流程圖：
Android連麥流程圖：
以下部分代碼，僅供參考。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {
padding-top: 760px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<p>主播操作</p>
<button type="button" onclick="fnsetStreamingProfile('ddghh')" name="button">initStreamingEnv--setStreamingProfile</button>
<button type="button" onclick="fnstartStream()" name="button">startStream</button>
<button type="button" onclick="fnconfigConference(320)" name="button">configConference</button>
<button type="button" onclick="fnstartConference('ddghh')" name="button">startConference</button>
<p>副主播操作</p>
<button type="button" onclick="fnsetStreamingProfile('vbmuy')" name="button">initStreamingEnv--setStreamingProfile</button>
<button type="button" onclick="fnstartStream()" name="button">startStream</button>
<button type="button" onclick="fnconfigConference(320)" name="button">configConference</button>
<button type="button" onclick="fnstartConference('vbmuy')" name="button">startConference</button>
<p>播放</p>
<button type="button" onclick="fninitPMediaPlayer()" name="button">fninitPMediaPlayer</button>
<button type="button" onclick="fnstart()" name="button">fnstart</button>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var room_name, user_id, roomToken;
var qiniuLive;
apiready = function() {
qiniuLive = api.require('qiniuLive');
qiniuLive.initStreamingEnv(function(ret) {
if (ret.status) {
console.log('initStreamingEnv成功' + JSON.stringify(ret));
qiniuLive.addRtcStateDidChangeListener(function(ret) {
console.log('addRtcStateDidChangeListener---' + JSON.stringify(ret));
if (ret.state == 'inited') {
if (api.systemType == "ios") {
fnconfigConference();
//fnstartConference();
}
}
});
qiniuLive.addEventListener({ //流狀態已變更事件
name: 'streamStatus'
}, function(ret) {
console.log('streamStatus---' + JSON.stringify(ret));
if (ret.streamStatus == 17) { //Android適用
fnconfigConference();
}
if (ret.streamStatus == 8) {
}
});
qiniuLive.addRoomOIListener(function(ret) {
console.log('主播進出房間' + JSON.stringify(ret));
if (ret.eventType == "didJoin") {
alert(ret.userID + "進入房間")
}
});
qiniuLive.addRtcDidFailListener(function(ret) {
console.log('錯誤回調addRtcDidFailListener的監聽' + JSON.stringify(ret));
});
}
});
};
// 配置直播流參數，初始化推流預覽區域
function fnsetStreamingProfile(pkuid) {
//$api.setStorage('uid', pkuid);
qiniuLive.setStreamingProfile({
rect: {
x: 0,
y: 0,
w: parseInt(api.frameWidth),
h: parseInt(api.frameWidth)
},
remoteWindowRect: [{
x: parseInt(api.frameWidth / 2),
y: 0,
w: parseInt(api.frameWidth / 2),
h: parseInt(api.frameHeight / 2)
}],
pushUrl: 'rtmp://xxxx/*' + pkuid, //填寫自己的推流地址
videoCapture: {
videoFrameRate: 30,
sessionPreset: '100x100',
previewMirrorFrontFacing: true,
previewMirrorRearFacing: false,
streamMirrorFrontFacing: false,
streamMirrorRearFacing: false,
videoOrientation: 'portrait',
cameraPosition: 'front'
},
previewSetting: {
previewSizeLevel: 'small', // 字符類型；相機預覽大小等級
// 取值範圍：small, medium, large
previewSizeRatio: 'ratio_4_3' // 字符類型；相機預覽大小比例 //這個會改變本地的比例大小嗎？
// 取值範圍：ratio_4_3, ratio_16_9
},
videoStream: {
videoSize: {
width: 960,
height: 640
},
videoQuality: 'low1'
},
localWinPosition: {
x: 0,
y: 0,
w: 480,
h: 640
},
encodeOritation: "landscape",
face: {
beautify: false,
setBeautify: 0,
setWhiten: 0,
setRedden: 0
},
audioQuality: 'medium',
continuousFocus: false,
fixedOn: api.frameName,
fixed: true
}, function(ret) {
if (ret.status) {
console.log('setStreamingProfile成功' + JSON.stringify(ret));
if (api.systemType == "ios") {
console.log('ios-----' + 'setWithServerRegion');
qiniuLive.setWithServerRegion({
serverRegionID: 0
});
}
}
});
}
//開始推流
function fnstartStream() {
qiniuLive.startStream(function(ret) {
if (ret.status == true) {
console.log('推流成功');
} else {
//start_stream();
console.log('推流失敗');
}
});
}
//配置連麥
function fnconfigConference(x) {
qiniuLive.configConference({
videoEncodingSizeRatio: 'ratio_4_3',
videoEncodingSize: 480,
videoBitrateRange: {
from: 100 1000,
to: 300 * 1000
},
fps: 20,
mixVideoSize: { //默認跟setStreamingProfile接口的videoStream ->videoSize參數保持一致
width: 640,
height: 480
},
localVideoRect: {
x: x, //（可選項）數字類型；x 座標；默認值：0
y: 0, //（可選項）數字類型；y 座標；默認值：0
width: 320,
height: 480,
//width: parseInt(api.frameWidth),
//height: parseInt(api.frameHeight)
},
mixOverlayRectArray: [{ //控制觀衆端的對方畫面
x: 480,
y: 0,
w: 480,
h: 640
}
// , {
// x: 120,
// y: 120,
// w: 120,
// h: 120
// }
],
rejoinTimes: 3,
connetTimeout: 5000
}, function(ret) {
if (ret.status) {
console.log('configConference成功' + JSON.stringify(ret));
fnstartStream();
} else {
console.log('configConference失敗');
}
});
}
// 從服務器獲取直播房間號、token，然後開始連麥
function fnstartConference(uid) {
api.ajax({
type: 'get',
url: 'http://www/***/fangjian?uid=' + uid //填寫自己的服務器接口地址
}, function(ret) {
var room = ret.content;
room_name = room.room_name;
roomToken = room.roomToken;
qiniuLive.startConference({
userId: uid,
roomName: room_name,
roomToken: roomToken
}, function(ret, err) {
if (ret) {
console.log('startConference---' + JSON.stringify(ret));
} else {
console.log('startConference---' + JSON.stringify(err));
}
});
})
}
//停止推流、停止連麥
function stopStearm() {
qiniuLive.stopStream(function(ret) {
alert('已停止推流');
});
qiniuLive.stopConference(function(ret) {
// alert('結束連麥');
});
}
// 初始化播放器，播放端調用
function fninitPMediaPlayer() {
qiniuLive.initPMediaPlayer({
rect: {
x: 0,
y: 0,
w: 320,
h: 480
},
dataUrl: 'rtmp://xxx/*****', //填寫自己的拉流地址
codec: 0,
prepareTimeout: 10000,
readTimeout: 10000,
isLiveStream: true,
isDelayOptimization: true,
cacheBufferDuration: 2000,
maxCacheBufferDuration: 4000,
fixedOn: api.frameName,
fixed: true
}, function(ret) {
alert(JSON.stringify(ret));
});
}
//開始播放， 播放端調用
function fnstart() {
qiniuLive.start(function(ret) {
alert(JSON.stringify(ret));
});
}
</script>
</html>
複製代碼