近年来,前端开发框架层出不穷,根据 2023 年 GitHub 上全球 npm 累计下载量数据显示,React、Next、Vue、Angular 和 Preact 占据前五位[1],如下图:
![前端直播功能开发(React/Next/Vue/Angular等框架),请务必收下这篇教程](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
前 5 位框架累计下载量都超过亿次,可预见相关应用在各领域分布十分广泛。而直播或聊天做为目前大部分互联网应用的标配功能,想必前端工程师在开发中或多或少都有接触。
在直播功能开发过程中,前端工程师会面临着许多挑战和痛点。而如果有这么一个 SDK,适用于 React、Vue、Angular 等框架,并支持 PC 端和移动端浏览器(包括 WebViews),具备以下功能:
- 开箱即用的互动直播能力
- 自定义UI 界面
- 直播邀请
- 实时互动文本聊天
- 屏幕共享
- 录制
- 观众列表与管理
- 跨浏览器兼容性
- 自动断网重连
- 显示网络状态
- 可自定义品牌 LOGO
- 支持横屏
- 支持送虚拟礼物
- 连麦(连麦邀请或申请连麦)
- 多人连麦时支持混流
- ……
您是否会觉得很适用呢?关键是可无需再学习理解复杂的概念,能以标准方式处理复杂的网络和设备异常。
这个 SDK 就是即构推出的互动直播 UIKit,这是一个功能丰富、带自定义 UI 的直播场景化 SDK,它支持仅通过几行代码,即可在网页或应用中构建常见的直播功能。同时,还支持通过配置参数来自定义实现多种直播特性。
![前端直播功能开发(React/Next/Vue/Angular等框架),请务必收下这篇教程](https://www.nxrte.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
您是否会觉得很适用呢?关键是无需再学习理解复杂的概念,能以标准方式处理复杂的网络和设备异常。
下面,我们就来看看如何集成互动直播 UIKit,快速实现直播功能。
准备环境
在开始集成互动直播 UIKit 前,请确保开发环境满足以下要求:
- Windows 或 macOS 开发电脑已经连接到 Internet。
- 满足 SDK 兼容性的浏览器,推荐使用最新版本的 Google Chrome 浏览器。
前提条件
- 已在 ZEGO 控制台 创建项目,并申请有效的 AppID 和 AppSign,详情请参考 控制台 – 项目信息。
- 在ZEGO 控制台可联系技术支持,开通 UIKit 相关服务。
集成 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