澳门新葡亰xpj88 1

1.2 步骤

搭建一个直播 App ,只需要 5
个步骤:

澳门新葡亰xpj88 2

  1. 部署视频源

  2. 集成 ijkplayer

  3. 搭建 UI

  4. 集成云巴 SDK

  5. 澳门新葡亰xpj88:只需四个步骤几行代码,利用第三方推送实现APP伪保活。横屏实现弹幕

1.新建项目

以云巴SDK里面自带Demo为例,SDK下载澳门新葡亰xpj88:只需四个步骤几行代码,利用第三方推送实现APP伪保活。。

澳门新葡亰xpj88:只需四个步骤几行代码,利用第三方推送实现APP伪保活。 

3 测试 Demo

当跑完上面所有的程序之后,我们来测试一下
Demo。

澳门新葡亰xpj88 3

我们在底部文字栏内键入“ Hello Yunba~
”,可以看到弹幕实时地在视频播放器内从右至左滚动显示。此外,界面内还可以实时显示
在线人数 和 点赞数 等,基本满足了聊天室的通用功能。

如果你想获取更多的信息,可点击
链接
进行查看。

此文只是讲述如何使用云巴自带的包实现该功能,核心技术并不是博主写的。此功能实现首先实现基础的推送,没有实现的请看SDK快速入门,实现了的可以直接去官方文档怎么集成第三方,云巴文档传送门,那我为什么要写这篇博文,我是不会和你讲的,进入正题:

打开网址(),或直接搜索“云巴”,进行注册并登录。

2.3.2 集成云巴 SDK

接下来,我们需要处理聊天室和弹幕需要的业务支撑。

在众多提供此类服务的第三方中,我们选择使用
云巴 的 SDK 。基于 MQTT,采用 Erlang/OTP
架构设计的云巴实时通信云服务,是一个 Pub/Sub
模型的双向实时系统,通过透明传输,可为直播平台实现所有的实时消息传输。

接着,我们来集成云巴的 SDK。

我们登录云巴的网站
进行注册并登录。(图12)

澳门新葡亰xpj88 4

登录后,点击侧栏 “应用管理”
,再点击“创建应用”,填写应用名以及包名。(图13)

澳门新葡亰xpj88 5

创建后,我们可以从 “应用列表”→“管理”→“应用详情”
内,看到该应用的 AppKey ,我们将它复制下来。

接下来,我们来集成云巴的
SDK,点击 下载。

我们将下载的 SDK
解压并添加到项目中,并添加相应的依赖库 (图14、图15)

澳门新葡亰xpj88 6

澳门新葡亰xpj88 7

在 appDelegate 的  application
didFinishLaunchingWithOptions  中加入如下代码,并将  String!  替换成刚才复制的 AppKey :

YunBaService.setup(withAppkey: String!)

集成就完成了。

3.第三方推送开发设置

导包

澳门新葡亰xpj88 8

小米

,怎么导包不用讲了吧,打开你的project文件夹,打开app文件夹,打开app文件夹,打开libs文件夹,把前面的包复制进去,我说的不是这张图片,是这张图片代表的包,压缩包。然后

澳门新葡亰xpj88 9

依赖

会了吧!

设置 AndroidManifest.xml
(1) 在<manifest>……</manifest>中添加以下代码来添加
permission,注意app包名要替换成自己的包名:

<!--这里com.xiaomi.mipushdemo改成app的包名-->
<permission android:name="com.xiaomi.mipushdemo.permission.MIPUSH_RECEIVE" android:protectionLevel="signature" />
<!--这里com.xiaomi.mipushdemo改成app的包名-->
<uses-permission android:name="com.xiaomi.mipushdemo.permission.MIPUSH_RECEIVE" />

(2) 在<application>……</application>中添加以下代码来添加
service 和 receiver:

<service
    android:name="com.xiaomi.push.service.XMJobService"
    android:enabled="true"
    android:exported="false"
    android:permission="android.permission.BIND_JOB_SERVICE"
    android:process=":pushservice" />
<service
    android:name="com.xiaomi.push.service.XMPushService"
    android:enabled="true"
    android:process=":pushservice" />
<service
    android:name="com.xiaomi.mipush.sdk.PushMessageHandler"
    android:enabled="true"
    android:exported="true" />
<service
    android:name="com.xiaomi.mipush.sdk.MessageHandleService"
    android:enabled="true" />
<receiver
    android:name="io.yunba.android.thirdparty.receiver.ThirdPartyXMReceiver"
    android:exported="true">
    <intent-filter>
        <action android:name="com.xiaomi.mipush.RECEIVE_MESSAGE" />
    </intent-filter>
    <intent-filter>
        <action android:name="com.xiaomi.mipush.MESSAGE_ARRIVED" />
    </intent-filter>
    <intent-filter>
        <action android:name="com.xiaomi.mipush.ERROR" />
    </intent-filter>
</receiver>
<receiver
    android:name="com.xiaomi.push.service.receivers.NetworkStatusReceiver"
    android:exported="true">
    <intent-filter>
        <action android:name="android.net.conn.CONNECTIVITY_CHANGE" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</receiver>
<receiver
    android:name="com.xiaomi.push.service.receivers.PingReceiver"
    android:exported="false"
    android:process=":pushservice">
    <intent-filter>
        <action android:name="com.xiaomi.push.PING_TIMER" />
    </intent-filter>
</receiver>

初始化设置
要启用第三方推送,要在初始化云巴服务之前调用这个
API:YunBaManager.setThirdPartyEnable(getApplicationContext(), true)。,初始化服务前是什么时候呢,反正你加在MainActivity的onCreate()方法的setContentView(R.layout.activity_main)方法下就好了。一共要加三串代码哦

YunBaManager.setThirdPartyEnable(getApplicationContext(), true);
YunBaManager.setXMRegister(<your_xiaomi_appid>,<your_xiaomi_appkey>);
YunBaManager.start(getApplicationContext());

<your_xiaomi_appid><your_xiaomi_appkey>替换成前面我讲的要用到的,id是19位,key是13位(注意这里的id和key是小米推送里面的,不要和应用的搞混了!搞混了报错appid为空哦,不要问我怎么知道的)

到这里,用户端的设置就好了,下面介绍如何推送。

 澳门新葡亰xpj88 10

2.2.2 代码

我们在 ViewController
中加上代码:

var player: IJKFFMoviePlayerController!

接下来,我们在 ViewController 的 viewDidLoad 中添加如下代码:

let options = IJKFFOptions.byDefault()
let url = URL(string: "rtmp://live.lettuceroot.com/yunba/live-demo")

player = IJKFFMoviePlayerController(contentURL: url, with: options)

let autoresize = UIViewAutoresizing.flexibleWidth.rawValue |
  UIViewAutoresizing.flexibleHeight.rawValue

player.view.autoresizingMask = UIViewAutoresizing(rawValue: autoresize)

player.scalingMode = .aspectFit
player.shouldAutoplay = true

view.autoresizesSubviews = true
view.addSubview(player.view)

最后再在 viewWillAppear 中添加:

player.prepareToPlay()

我们运行模拟器,就可以看到视频了。(图4)

澳门新葡亰xpj88 11

因为代码中已经添加了屏幕适应,当我们旋转模拟器时,就能看到视频自动地适应了屏幕。

2.创建第三方应用

跟着图片顺序走啊

澳门新葡亰xpj88 12

创建第三方应用1

澳门新葡亰xpj88 13

创建第三方应用2

澳门新葡亰xpj88 14

创建第三方应用3

//这步创建的时候可能会出现包名存在的问题,可是包名你又不能改变啊,不要问我怎么解决,就一直点吧,直到创建成成功。(小米的就选小米,华为的选华为,两个都选我也不能拿你怎么样)这里的AppId,AppKey,AppSecret是要用到的,记住,不要问我为什么要强调下,我是不会和你讲的

澳门新葡亰xpj88 15

创建第三方应用4

 

现今,直播市场热火朝天,不少人喜欢在手机端安装各类直播
App,便于随时随地观看直播或者自己当主播。作为开发者来说,搭建一个稳定性强、延迟率低、可用性强的直播平台,需要考虑到部署视频源、搭建聊天室、优化界面等难题,具备一定的难度与挑战!

4.发送推送消息

想发送这么高级的消息当然不是官方文应用管理里面pulish,pulish2那里频道填一下,消息内容填一下,点个发送那么简单,我用的post,json实现的,测试连接
post目标地址

http://rest.yunba.io:8080

json参数:

{"method":"publish", "appkey":"这里的是你应用的appkey", "seckey":"让你记住的第三个参数", "topic":"你的频道名","opts":{"time_to_live":20000,"third_party_push": {"notification_title":"显示的title", "notification_content":"显示的内容"}}, "msg":"要用到的内容"}

OK,你实现了APP杀掉后仍能接受消息的功能,别在保活了,让android平台健康快乐的生活
[笑哭]

步骤二:在云巴 Portal 创建应用

登录后,点击侧栏 “应用管理”
,再点击“创建应用”,填写您的视频直播应用的名称、应用包名等内容。

如图所示:

 澳门新葡亰xpj88 16

 

创建后,您会在“应用列表”→“管理”→“应用详情”内,看到该应用的 AppKey 和
SecretKey 等信息。

 

步骤三:下载云巴 Javascript SDK

在云巴官网()顶菜单栏“开发者资源”→“SDK下载”,或在云巴的
Github 页面()找到 Javascript SDK 并下载。

 

步骤四:集成 Javascript SDK

将 Javascript SDK 集成到你的应用中,此处会用到 Appkey。

 

1.引入 Javascript SDK

由于 Yunba JavaScript SDK 依赖于 Socket.IO,所以要确保 Socket.IO
先被引入:

<script type="text/javascript" src="javascripts/socket.io-1.3.5.min.js"></script>
<script type="text/javascript" src="../yunba-js-sdk.js"></script>

 

2.创建云巴实例

使用在云巴
Portal 上创建应用获取的
AppKey 创建 Yunba
实例。

window.yunba = new Yunba({
  server: 'sock.yunba.io',
  port: 3000,
  appkey: APPKEY // 这里是您在 “第二步” 中获取到的 AppKey。
});

 

3. 初始化并连接消息服务器、订阅 “弹幕”
频道

假设弹幕的频道名称为  TOPIC_BULLET :

yunba.init(function(success) {
  if (success) {
    var cid = Math.random().toString().substr(2);

    // 连接云巴服务器
    yunba.connect_by_customid(cid,
      function(success, msg, sessionid) {
        if (success) {
          console.log('sessionid:' + sessionid);

          // 设置收到信息回调函数
          yunba.set_message_cb(yunba_msg_cb);

            // 订阅弹幕 TOPIC
            yunba.subscribe({
                'topic': TOPIC_BULLET
              },
              function(success, msg) {
                if (success) {
                  console.log('subscribed');
                } else {
                  console.log(msg);
                }
            });
        } else {
          console.log(msg);
        }
      });
  } else {
    console.log('yunba init failed');
  }
});

2.3.1 搭建 UI

当然,这里只有视频是不够的,我们还需要弹幕。

竖屏状态下,因为视频以 16:9
的比例适应屏幕,没有足够的空间显示弹幕,所以我们做了一个类似聊天室的页面。

我们以播放视频的 View
举例,搭建一个直播 UI。我们打开 main.storyboard 。

我们先将一个 View 放在 Controller
的上边,设置背景为黑色。 (图5、图6)

澳门新葡亰xpj88 17

 

澳门新葡亰xpj88 18

按住 shift 右键拖拽到父 View ,添加如下约束,点击 Add Constraints。
(图7)

澳门新葡亰xpj88 19

接着我们将比例设置成 16:9 ,设置高度为长度 × 9 / 16 并勾选 Aspect
Ratio,点击 Add Constraints。(图8)

澳门新葡亰xpj88 20

然后通过右键拖拽的方式添加 outlet 到 ViewController。 (图9)

澳门新葡亰xpj88 21

同理,可搭建界面的其他元素,最终我们得到类似下面的界面。(图10)

澳门新葡亰xpj88 22

(注意,这里我们将 view.addSubview 改成了
 playerView.addSubview  并添加了
 autolayout  。)

我们再次运行,发现播放窗口集中在
playerView 上了。(图11)

澳门新葡亰xpj88 23

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图