apicloud apicloud

注册
查看: 1531|回复: 17

[模块教程] qiniuLive 连麦流程介绍

主题:
61
帖子:
37448
云币:
17504

[模块教程] qiniuLive 连麦流程介绍

1531 17 | 发表于 2019-6-27 21:18:11 |阅读模式 | |
qiniuLive 封装了七牛直播云服务平台的移动端开放 SDK。该模块包括视频流采集和视频流播放两部分
模块文档地址


iOS连麦流程图:




Android连麦流程图:



以下部分代码,仅供参考。
  1. <!DOCTYPE HTML>
  2. <html>

  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  6.         <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  7.         <title>Hello APP</title>
  8.         <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9.         <style>
  10.                 body {
  11.                         padding-top: 760px;
  12.                 }

  13.                 button {
  14.                         margin: 10px;
  15.                 }
  16.         </style>
  17. </head>

  18. <body>
  19.         <p>主播操作</p>
  20.         <button type="button" onclick="fnsetStreamingProfile('ddghh')" name="button">initStreamingEnv--setStreamingProfile</button>
  21.         <button type="button" onclick="fnstartStream()" name="button">startStream</button>
  22.         <button type="button" onclick="fnconfigConference(320)" name="button">configConference</button>
  23.         <button type="button" onclick="fnstartConference('ddghh')" name="button">startConference</button>

  24.         <p>副主播操作</p>
  25.         <button type="button" onclick="fnsetStreamingProfile('vbmuy')" name="button">initStreamingEnv--setStreamingProfile</button>
  26.         <button type="button" onclick="fnstartStream()" name="button">startStream</button>
  27.         <button type="button" onclick="fnconfigConference(320)" name="button">configConference</button>
  28.         <button type="button" onclick="fnstartConference('vbmuy')" name="button">startConference</button>
  29.         <p>播放</p>
  30.         <button type="button" onclick="fninitPMediaPlayer()" name="button">fninitPMediaPlayer</button>
  31.         <button type="button" onclick="fnstart()" name="button">fnstart</button>

  32. </body>
  33. <script type="text/javascript" src="../script/api.js"></script>
  34. <script type="text/javascript">
  35.         var room_name, user_id, roomToken;
  36.         var qiniuLive;
  37.         apiready = function() {

  38.                 qiniuLive = api.require('qiniuLive');
  39.                 qiniuLive.initStreamingEnv(function(ret) {

  40.                         if (ret.status) {
  41.                                 console.log('initStreamingEnv成功' + JSON.stringify(ret));

  42.                                 qiniuLive.addRtcStateDidChangeListener(function(ret) {
  43.                                         console.log('addRtcStateDidChangeListener---' + JSON.stringify(ret));
  44.                                         if (ret.state == 'inited') {
  45.                                                 if (api.systemType == "ios") {
  46.                                                         fnconfigConference();
  47.                                                         //fnstartConference();
  48.                                                 }
  49.                                         }
  50.                                 });

  51.                                 qiniuLive.addEventListener({ //流状态已变更事件
  52.                                         name: 'streamStatus'
  53.                                 }, function(ret) {
  54.                                         console.log('streamStatus---' + JSON.stringify(ret));
  55.                                         if (ret.streamStatus == 17) {  //Android适用
  56.                                                 fnconfigConference();
  57.                                         }
  58.                                         if (ret.streamStatus == 8) {

  59.                                         }
  60.                                 });

  61.                                 qiniuLive.addRoomOIListener(function(ret) {
  62.                                         console.log('主播进出房间' + JSON.stringify(ret));
  63.                                         if (ret.eventType == "didJoin") {
  64.                                                 alert(ret.userID + "进入房间")
  65.                                         }
  66.                                 });

  67.                                 qiniuLive.addRtcDidFailListener(function(ret) {
  68.                                         console.log('错误回调addRtcDidFailListener的监听' + JSON.stringify(ret));
  69.                                 });
  70.                         }
  71.                 });

  72.         };

  73. // 配置直播流参数,初始化推流预览区域
  74.         function fnsetStreamingProfile(pkuid) {

  75.                 //$api.setStorage('uid', pkuid);

  76.                 qiniuLive.setStreamingProfile({
  77.                         rect: {
  78.                                 x: 0,
  79.                                 y: 0,
  80.                                 w: parseInt(api.frameWidth),
  81.                                 h: parseInt(api.frameWidth)
  82.                         },
  83.                         remoteWindowRect: [{
  84.                                 x: parseInt(api.frameWidth / 2),
  85.                                 y: 0,
  86.                                 w: parseInt(api.frameWidth / 2),
  87.                                 h: parseInt(api.frameHeight / 2)
  88.                         }],
  89.                         pushUrl: 'rtmp://xxxx/****' + pkuid,         //填写自己的推流地址
  90.                         videoCapture: {
  91.                                 videoFrameRate: 30,
  92.                                 sessionPreset: '100x100',
  93.                                 previewMirrorFrontFacing: true,
  94.                                 previewMirrorRearFacing: false,
  95.                                 streamMirrorFrontFacing: false,
  96.                                 streamMirrorRearFacing: false,
  97.                                 videoOrientation: 'portrait',
  98.                                 cameraPosition: 'front'
  99.                         },
  100.                         previewSetting: {
  101.                                 previewSizeLevel: 'small', // 字符类型;相机预览大小等级
  102.                                 // 取值范围:small, medium, large
  103.                                 previewSizeRatio: 'ratio_4_3' // 字符类型;相机预览大小比例 //这个会改变本地的比例大小吗?
  104.                                         // 取值范围:ratio_4_3, ratio_16_9
  105.                         },
  106.                         videoStream: {
  107.                                 videoSize: {
  108.                                         width: 960,
  109.                                         height: 640
  110.                                 },
  111.                                 videoQuality: 'low1'
  112.                         },
  113.                         localWinPosition: {
  114.                                 x: 0,
  115.                                 y: 0,
  116.                                 w: 480,
  117.                                 h: 640
  118.                         },
  119.                         encodeOritation: "landscape",
  120.                         face: {
  121.                                 beautify: false,
  122.                                 setBeautify: 0,
  123.                                 setWhiten: 0,
  124.                                 setRedden: 0
  125.                         },
  126.                         audioQuality: 'medium',
  127.                         continuousFocus: false,
  128.                         fixedOn: api.frameName,
  129.                         fixed: true
  130.                 }, function(ret) {
  131.                         if (ret.status) {
  132.                                 console.log('setStreamingProfile成功' + JSON.stringify(ret));
  133.                                 if (api.systemType == "ios") {
  134.                                         console.log('ios-----' + 'setWithServerRegion');
  135.                                         qiniuLive.setWithServerRegion({
  136.                                                 serverRegionID: 0
  137.                                         });
  138.                                 }
  139.                         }
  140.                 });

  141.         }

  142. //开始推流
  143.         function fnstartStream() {

  144.                 qiniuLive.startStream(function(ret) {
  145.                         if (ret.status == true) {
  146.                                 console.log('推流成功');
  147.                         } else {
  148.                                 //start_stream();
  149.                                 console.log('推流失败');
  150.                         }
  151.                 });

  152.         }


  153. //配置连麦
  154.         function fnconfigConference(x) {

  155.                 qiniuLive.configConference({
  156.                         videoEncodingSizeRatio: 'ratio_4_3',
  157.                         videoEncodingSize: 480,
  158.                         videoBitrateRange: {
  159.                                 from: 100 * 1000,
  160.                                 to: 300 * 1000
  161.                         },
  162.                         fps: 20,
  163.                         mixVideoSize: { //默认跟setStreamingProfile接口的videoStream ->videoSize参数保持一致
  164.                                 width: 640,
  165.                                 height: 480
  166.                         },
  167.                         localVideoRect: {
  168.                                 x: x, //(可选项)数字类型;x 坐标;默认值:0
  169.                                 y: 0, //(可选项)数字类型;y 坐标;默认值:0
  170.                                 width: 320,
  171.                                 height: 480,
  172.                                 //width: parseInt(api.frameWidth),
  173.                                 //height: parseInt(api.frameHeight)
  174.                         },
  175.                         mixOverlayRectArray: [{ //控制观众端的对方画面
  176.                                         x: 480,
  177.                                         y: 0,
  178.                                         w: 480,
  179.                                         h: 640
  180.                                 }
  181.                                 // , {
  182.                                 //         x: 120,
  183.                                 //         y: 120,
  184.                                 //         w: 120,
  185.                                 //         h: 120
  186.                                 // }
  187.                         ],
  188.                         rejoinTimes: 3,
  189.                         connetTimeout: 5000
  190.                 }, function(ret) {
  191.                         if (ret.status) {
  192.                                 console.log('configConference成功' + JSON.stringify(ret));
  193.                                 fnstartStream();
  194.                         } else {
  195.                                 console.log('configConference失败');
  196.                         }
  197.                 });
  198.         }

  199. // 从服务器获取直播房间号、token,然后开始连麦
  200.         function fnstartConference(uid) {

  201.                 api.ajax({
  202.                         type: 'get',
  203.                         url: 'http://www/*****/fangjian?uid=' + uid   //填写自己的服务器接口地址
  204.                 }, function(ret) {
  205.                         var room = ret.content;
  206.                         room_name = room.room_name;
  207.                         roomToken = room.roomToken;
  208.                         qiniuLive.startConference({
  209.                                 userId: uid,
  210.                                 roomName: room_name,
  211.                                 roomToken: roomToken
  212.                         }, function(ret, err) {
  213.                                 if (ret) {
  214.                                         console.log('startConference---' + JSON.stringify(ret));
  215.                                 } else {
  216.                                         console.log('startConference---' + JSON.stringify(err));
  217.                                 }
  218.                         });
  219.                 })
  220.         }

  221. //停止推流、停止连麦
  222.         function stopStearm() {
  223.                 qiniuLive.stopStream(function(ret) {
  224.                         alert('已停止推流');
  225.                 });
  226.                 qiniuLive.stopConference(function(ret) {
  227.                         //  alert('结束连麦');
  228.                 });
  229.         }


  230. // 初始化播放器,播放端调用
  231.         function fninitPMediaPlayer() {
  232.                 qiniuLive.initPMediaPlayer({
  233.                         rect: {
  234.                                 x: 0,
  235.                                 y: 0,
  236.                                 w: 320,
  237.                                 h: 480
  238.                         },
  239.                        dataUrl: 'rtmp://xxx/*****',     //填写自己的拉流地址
  240.                         codec: 0,
  241.                         prepareTimeout: 10000,
  242.                         readTimeout: 10000,
  243.                         isLiveStream: true,
  244.                         isDelayOptimization: true,
  245.                         cacheBufferDuration: 2000,
  246.                         maxCacheBufferDuration: 4000,
  247.                         fixedOn: api.frameName,
  248.                         fixed: true
  249.                 }, function(ret) {
  250.                         alert(JSON.stringify(ret));
  251.                 });
  252.         }


  253. //开始播放, 播放端调用
  254.         function fnstart() {
  255.                 qiniuLive.start(function(ret) {
  256.                         alert(JSON.stringify(ret));
  257.                 });
  258.         }
  259. </script>

  260. </html>
复制代码


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
41
帖子:
9323
云币:
11788

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

发表于 2019-6-28 17:13:37 |
不全啊    来个版本呗
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

版主

UID:436609

主题:
37
帖子:
1784
云币:
7442

足球狗

发表于 2019-7-2 15:44:44 |
这个顶一下

主题:
12
帖子:
68
云币:
84
发表于 2019-7-18 19:21:49 |
七牛这个模块在直播过程中,或者播放端在播放过程中,一有操作(旋转变全屏、切换镜头等操作)就有可能整个程序崩掉,您遇到过吗?我要疯了

主题:
12
帖子:
68
云币:
84
发表于 2019-7-24 17:11:13 |
大佬问个问题,qiniulive连麦只有一个startConference配置连麦信息,他是怎么知道我连麦连到我空间下的哪个连麦空间呢?我三个连麦空间都有test这个房间,他是怎么确定我去哪个房间的?必须后端去做是吗?apicloud这边没法确定吗?

主题:
12
帖子:
68
云币:
84
发表于 2019-7-24 17:12:17 |

大佬问个问题,qiniulive连麦只有一个startConference配置连麦信息,他是怎么知道我连麦连到我空间下的哪个连麦空间呢?我三个连麦空间都有test这个房间,他是怎么确定我去哪个房间的?必须后端去做是吗?apicloud这边没法确定吗?

驾校小白

UID:814604

主题:
0
帖子:
7
云币:
7
发表于 2020-3-5 19:24:21 |
  qiniuLive.addRtcDidFailListener(function(ret) {
                    console.log('错误回调addRtcDidFailListener的监听' + JSON.stringify(ret));
                });   
返回的code是2007  这是什么错误呢?是什么原因导致的呢

驾校小白

UID:814604

主题:
0
帖子:
7
云币:
7
发表于 2020-3-5 19:28:00 |
qiniuLive.addRtcDidFailListener(function(ret) {
                                        console.log('错误回调addRtcDidFailListener的监听' + JSON.stringify(ret));
                                });
监听返回的code=2007是什么原因呢?解决的办法是什么呢

点评

:解决了吗?怎么解决的 
发表于 2020-3-11 09:49

驾校小白

UID:529036

主题:
9
帖子:
49
云币:
38
发表于 2020-3-9 18:12:47 |
推流到七牛,七牛上预览是一片黑色,另一台手机拉流播放也是黑色,这是个什么情况?

驾校小白

UID:529036

主题:
9
帖子:
49
云币:
38
发表于 2020-3-9 19:15:17 |
之前问题解决了,现在是拉流端,调用initPMediaPlayer没有回调,用监听返回时17 对应打开播放器失败(安卓手机)
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表