uniapp实现直播推拉流功能

BUG高级开发工程师
3,833 阅读4分钟

uniapp实现直播推拉流功能

uniapp 是一个基于 Vue.js 开发跨平台应用的框架，可以同时开发出 iOS 和 Android 端的原生应用，因此非常适合实现 App 端直播和开播功能。

本文将介绍使用 uniapp 实现 App 端直播和开播的具体步骤，主要包括以下内容：

  1. 集成阿里云直播 SDK
  2. 开播功能实现
  3. 直播功能实现

1. 集成阿里云直播 SDK

阿里云直播 SDK 是一套提供推流、播放、短视频等全链路直播能力的 SDK，支持多种主流平台。本篇文章以 uniapp 应用为例，演示如何在 App 中使用阿里云直播 SDK 实现直播和开播功能。

首先，你需要到阿里云官网注册账号并购买直播服务，然后前往help.aliyun.com/document_de… SDK，并将 libs 目录下的 alivc-rtc-sdk.jar 文件和 libs/armeabi-v7a 目录下的 libalivc_rtc.so 文件复制到项目的 /unpackage/build/ 目录下。

然后，在 uniapp 的 manifest.json 文件中添加阿里云直播 SDK 的相关权限：

{
  "android": {
    "permission": [
      {
        "name": "android.permission.CAMERA"
      },
      {
        "name": "android.permission.RECORD_AUDIO"
      },
      {
        "name": "android.permission.MODIFY_AUDIO_SETTINGS"
      },
      {
        "name": "android.permission.READ_PHONE_STATE"
      }
    ]
  }
}

最后，在需要使用阿里云直播 SDK 的页面中，通过 requireNativePlugin 方法引入阿里云直播模块：

const alivcRtcEngine = uni.requireNativePlugin('AliRTCEngine');

2. 开播功能实现

开播是直播功能的先决条件，主播需要在 App 中完成一些准备工作后才能开始直播，比如设置标题、选择分类等。我们可以使用 uniapp 自带的 live-pusher 组件来实现推流功能，以下是一个基于 uniapp 实现的开播功能示例代码：

<template>
  <view>
    <live-pusher ref="pusher" :style="{ width: '100%', height: '100%' }" :url="pushUrl" :mode="aspectMode" :muted="false" :orientation="orientation" :focus-mode="focusMode" :beauty="beauty"></live-pusher>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pushUrl: '',
      aspectMode: 'fill',
      orientation: 'vertical',
      focusMode: 'continuous-video',
      beauty: {
        whiteningLevel: 1,
        smoothnessLevel: 1
      }
    };
  },
  async onLoad() {
    // 获取推流地址
    const res = await uni.request({
      url: '/api/getpushurl',
      method: 'POST'
    });
    if (res.data.code === 0) {
      this.pushUrl = res.data.data.url;
      this.$refs.pusher.start();
    } else {
      uni.showToast({
        title: '获取推流地址失败，请重试'
      });
    }
  }
};
</script>

在上述示例中，我们通过向服务器发送请求获取推流地址，并在 live-pusher 组件中设置推流地址、视频填充方式、屏幕方向等相关属性，以启动推流。

需要注意的是，在页面销毁时需要调用 stop 方法停止推流，同时在 App 的 manifest.json 文件中添加权限 android.permission.CAMERA 、 android.permission.RECORD_AUDIO 和 android.permission.MODIFY_AUDIO_SETTINGS 以授予应用程序访问摄像头和麦克风的权限。

在开播成功后，我们将选择的分类和其对应的索引缓存到本地，并跳转到直播页面。这样，在用户下次开播时，我们就可以自动填充相应的分类信息。

3. 直播功能实现

直播功能分为推流和拉流两个环节。主播需要使用推流工具将视频数据推送到阿里云推流服务器，观众则可以通过播放器从阿里云拉取视频流进行观看。

推流部分的代码我们略过，这里重点介绍如何使用 uniapp 和阿里云直播 SDK 实现拉流功能。

首先，在 live.vue 页面中引入阿里云直播 SDK，创建一个 RTCEngine 对象并调用 startPreview 方法来启动摄像头预览：

import { alivcRtcEngine } from '../../utils/aliyun-live-sdk';

export default {
  async onLoad() {
    uni.showLoading({
      title: '加载中...'
    });
    try {
      // 获取推流地址和播放地址
      const res = await uni.request({
        url: '/api/getliveurl',
        method: 'POST'
      });
      if (res.data.code === 0) {
        const { pushUrl, pullUrl } = res.data.data;
        // 缓存推流地址和播放地址
        uni.setStorageSync('pushUrl', pushUrl);
        uni.setStorageSync('pullUrl', pullUrl);
        // 启动摄像头预览
        this.pushUrl = pushUrl;
        this.pullUrl = pullUrl;
        alivcRtcEngine.startPreview();
      } else {
        uni.showToast({
          title: '获取播放地址失败，请重试'
        });
      }
    } catch (e) {
      console.error(e);
      uni.showToast({
        title: '网络错误，请检查网络设置'
      });
    } finally {
      uni.hideLoading();
    }
  },
  onUnload() {
    // 停止摄像头预览
    alivcRtcEngine.stopPreview();
  }
};

在 onLoad 生命周期钩子中，我们向服务器发送请求以获取播放地址，并使用 alivcRtcEngine 对象启动摄像头预览。需要注意的是，要在页面销毁时停止摄像头预览。

接下来，在 live.vue 页面中使用 uniapp 自带的 live-player 组件来实现播放器功能：

<template>
  <view>
    <live-player :src="pullUrl" :mode="aspectMode" :muted="false" :orientation="orientation" :min-buffer-duration="1.0" :max-buffer-duration="3.0"></live-player>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pullUrl: '',
      aspectMode: 'fill',
      orientation: 'vertical'
    };
  }
};
</script>

在 live-player 组件中，我们将播放器的源地址设置为从服务器获取的播放地址，并设置一些相关属性，比如视频填充方式、屏幕方向等。

最后，我们需要在 App 的 manifest.json 文件中添加权限 android.permission.ACCESS_NETWORK_STATE ，以便于检查网络状态。

到这里我们就成功地实现了 App 端的直播和开播功能。

总结：

本文通过演示如何集成阿里云直播 SDK，以及如何使用 uniapp 实现开播和直播功能，希望能够对大家学习和使用直播技术有所帮助。需要注意的是，在实际开发中，你还需要考虑一些其他因素，比如安全性、用户体验等等，建议多多深入了解相关知识点，提升自己的技术水平。

avatar
文章
阅读
粉丝