Facebook 直播和广告

Cocos Creator 从 v2.0.6 开始支持一键集成 Facebook 服务,包括 Facebook Live VideoFacebook Audience Network。这两个 SDK 目前支持 Android 和 iOS 平台。

Creator 为用户完成的主要工作

  • 在 Cocos Creator 项目设置面板中提供一键式集成 Facebook Live Video 和 Facebook Audience Network,并且自动进行了初始化,用户能直接调用相关的 API

用户需要完成的工作

  • 调用 Facebook Live Video 和 Facebook Audience Network 的 API,访问相关功能

Facebook 服务集成操作步骤

一、使用 Cocos Creator 打开项目工程,点击 菜单栏 -> 项目 -> 项目设置 -> 服务,在 服务 面板中有一个 Facebook 服务

Facebook 直播和广告 - 图1

选中 Facebook 服务,可以看到下方有三个选项,分别为:

  • AppID:在 Facebook 开发者后台我的应用 中创建一款新应用(或者之前创建过的旧应用也可以)。创建完成后上方的 应用编号 即是 AppID。
  • Facebook Live Video:将 Facebook Live Video 集成到项目工程中
  • Facebook Audience Network:将 Facebook Audience Network 集成到项目工程中

二、在 项目设置 -> 服务 中设置好需要集成的 SDK 后,打开 构建发布 面板,发布平台 选择 Android/iOS 平台。Android 平台的 API Level 选择 android-26 或以上。其他参数用户可根据需要自行配置。配置完成后点击 构建

构建 iOS 平台时有以下两点注意事项

  • 构建之前 需要先下载 Facebook 服务相关的依赖,在命令行中执行以下命令。具体可参考 CocoaPods 官方网站

    1. # Xcode 8 + 9
    2. $ sudo gem install cocoapods

    若运行该命令时出现如下报错:

    1. ERROR: Could not find a valid gem 'cocoapods' (>= 0), here is why:
    2. Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv2/v3 read server hello A: tlsv1 alert protocol version (https://rubygems.org/latest_specs.4.8.gz)

    可运行以下命令解决:

    1. $ gem source -r https://rubygems.org/
    2. $ gem source -a http://rubygems.org/
    3. $ sudo gem install cocoapods
  • 若点击 构建 之后,构建失败并且在 控制台 出现 exec pod install fail with exit code 的报错,可在 设置 面板的 常规 -> HTTP 代理服务器 中设置 HTTP 代理(用于下载 Facebook 的 SDK)。

    若设置完 HTTP 代理之后仍然构建失败,请尝试执行以下步骤:

    1. # 国内用户需要保证在命令行中执行的命令能启用墙外代理
    2. # 将命令行指定到项目的 /build/jsb-link/frameworks/runtime-src/proj.ios_mac 目录下
    3. $ cd /YourProject/build/jsb-link/frameworks/runtime-src/proj.ios_mac
    4. $ pod install

    执行完毕之后可以在 proj.ios_mac 目录下看到生成了 .xcworkspace 文件,即可直接使用 Xcode 打开进行编译。

三、构建完成后在发布包目录的 src 目录下可以看到生成了 fb-live-stream.jsCCAds.js 两个文件,分别对应的是 Creator 完成的对 Facebook Live VideoFacebook Audience Network 的封装。

Facebook 直播和广告 - 图2

注意

  • 首次编译 Android 平台需要用 Android Studio 打开构建后的工程以下载 Facebook 所需的支持包(如果下载失败的话建议切换网络或者设置一下 Android Studio 的 HTTP 代理)。且 Android Phone 需要在 6.0 或以上版本。
  • 在使用 Xcode 编译 iOS 平台的时候需要打开的是 .xcworkspace 文件而不是 .xcodeproj 文件。且 iOS 设备需要在 11 或以上版本。

Facebook 直播和广告 - 图3

调用相关 API

Facebook Live Video

可以通过 fb.liveStream 模块去访问 Facebook Live Video:

  • fb.liveStream.startLive();:开始播放
  • fb.liveStream.stopLive();:停止播放
  • fb.liveStream.pauseLive();:暂停播放
  • fb.liveStream.resumeLive();:恢复播放

具体的使用方式可参考 范例工程 中的 /assets/script/live_scene.js 文件。

Facebook Audience Network

Facebook Audience Network 分别有以下三种:

  • cc.Ads.Banner:弹出 banner 广告
  • cc.Ads.RewardedVideo:弹出奖励视频窗口广告
  • cc.Ads.Interstitial:弹出插屏广告

以弹出 banner 广告 cc.Ads.Banner 为例,用户可以通过创建一个新的 cc.Ads.Banner 对象的实例,然后根据自己的需要去调用。示例代码如下:

  1. banner_click(event){
  2. let banner = new cc.Ads.Banner(this.placementId.BANNER, cc.Ads.BANNER_POSITION.ALIGN_PARENT_BOTTOM);
  3. this.banner = banner;
  4. banner.on("onAdLoaded", () => {
  5. cc.log("banner onAdLoaded");
  6. this.status_tips.string = "banner loaded";
  7. }, this.node);
  8. banner.on("onError", (eCode) => {
  9. cc.log("banner onError");
  10. this.status_tips.string = "banner onError";
  11. }, this.node);
  12. banner.on("onAdClicked", () => {
  13. cc.log("banner onAdClicked");
  14. this.status_tips.string = "banner onAdClicked";
  15. }, this.node);
  16. banner.show().then(() => {
  17. cc.log("banner show-------");
  18. }).catch((e) => {
  19. cc.log("banner reject ", e);
  20. });
  21. },

cc.Ads.RewardedVideocc.Ads.Interstitial 的调用方式与 cc.Ads.Banner 类似,具体可以参考 范例工程 中的 /assets/script/an_scene.js 文件。或者参考 Facebook 官方文档 Audience Network

相关参考链接