apicloud apicloud

注册
查看: 2102|回复: 12

[模块教程] agoraVideo 模块试用分享(视频直播)

实习司机

UID:253705

主题:
53
帖子:
175
云币:
494

[模块教程] agoraVideo 模块试用分享(视频直播)

2102 12 | 发表于 2018-3-26 20:26:36 |阅读模式 | |
本帖最后由 uoaccw 于 2018-4-9 20:40 编辑

agoraVideo模块文档地址:
https://docs.apicloud.com/Client-API/Open-SDK/agoraVideo

1.  假设场景为一对一视频聊天,本地视频窗口在远程窗口上方。
     注意事项:
     在iOS 上是先显示远端视频,再显示本地视频。否则,本地视频会在远端视频下方。
     在Android上是先显示本地视频,再显示远端视频。

使用前要先到声网注册,获得appId,填写到init()方法中。
使用方式,分别在两部手机上运行,一部手机点主播1,另一部点主播2.

  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,width=device-width,initial-scale=1.0" />
  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.         .bttn {
  11.             margin: 50px;
  12.             padding: 10px;
  13.         }
  14.     </style>
  15. </head>

  16. <body>
  17.     <p>
  18.         init - setChannelProfile - enableVideo - setClientRole - initVideoRect -setupLocalVideo-startPreview
  19.     </p>
  20.     <div class="bttn" tapmode="active" onclick="fnjoinChannel('zhubo')">
  21.         主播1身份加入频道
  22.     </div>
  23.     <div class="bttn" tapmode="active" onclick="fnjoinChannel('zhubo2')">
  24.         主播2身份加入频道
  25.     </div>
  26. </body>
  27. <script type="text/javascript" src="../script/api.js"></script>
  28. <script type="text/javascript">
  29.     var agoraVideo = null;
  30.     var livemode = "liveBroadcasting";
  31.     var rolemode = "";
  32.     var channelName = "sanguoyanyi185";
  33.     var userId = 0;

  34.     function fnjoinChannel(joinrole) {
  35.         if (joinrole == "zhubo") {
  36.             rolemode = "BROADCASTER";
  37.             userId = 133667858;
  38.         }
  39.         if (joinrole == "zhubo2") {
  40.             rolemode = "BROADCASTER";
  41.             userId = 452876319;
  42.         }
  43.         agoraVideo = api.require('agoraVideo');
  44.         init();

  45.     }

  46.     function init() {
  47.         agoraVideo.init({
  48.             appId: '' // 填写自己的appId
  49.         }, function(ret) {
  50.             console.log('初始化:' + JSON.stringify(ret));
  51.             setChannelProfile();
  52.             userJoinedListener();
  53.         })
  54.     }

  55.     function setChannelProfile() {
  56.         agoraVideo.setChannelProfile({
  57.             profile: livemode
  58.         }, function(ret) {
  59.             if (ret.status) {
  60.                 console.log('设置频道通话模式:' + '设置成功');
  61.                 enableVideo();
  62.             }
  63.         });
  64.     }

  65.     function enableVideo() {
  66.         agoraVideo.enableVideo(function(ret) {
  67.             console.log('开启视频模式:' + JSON.stringify(ret));
  68.             setClientRole();
  69.         });
  70.     }

  71.     function setClientRole() {
  72.         agoraVideo.setClientRole({
  73.             role: rolemode
  74.         }, function(ret) {
  75.             if (ret.status) {
  76.                 console.log('设置观众或主播模式:' + JSON.stringify(ret));
  77.                 if (rolemode == "BROADCASTER") {
  78.                     console.log(userId);

  79.                     joinChannel();

  80.                     // 在Android上先显示本地视频,再显示远端视频
  81.                     if (api.systemType == 'android') {
  82.                         fnShowLocalVideo();
  83.                     }

  84.                 }
  85.                 if (rolemode == "AUDIENCE") {
  86.                     // enableLocalVideo(false);
  87.                     muteLocalAudioStream(false);
  88.                     joinChannel();
  89.                     userId = 133667858;
  90.                     initVideoRect(userId, 0, 0, api.winWidth, api.winHeight);
  91.                     setTimeout("setupRemoteVideo()", 2000)
  92.                 }
  93.             }
  94.         });
  95.     }

  96.     function initVideoRect(userId, x, y, w, h) {
  97.         agoraVideo.initVideoRect({
  98.             uid: userId,
  99.             rect: {
  100.                 x: x,
  101.                 y: y,
  102.                 w: w,
  103.                 h: h
  104.             },
  105.             fixedOn: api.frameName,   // 注意这里要写自己打开的frame的名字。可以这样写api.frameName
  106.             fixed: true
  107.         });
  108.     }

  109.     function setupLocalVideo() {
  110.         agoraVideo.setupLocalVideo({
  111.             renderMode: 'RENDER_MODE_HIDDEN',
  112.             uid: userId
  113.         }, function(ret) {
  114.             console.log('设置本地视频显示信息' + JSON.stringify(ret));
  115.             startPreview();
  116.         });
  117.     }

  118.     function startPreview() {
  119.         agoraVideo.startPreview(function(ret) {
  120.             console.log('启动本地视频预览' + JSON.stringify(ret));
  121.             //joinChannel();
  122.         });
  123.     }

  124.     function stopPreview() {
  125.         agoraVideo.stopPreview(function(ret) {
  126.             alert('停止本地视频预览' + JSON.stringify(ret));
  127.         });
  128.     }

  129.     function setupRemoteVideo(userId) {
  130.         agoraVideo.setupRemoteVideo({
  131.             renderMode: 'RENDER_MODE_HIDDEN',
  132.             uid: userId
  133.         }, function(ret) {
  134.             if (ret.status) {
  135.                 console.log("显示主播视频:" + JSON.stringify(ret));
  136.                 // 在iOS 上先显示远端视频,在显示本地视频
  137.                 if (api.systemType == 'ios') {
  138.                     fnShowLocalVideo();
  139.                 }

  140.             }
  141.         });
  142.     }

  143.     function joinChannel() {
  144.         agoraVideo.joinChannel({
  145.             channelName: channelName,
  146.             uid: userId
  147.         }, function(ret, err) {
  148.             if (ret.status) {
  149.                 console.log("加入频道成功:" + JSON.stringify(ret));
  150.             } else {}
  151.         });
  152.     }

  153.     function userJoinedListener() {
  154.         agoraVideo.userJoinedListener({
  155.             enable: true
  156.         }, function(ret) {
  157.             console.log("加入频道监听:" + JSON.stringify(ret));
  158.             remId = ret.uid;
  159.             fnShowRemoteVideo(remId);
  160.         });
  161.     }

  162.     function muteLocalAudioStream(flag) {
  163.         agoraVideo.muteLocalAudioStream({
  164.             muted: flag
  165.         }, function(ret) {
  166.             if (ret.status) {
  167.                 console.log("禁用本地音频");
  168.             }
  169.         });
  170.     }

  171.     function enableLocalVideo(flag) {
  172.         agoraVideo.enableLocalVideo({
  173.             enabled: flag
  174.         }, function(ret) {
  175.             if (ret.status) {
  176.                 console.log("禁用本地视频");
  177.             }
  178.         });
  179.     }

  180.     // 显示远端视频
  181.     function fnShowRemoteVideo(userId) {
  182.         initVideoRect(userId, 100, 100, 300, 300);
  183.         setupRemoteVideo(userId);
  184.     }

  185.     // 显示本地视频
  186.     function fnShowLocalVideo() {
  187.         initVideoRect(userId, 0, 0, 200, 200);
  188.         setTimeout("setupLocalVideo()", 2000);
  189.     }
  190. </script>

  191. </html>
复制代码


1

查看全部评分

主题:
3
帖子:
4551
云币:
4154
发表于 2018-3-26 20:50:11 |
感谢分享

主题:
35
帖子:
184
云币:
200
发表于 2018-3-27 11:33:16 |
谢谢您的教程,不过按照上述流程,在安卓端先显示本地视窗,再显示远程视窗,还是出现本地视窗被遮挡的情况【机型小米4、华为mate8】。
尝试:
1、在本地视窗setupLocalVideo方法的回调内去开启远程视窗,依然被遮挡;
2、本地视窗setupLocalVideo打开后,添加延时后去开启远程视窗,依然被遮挡。

实习司机

UID:242898

主题:
65
帖子:
182
云币:
305
发表于 2018-4-2 16:08:02 |
在iOS上没有视频窗口出来,在android模拟器上有窗口,但是蓝色的背景框。

老司机

UID:253706

主题:
177
帖子:
16969
云币:
8001
发表于 2018-4-3 23:53:01 |
感谢分享。

实习司机

UID:253705

主题:
53
帖子:
175
云币:
494
 楼主| 发表于 2018-4-9 20:34:35 |
幽歌 发表于 2018-4-2 16:08
在iOS上没有视频窗口出来,在android模拟器上有窗口,但是蓝色的背景框。

initVideoRect 接口 的fixedOn 参数原来写的是固定值"main"
现做了改进:api.frameName

可能是这个原因吧。

主题:
62
帖子:
28246
云币:
13104
发表于 2018-5-18 19:12:23 |
initVideoRect  有fixedOn参数, 因此两个视频窗口可以分别放到两个frame上。这样本地视频窗口和远端视频窗口谁在上方,就可以完全由自己控制了。

主题:
6
帖子:
29
云币:
81
发表于 2018-5-30 20:35:59 |
好东西,先收藏了

入门司机

UID:581237

主题:
112
帖子:
412
云币:
532

端午节狗年旺旺旺

发表于 2018-6-19 16:43:08 |
我把主播二设置成观众,屏幕显示为远端并且全屏,观众手机端看到的视频好大,好模糊。就是手机屏幕放不下所显示的视频,只能显示一部分

主题:
16
帖子:
45
云币:
37
发表于 2018-8-21 15:22:53 |
谢谢分享,还需要申请appId,我说怎么init不了
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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