简介⭐️

我想为未来的流媒体和其他有趣的实验构建一个快速简单的Amazon IVS视频播放器移动应用程序。这是一系列教程的第一部分,我将在其中扩展此应用程序的功能!。

构建原生移动应用程序可以是初学者友好和愉快的体验!出于这个原因,我选择了Ionic作为我选择的框架,因为它的简单性与Vue JS(一个友好的 JavaScript 框架)相结合。

等等,但是视频部分呢? 🤔

为了继续保持简单、开发人员友好和平易近人,让我们看一下 AWS 提供的一项新服务:Amazon Interactive Video Service或 IVS。它是一种托管的实时视频流服务,使我们能够:

• 创建频道并在几分钟内开始流式传输。

• 创造引人入胜的互动体验以及超低延迟的实时视频。

• 将视频大规模分发到各种设备和平台。

• 轻松集成到网站和应用程序中。

Amazon IVS 让我们能够专注于创建自己的交互式应用程序和受众体验,我们不需要管理基础设施或开发和配置组件,使其可靠且具有成本效益。

Amazon IVS 支持 RTMPS 流媒体。 RTMPS 是通过 TLS 运行的 RTMP(实时消息传递协议)的安全版本。 RTMP 是通过网络传输视频的行业标准。

所以我们正在使用 Ionic-Vue + Amazon IVS 来创建一个移动播放器应用程序!

教程回购:https://github.com/alphacentauri82/ivs-ionic-vue

抽搐流:https://www.youtube.com/watch?vu003dCeKTr83LmiY

---

让我们开始吧🎵

⚡️ 先决条件:

• NodeJS + NPM:Ionic 对设置/安装有惊人的说明

• 离子 CLI

• 亚马逊 IVS

• 视频JS

---

安装离子 CLI

使用 npm 安装 Ionic CLI:

npm install -g @ionic/cli

进入全屏模式 退出全屏模式

如果之前安装了 Ionic CLI,则由于包名称的更改需要将其卸载。

npm uninstall -g ionic
npm install -g @ionic/cli

进入全屏模式 退出全屏模式

创建我们的应用程序

确保您位于该项目所需的文件夹中,然后运行:

ionic start hello-ivs tabs --type vue --capacitor

进入全屏模式 退出全屏模式

将创建一个 Ionic-Vue 应用程序。请注意,我们使用标志tabs来使用带有“Tabs”的入门模板。我们还添加了电容器以提供本机功能。

这个入门项目带有三个预先设计的页面和 Ionic 开发的最佳实践 - 通过已经实现的通用构建块,我们可以轻松添加更多功能!

随着此过程的继续,系统将询问您是否要创建一个 Ionic 帐户,如果您输入“Y + Enter”,它将带您到https://ionicframework.com/signup,如果您输入“No +输入”它将顺利地继续其过程。

现在项目已经创建,让我们进入我们的项目文件夹:

cd hello-ivs

进入全屏模式 退出全屏模式

🎊 ...是时候庆祝我们的第一个成就了!我们有一个完整的入门应用程序可以添加我们的播放器! 🎊

动手! 🛠

打开您选择的 IDE/编辑器,您应该会看到以下结构:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--hCUHoyLf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/5hpwkn38432g2uiugdd1.png)

让我们转到/src文件夹:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--98RnNOlt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/7rh1uqzy7eqwiwg2ff2f.png)

有4个文件夹和3个文件。让我们来看看我们所看到的:

• 组件: 这是我们组件的存储位置,它将为我们创建子组件提供服务,我们将在其中拥有视频播放器。

• Router: 定义我们应用的具体路由。

• 主题: 这是我们定义所有样式和应用程序外观的地方。

• Views: 这是我们构建应用程序视图的地方。

---

让我们 cd 到默认组件:

cd src/components/ExploreContainer.vue 

进入全屏模式 退出全屏模式

并删除第 4 行 - 让我们将其替换为

<p>Hello IVS!</p>

进入全屏模式 退出全屏模式

是时候看看我们的“Hello IVS”应用程序并确保一切正常,让我们开始吧”

ionic serve

进入全屏模式 退出全屏模式

构建需要几秒钟,然后我们可以看到网络预览。我们可以调整它的大小以在浏览器中模拟不同的移动设备:

网页预览

[](https://res.cloudinary.com/practicaldev/image/fetch/s--SsLzt8jD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/sejl2b1wvij4uobe1x9n.png)

手机

[](https://res.cloudinary.com/practicaldev/image/fetch/s--OzbASdqk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/67bh8gbyj4qxrgz0h7n2.png)

---

由于我们在应用程序的第一个版本中不需要选项卡,我们将删除另外两个并暂时保留一个选项卡。

为此,我们需要在/views文件夹中编辑Tabs.vue,并在<template>块中,从第 10 行到第 18 行删除,只留下一个选项卡,如下所示:

<template>
  <ion-page>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

进入全屏模式 退出全屏模式

让我们保存我们的文件,我们的应用程序将重新加载显示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--UTGD4FKi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/zepeo3mcljd3k6euxzxe.png)

将视频添加到我们的应用程序🎥

停止印刷机!让我们在终端中点击ctrl + c。我们必须安装一些依赖项才能继续开发我们的项目。

首先,让我们安装 VideoJS。在制作本教程时,为了确保它适用于 Amazon IVS,我们需要安装版本 7.6.6:

npm i video.js@7.6.6

进入全屏模式 退出全屏模式

然后继续安装 Amazon IVS

npm i amazon-ivs-player

进入全屏模式 退出全屏模式

创建视频播放器🔥

让我们编辑位于src/components文件夹中的ExploreContainer组件。

• 让我们导入我们的依赖项。我们在<script>块中执行此操作,但首先删除lang="ts",因为我们不会使用 Typescript。从第 8 行开始,它应该如下所示:

<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';

进入全屏模式 退出全屏模式

为了让事情更加一致,让我们将默认的ExploreContainer组件重命名为VideoPlayer,编辑第 13 行,脚本标记应如下所示:

<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: {
    name: String
  }
}
</script>

进入全屏模式 退出全屏模式

首先,我们还必须将文件重命名为VidePlayer.vue,然后继续修改我们的父组件Tab1.vue并添加正确的名称。为此,我们编辑src/views/Tab1.vue。我们的文件应如下所示:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Live Stream</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Live Stream</ion-title>
        </ion-toolbar>
      </ion-header>
      <VideoPlayer />
    </ion-content>
  </ion-page>
</template>

<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import VideoPlayer from '@/components/VideoPlayer.vue';
export default  {
  name: 'LiveStream',
  props: {
    autoplay: Boolean
  },
  components: { VideoPlayer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

进入全屏模式 退出全屏模式

现在让我们前往router文件夹并在index.ts中删除定义我们不再需要的选项卡路由的行。所以文件应该是这样的:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Tabs from '../views/Tabs.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

进入全屏模式 退出全屏模式

现在我们可以添加我们的数据,以便在src/components/VideoPlayer.vue中有效地使用 Amazon IVS,第 13 行的文件应该如下所示:

export default {
    name: 'VideoPlayer',
    props: {
      name: String
    },
    data: () => ({
      player: null,
      videoSource: process.env.VUE_APP_PLAYER_URL,
      videoOptions: {
        autoplay: true,
        controls: true,
        techOrder: ["AmazonIVS"],
        width: "800"
      },
    }),

进入全屏模式 退出全屏模式

让我们停下来解释一些事情:

• player:将存储 video.js 属性以使用 Amazon IVS 对象的变量。

• videoSource:这是允许我们连接到测试流的环境变量。在这种情况下,我们将传递一个播放器 URL。

• videoOptions:这是我们将用来控制 Amazon IVS 技术层的对象。

---

定义数据后,我们将在 Vue 中跟踪组件的生命周期,我们将在所有元素加载后使用mounted()挂钩启动它。

mounted() {
    // register the tech with videojs
    console.log(`wasmWorker: ${this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js')}`)

    registerIVSTech(videojs,  {
      wasmWorker: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js'),
      wasmBinary: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.wasm'),
    });

    // Init the player
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
      console.log('Player is ready to use!');
      // play the stream
      this.player.src(this.videoSource);
    })
  },

进入全屏模式 退出全屏模式

• registerIVSTech:是我们声明消费Amazon IVS服务的对象。

• Videojs:是Video.js提供的对象。

• options:Amazon IVS 技术层的选项。

支持的选项有:

• wasmWorker:amazon-ivs-wasmworker.min.js 所在的 URL。

• wasmBinary:amazon-ivs-wasmworker.min.wasms 所在的 URL。

这些文件位于node_modules/amazon-ivs-player/dist/。我们需要将它们复制并粘贴到public/assets文件夹中才能使用IVS播放器。

---

然后我们使用beforeUnmount钩子来获得一个条件,允许我们显示播放器实例是否正在被消耗,或者如果没有实例被销毁。

beforeUnmount() {
    // Destroy the player instance
    if(this.player) {
      this.player.dispose();
    }
  },

  methods: {
    createAbsolutePath(assetPath) {
      console.log( document.URL );
      return new URL(assetPath, document.URL).toString();
    },
  }

进入全屏模式 退出全屏模式

createAbsolutePath方法允许我们创建一个特定的路径,通过这个方法我们可以消费存储在public/assets中的文件。

让我们创建我们的容器并引用VideoPlayer以便能够像这样使用 video.js 接收视频。让我们回到文件的开头,在<template>块中并替换<div>中包含的所有内容,如下所示:

<template>
  <div id="container">
    <video ref="videoPlayer" class="video-js"></video>   
  </div>
</template>

进入全屏模式 退出全屏模式

然后给它造型! - 让我们在第 61 行编辑样式块:

<style scoped>
#container {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>

进入全屏模式 退出全屏模式

最后让我们创建一个.env(dot env) 文件并将其保存在项目的根文件夹中,并包含以下信息。(现在,我们将传递来自Amazon IVS 演示中的一个示例播放器的播放器 URL存储库。

VUE_APP_PLAYER_URL='https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'

进入全屏模式 退出全屏模式

---

🎉 庆祝🎉

让我们保存我们的工作并运行:

ionic serve

进入全屏模式 退出全屏模式

您应该会看到与此类似的结果:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--6j9u6f-Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/nk8biu30tchilepkwi5y.png)

我们将继续在同一应用程序中开发更多功能,敬请期待!