本文出自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>

复制代码

qiniuLive 连麦流程介绍的更多相关文章

  1. 转: Annovar 软件注释流程介绍

    第一步:下载Annovar 上Annovar官网下载(http://annovar.openbioinformatics.org/en/latest/user-guide/download/),现在要 ...

  2. 02-FPGA设计流程介绍——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线——普利斯队长精心奉献 课程目标: 1.了解并学会FPGA开发设计的整体流程 2.设计一个二选一选择器并进行功能仿真.时序仿真以及板级验证 实验平台:芯航线FPGA开发板.杜邦线 实验内容: 良 ...

  3. OpenCart框架运行流程介绍

    框架运行流程介绍 这样的一个get请求http://hostname/index.php?route=common/home 发生了什么? 1. 开始执行入口文件index.php. 2. requi ...

  4. UED视觉交互设计与流程介绍

    UED视觉交互设计与流程介绍 ------------------------------------------------------------------ 今天先到这儿,希望对您技术领导力, ...

  5. Solr系列五:solr搜索详解(solr搜索流程介绍、查询语法及解析器详解)

    一.solr搜索流程介绍 1. 前面我们已经学习过Lucene搜索的流程,让我们再来回顾一下 流程说明: 首先获取用户输入的查询串,使用查询解析器QueryParser解析查询串生成查询对象Query ...

  6. shiro原理及其运行流程介绍

    shiro原理及其运行流程介绍 认证执行流程 1.通过ini配置文件创建securityManager 2.调用subject.login方法主体提交认证,提交的token 3.securityMan ...

  7. Zbar算法流程介绍

    博客转载自:https://blog.csdn.net/sunflower_boy/article/details/50783179 zbar算法是现在网上开源的条形码,二维码检测算法,算法可识别大部 ...

  8. iOS蓝牙连接流程介绍-1

    蓝牙连接流程介绍 1.1-程序员找女朋友流程介绍 0.程序员找女朋友参与者 1.你 2.受害者(女性同胞)  (1)她的性格1 性格的特点 (2)她的性格2  分析性格的特点 1.寻找女性 寻尽身边一 ...

  9. 13.1 CentOS系统启动流程介绍

    CentOS系统启动流程介绍 本章我们将学习 Linux 启动流程和内核模块管理相关的内容.通过本章我们将学习如下内容: Linux 系统的组成及特点 CentOS 系统的启动流程 开机启动成 gru ...

随机推荐

  1. Codeforces Round #564 (Div. 2) D. Nauuo and Circle(树形DP)

    D. Nauuo and Circle •参考资料 [1]:https://www.cnblogs.com/wyxdrqc/p/10990378.html •题意 给出你一个包含 n 个点的树,这 n ...

  2. 5款顶尖Windows文件传输工具

    5款顶尖Windows文件传输工具 英文原文: Drasko 日常工作中,公司里的系统管理员或其他岗位的员工都需要传递大量各种类型的文件和文档.其中一些可以通过 email 收发.但由于 email ...

  3. H3C开启telnet服务

    [H3C]Telnet server enable       //开启telnet服务

  4. Linux 字节序

    小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高 级的平台以另一种方式(大端)工作. 任何可能的时候, 你的代码应当这样来编写, 它不在 乎它操作的数据的字节序 ...

  5. ZOJ3537 Cake

    ZOJ3537 Cake 传送门:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3537 题意: 给你几何形状的蛋糕,你需要 ...

  6. SQLServer数据库之SqlServer查看表、存储过程、耗时查询、当前进程、开销较大的语句

    --查看数据库中表的语句 SELECT s2.dbid , DB_NAME(s2.dbid) AS [数据库名] , --s1.sql_handle , ( , ( ( THEN ( LEN(CONV ...

  7. 0002 认识HTML(骨架、DOCTYPE、lang、charset)

    学习目标 理解 1.HTML的概念 2.HTML标签的分类 3.HTML标签的关系 4.HTML标签的语义化 应用 1.HTML骨架格式 2.sublime基本使用 1. HTML 初识 HTML 指 ...

  8. $Poj2956/AcWing116\ The\ Pilots\ Brothers'Refrigerator$ 二进制

    AcWing $Sol$ 假设改变$[x1,y1]$和$[x2,y2]$的状态就可以达到目的.注意到先改变谁对结果是没有影响的!! 所以就可以直接枚举改变状态的结点而不需要注意顺序. $4*4$的矩阵 ...

  9. $loj10156/$洛谷$2016$ 战略游戏 树形$DP$

    洛谷loj Desription Bob 喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的方法.现在他有个问题. 现在他有座古城堡,古城堡的路形成一棵树.他要在这棵树的节点上放置最少数 ...

  10. 我终于懂得如何使用matplotlib进行画图

    一 前言 本篇文章带大家快速入门如何使用matplotlib画出精美数学的图片:看完本篇文章你将获得熟悉并简单使用matplotlib工具,会画基本得折现图,散点图,sin,cos图,一张画布画出多图 ...