投稿
  1. 首页
  2. 技术文章
  3. 实时音视频

前端直播功能开发(React/Next/Vue/Angular等框架)，请务必收下这篇教程

ZEGO即构科技 • • 实时音视频

近年来，前端开发框架层出不穷，根据 2023 年 GitHub 上全球 npm 累计下载量数据显示，React、Next、Vue、Angular 和 Preact 占据前五位[1]，如下图：

前端直播功能开发(React/Next/Vue/Angular等框架)，请务必收下这篇教程
图片来源请查看参考资料[1]

前 5 位框架累计下载量都超过亿次，可预见相关应用在各领域分布十分广泛。而直播或聊天做为目前大部分互联网应用的标配功能，想必前端工程师在开发中或多或少都有接触。

在直播功能开发过程中，前端工程师会面临着许多挑战和痛点。而如果有这么一个 SDK，适用于 React、Vue、Angular 等框架，并支持 PC 端和移动端浏览器（包括 WebViews），具备以下功能：

  • 开箱即用的互动直播能力
  • 自定义UI 界面
  • 直播邀请
  • 实时互动文本聊天
  • 屏幕共享
  • 录制
  • 观众列表与管理
  • 跨浏览器兼容性
  • 自动断网重连
  • 显示网络状态
  • 可自定义品牌 LOGO
  • 支持横屏
  • 支持送虚拟礼物
  • 连麦（连麦邀请或申请连麦）
  • 多人连麦时支持混流
  • ……

您是否会觉得很适用呢？关键是可无需再学习理解复杂的概念，能以标准方式处理复杂的网络和设备异常。

这个 SDK 就是即构推出的互动直播 UIKit，这是一个功能丰富、带自定义 UI 的直播场景化 SDK，它支持仅通过几行代码，即可在网页或应用中构建常见的直播功能。同时，还支持通过配置参数来自定义实现多种直播特性。

前端直播功能开发(React/Next/Vue/Angular等框架)，请务必收下这篇教程

您是否会觉得很适用呢？关键是无需再学习理解复杂的概念，能以标准方式处理复杂的网络和设备异常。

下面，我们就来看看如何集成互动直播 UIKit，快速实现直播功能。

准备环境

在开始集成互动直播 UIKit 前，请确保开发环境满足以下要求：

  • Windows 或 macOS 开发电脑已经连接到 Internet。
  • 满足 SDK 兼容性的浏览器，推荐使用最新版本的 Google Chrome 浏览器。

前提条件

集成 SDK

npm i @zegocloud/zego-uikit-prebuilt --save

初始化 SDK

1. 您需要生成一个 Kit Token。

注意：计划正式上线应用时，请参考此步骤生成 Kit Token。如果您想加快集成测试，可以先跳过这一步。

2. 在以下代码中将 appID 和 serverSecret 参数替换为您从 ZEGO 控制台获取的项目 AppID 和 ServerSecret。

import * as React from 'react';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default function App() {
  const roomID = getUrlParams().get('roomID') || randomID(5);
  let role_str = getUrlParams(window.location.href).get('role') || 'Host';
  const role =
    role_str === 'Host'
      ? ZegoUIKitPrebuilt.Host
      : role_str === 'Cohost'
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

  let sharedLinks = [];
  if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
    sharedLinks.push({
      name: 'Join as co-host',
      url:
        window.location.protocol + '//' + 
        window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Cohost',
    });
  }
  sharedLinks.push({
    name: 'Join as audience',
    url:
     window.location.protocol + '//' + 
     window.location.host + window.location.pathname +
      '?roomID=' +
      roomID +
      '&role=Audience',
  });
 // 生成 Kit Token
  const appID = ;
  const serverSecret = "";
  const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


  // 开始通话
  let myMeeting = async (element) => {
      // 通过 Kit Token 创建实例对象
      const zp = ZegoUIKitPrebuilt.create(kitToken);
      // 开始通话
      zp.joinRoom({
        container: element,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS,
      });
  };

  return (
    <div
      className="myCallContainer"
      ref={myMeeting}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}
// ... 一些其他逻辑代码
const { ZegoUIKitPrebuilt, ZegoUIKitLanguage } = await import("@zegocloud/zego-uikit-prebuilt");

const roomID = getUrlParams().get('roomID') || randomID(5);
let role_str = getUrlParams(window.location.href).get('role') || 'Host';
const role =
    role_str === 'Host'
      ? ZegoUIKitPrebuilt.Host
      : role_str === 'Cohost'
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

let sharedLinks = [];
if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
    sharedLinks.push({
      name: 'Join as co-host',
      url:
        window.location.protocol + '//' + 
        window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Cohost',
    });
}
sharedLinks.push({
    name: 'Join as audience',
    url:
     window.location.protocol + '//' + 
     window.location.host + window.location.pathname +
      '?roomID=' +
      roomID +
      '&role=Audience',
});
// 生成 Kit Token
const appID = ;
const serverSecret = "";
const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

// 通过 Kit Token 创建实例对象。
const zp = ZegoUIKitPrebuilt.create(kitToken);
// 开始通话
zp.joinRoom({
   container: element,
   scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
    },
    sharedLinks,
    // 设置语言为中文
    language: ZegoUIKitLanguage.CHS,
}); 
import { Component, ElementRef, ViewChild } from '@angular/core';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len:number) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('root')
  root!: ElementRef;

  ngAfterViewInit() {
    const roomID = getUrlParams().get('roomID') || randomID(5);
    let role_str = getUrlParams(window.location.href).get('role') || 'Host';
    const role =
      role_str === 'Host'
        ? ZegoUIKitPrebuilt.Host
        : role_str === 'Cohost'
        ? ZegoUIKitPrebuilt.Cohost
        : ZegoUIKitPrebuilt.Audience;

    let sharedLinks = [];
    if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
      sharedLinks.push({
        name: 'Join as co-host',
        url:
         window.location.protocol + '//' + 
         window.location.host + window.location.pathname +
          '?roomID=' +
          roomID +
          '&role=Cohost',
      });
    }
    sharedLinks.push({
      name: 'Join as audience',
      url:
       window.location.protocol + '//' + 
       window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Audience',
    });
   // 生成 Kit Token
   const appID = ;
   const serverSecret = "";
   const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));


   // 通过 Kit Token 创建实例对象
  const zp = ZegoUIKitPrebuilt.create(kitToken);
  // start the call
  zp.joinRoom({
        container: this.root.nativeElement,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS,
   });
  }
}
<template>
  <div id="app" ref="root"></div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import { ZegoUIKitPrebuilt, ZegoUIKitLanguage } from '@zegocloud/zego-uikit-prebuilt';

function randomID(len) {
  let result = '';
  if (result) return result;
  var chars = '12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP',
    maxPos = chars.length,
    i;
  len = len || 5;
  for (i = 0; i < len; i++) {
    result += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return result;
}

export function getUrlParams(
  url = window.location.href
) {
  let urlStr = url.split('?')[1];
  return new URLSearchParams(urlStr);
}

export default {
  name: 'App',
  components: {},
  mounted() {
    const roomID = getUrlParams().get('roomID') || randomID(5);
    let role_str = getUrlParams(window.location.href).get('role') || 'Host';
    const role =
    role_str === 'Host'
      ? ZegoUIKitPrebuilt.Host
      : role_str === 'Cohost'
      ? ZegoUIKitPrebuilt.Cohost
      : ZegoUIKitPrebuilt.Audience;

    let sharedLinks = [];
   if (role === ZegoUIKitPrebuilt.Host || role === ZegoUIKitPrebuilt.Cohost) {
     sharedLinks.push({
       name: 'Join as co-host',
       url:
        window.location.protocol + '//' + 
        window.location.host + window.location.pathname +
        '?roomID=' +
        roomID +
        '&role=Cohost',
     });
   }
   sharedLinks.push({
    name: 'Join as audience',
    url:
      window.location.protocol + '//' +
      window.location.host + window.location.pathname +
      '?roomID=' +
      roomID +
      '&role=Audience',
    });  
   // 生成 Kit Token
   const appID = ;
   const serverSecret = "";
   const kitToken =  ZegoUIKitPrebuilt.generateKitTokenForTest(appID, serverSecret, roomID,  randomID(5),  randomID(5));

  // 通过 Kit Token 创建实例对象
  const zp = ZegoUIKitPrebuilt.create(kitToken);
  // 开始通话
  zp.joinRoom({
        container: this.$refs.root,
        scenario: {
          mode: ZegoUIKitPrebuilt.LiveStreaming,
          config: {
            role,
          },
        },
        sharedLinks,
        // 设置语言为中文
        language: ZegoUIKitLanguage.CHS,
   });
  },
};
</script>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>

获取完整代码，请查看以下链接：

  • React：https://stackblitz.com/edit/zegocloud-prebuilt-live-react-ts
  • Angular：https://stackblitz.com/edit/zegocloud-prebuilt-live-angular
  • Vue：https://stackblitz.com/edit/zegocloud-prebuilt-live-vue

另外，互动直播 UIKit 全部由 JavaScript 编写，并获得 Web 浏览器的原生支持，因此如果您使用的是 JQuery、PHP 或 JSP，可以参考 文章 开始接入。

参考资料：[1] https://juejin.cn/post/7330556947417546767

本文为原创稿件，版权归作者所有，如需转载，请注明出处：https://www.nxrte.com/jishu/yinshipin/49518.html

赞 (1)
ZEGO即构科技的头像ZEGO即构科技认证作者
0 0

相关推荐

发表回复

登录后才能评论