|
|
<!DOCTYPE HTML>
<html>
<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"/>
<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>
section {
position: relative;
top: 400px;
margin: 8px;
background-color: #fff;
}
h2 {
position: relative;
height: 44px;
line-height: 44px;
color: #888;
}
div {
position: relative;
height: 56px;
margin: 8px;
text-align: center;
font-size: 12px;
line-height: 56px;
color: #fff;
background-color: #354399;
background-clip: padding;
box-shadow: 0 0 1px 1px #ccc;
border-radius: 2px;
}
.active {
opacity: 0.7;
}
</style>
</head>
<body>
<section>
<h2>agoraLive</h2>
<!--
调用顺序为:
// A手机 uid为1
//init - setChannelProfile - enableVideo - setClientRole - startPreview - initVideoRect1 -setupLocalVideo1
//joinChannel 例如：uid为1
//setupLocalVideo 例如：uid为1（A手机视图1，会出现A手机视频）
//setupRemoteVideo 例如：uid为2（A手机视图2，会出现B手机视频）
//
// B手机 uid为2
//init - setChannelProfile - enableVideo - setClientRole - startPreview - initVideoRect2 -setupLocalVideo2
//joinChannel 例如：uid为2
//setupLocalVideo 例如：uid为2（B手机视图1，会出现B手机视频）
//setupRemoteVideo 例如：uid为1（B手机视图2，会出现A手机视频）
-->
<p>
init - setChannelProfile - enableVideo - setClientRole - initVideoRect -setupLocalVideo-startPreview
</p>
<div class="bttn" tapmode="active" onclick="fnjoinChannel('zhubo')">
主播1身份加入频道
</div>
<div class="bttn" tapmode="active" onclick="fnjoinChannel('zhubo2')">
主播2身份加入频道
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var agoraLive = null;
var livemode = "liveBroadcasting";
var rolemode = "";
var channelId = "sanguoyanyi185";
var userId = 0;
function fnjoinChannel(joinrole) {
if (joinrole == "zhubo") {
rolemode = "BROADCASTER";
userId = 133667858;
}
if (joinrole == "zhubo2") {
rolemode = "BROADCASTER";
userId = 452876319;
}
agoraLive = api.require('agoraLive');
init();
}
function init() {
agoraLive.init({
appId: '40075cf2c5444d938bc27f4cbf40965f' // 填写自己的appId
}, function(ret) {
console.log('初始化:' + JSON.stringify(ret));
setChannelProfile();
userJoinedListener();
})
}
function setChannelProfile() {
agoraLive.setChannelProfile({
profile: livemode
}, function(ret) {
if (ret.status) {
console.log('设置频道通话模式:' + '设置成功');
enableVideo();
}
});
}
function enableVideo() {
agoraLive.enableVideo(function(ret) {
console.log('开启视频模式：' + JSON.stringify(ret));
if(api.systemType == 'android'){
setClientRoleOrAndroid();
}else{
setClientRole();
}
});
}
function setClientRoleOrAndroid(){
agoraLive.setClientRoleOrAndroid({
role: rolemode
}, function(ret) {
if (ret.status) {
console.log('Android设置观众或主播模式:' + JSON.stringify(ret));
if (rolemode == "BROADCASTER") {
console.log(userId);
joinChannelByToken();
// 在Android上先显示本地视频，再显示远端视频
if (api.systemType == 'android') {
fnShowLocalVideo();
}
}
if (rolemode == "AUDIENCE") {
// enableLocalVideo(false);
muteLocalAudioStream(false);
joinChannelByToken();
userId = 133667858;
initVideoRect(userId, 0, 0, api.winWidth, api.winHeight);
setTimeout("setupRemoteVideo()", 2000)
}
}
});
}
function setClientRole() {
agoraLive.setClientRole({
role: rolemode
}, function(ret) {
if (ret.status) {
console.log('设置观众或主播模式:' + JSON.stringify(ret));
if (rolemode == "BROADCASTER") {
console.log("主播id："+userId);
joinChannelByToken();
}
if (rolemode == "AUDIENCE") {
// enableLocalVideo(false);
muteLocalAudioStream(false);
joinChannelByToken();
userId = 133667858;
initVideoRect(userId, 0, 0, api.winWidth, api.winHeight);
setTimeout("setupRemoteVideo()", 2000)
}
}
});
}
function initVideoRect(userId, x, y, w, h) {
agoraLive.initVideoRect({
uid: userId,
rect: {
x: x,
y: y,
w: w,
h: h
},
fixedOn: api.frameName, // 注意这里要写自己打开的frame的名字。可以这样写api.frameName
fixed: true
});
}
function setupLocalVideo() {
agoraLive.setupLocalVideo({
renderMode: 'RENDER_MODE_HIDDEN',
uid: userId
}, function(ret) {
console.log('设置本地视频显示信息' + JSON.stringify(ret));
startPreview();
});
}
function startPreview() {
agoraLive.startPreview(function(ret) {
console.log('启动本地视频预览' + JSON.stringify(ret));
// joinChannel();
});
}
function stopPreview() {
agoraLive.stopPreview(function(ret) {
alert('停止本地视频预览' + JSON.stringify(ret));
});
}
function setupRemoteVideo(userId) {
agoraLive.setupRemoteVideo({
renderMode: 'RENDER_MODE_HIDDEN',
uid: userId
}, function(ret) {
if (ret.status) {
console.log("显示主播视频：" + JSON.stringify(ret));
// 在iOS 上先显示远端视频，在显示本地视频
if (api.systemType == 'ios') {
fnShowLocalVideo();
}
}
});
}
function joinChannelByToken() {
console.log("加入频道开始");
agoraLive.joinChannelByToken({
channelToken:'',
channelId: channelId,
uid: userId
}, function(ret, err) {
if (ret.status) {
console.log("加入频道成功:" + JSON.stringify(ret));
} else {
}
});
}
function userJoinedListener() {
console.log("设置监听----");
agoraLive.userJoinedListener({
enable: true
}, function(ret) {
console.log("加入频道监听----------：" + JSON.stringify(ret));
remId = ret.uid;
fnShowRemoteVideo(remId);
});
}
function muteLocalAudioStream(flag) {
agoraLive.muteLocalAudioStream({
muted: flag
}, function(ret) {
if (ret.status) {
console.log("禁用本地音频");
}
});
}
function enableLocalVideo(flag) {
agoraLive.enableLocalVideo({
enabled: flag
}, function(ret) {
if (ret.status) {
console.log("禁用本地视频");
}
});
}
// 显示远端视频
function fnShowRemoteVideo(userId) {
console.log("显示远程视频" +userId);
initVideoRect(userId, 100, 100, 300, 300);
setupRemoteVideo(userId);
}
// 显示本地视频
function fnShowLocalVideo() {
console.log("显示本地视频");
initVideoRect(userId, 0, 0, 200, 200);
setTimeout("setupLocalVideo()", 2000);
}
</script>
</html> |
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
