Vue直播怎么做?
Vue.js 是一个流行的前端JavaScript框架,本身并不提供直播功能,但可以通过集成一些第三方直播服务或库来实现。比如:
1. 使用第三方直播API 或 SDK
- 使用现有的直播平台,把它们的API接口将直播流集成到Vue应用中。
- 音视频服务商提供的SDK,可以在Vue应用中直接使用这些SDK来实现直播功能。
2. 集成WebRTC:
WebRTC 是已经非常成熟的 Web 实时通信技术,它允许浏览器之间直接进行视频、音频和数据分享,无需安装插件。可以通过 Vue 集成 WebRTC 实现直播功能。
3. 构建自己的直播服务:
如果有足够的资源和技术能力,可以自己搭建直播服务端,使用FFmpeg等工具进行流媒体处理。前端使用Vue.js结合各类直播协议等技术来播放直播流。
或可以使用Vue生态中的其他工具或库,比如Nuxt.js,来帮助实现服务端渲染(SSR)或其他有助于直播的功能。
当然,在选择直播实现方式时,需要考虑直播的稳定性、延迟、互动性、以及用户体验等因素。
目前使用最多的方式是集成第三方直播 SDK来实现,无需重复造轮子。本文分享的内容就是通过集成即构互动直播 UIKit 来快速在 Vue 应用内实现直播功能。
什么是互动直播 UIKit?
互动直播 UIKit(Live Streaming Kit) 是即构开发的一个功能丰富、带自定义 UI 的直播场景化 SDK,它支持仅通过几行代码,即可在网页或应用中构建常见的直播功能。同时,还支持通过配置参数来自定义实现多种直播特性。
互动直播 UIKit 适用于 Web 工程框架,并支持 PC 端和移动端浏览器(包括 WebViews)。 如果您使用的是 React、Vue、Angular 等框架,可以参考以下教程。
如何集成互动直播 UIKit 实现 Vue 直播
准备环境
在开始集成互动直播 UIKit 前,请确保开发环境满足以下要求:
- Windows 或 macOS 开发电脑已经连接到 Internet。
- 满足 ZEGO Express Web 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
参数替换为您从管理控制台获取的项目 AppID 和 ServerSecret。
<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>
完整代码:https://stackblitz.com/edit/zegocloud-prebuilt-live-vue?file=src%2FApp.vue
完整参数示例
部分功能支持自定义调整参数。以下是完整参数示例:
declare interface ZegoCloudRoomConfig {
// 1 UI控件
// 1.1 全局
container?: HTMLElement | undefined | null; // 组件容器。
maxUsers?: number; // 通话参与人数范围为 [2-20]。默认值为无限制。
scenario?: {
mode?: ScenarioModel; // 场景选择。
config?: ScenarioConfig[ScenarioModel]; // 相应场景的具体配置。
};
console?: ConsoleLevel; // 用于问题定位,不是常规设置。设置此项可以决定要打印的日志的严重程度。
screenSharingConfig?: {
resolution?: ScreenSharingResolution;
width?: number;
height?: number;
frameRate?: number;
maxBitRate?: number;
onError?: (errorCode: number) => string | undefined // 屏幕共享失败回调,若需要自定义提示文本可根据错误码返回对应字符串,若需要自定义 UI 则返回空字符串。
}; // 屏幕共享设置,分辨率设置
language?: ZegoUIKitLanguage; // 设置 UIKit 语言
// 1.2 加入前页面
showPreJoinView?: boolean; // 是否显示加入前页面。默认显示。
preJoinViewConfig?: {
title?: string; // 加入前页面的标题。默认为“进入房间”。
};
turnOnMicrophoneWhenJoining?: boolean; // 加入通话时是否开启麦克风。默认开启。
turnOnCameraWhenJoining?: boolean; // 加入通话时是否开启摄像头。默认开启。
useFrontFacingCamera?: boolean; // 加入房间时是否使用前置摄像头。默认使用前置摄像头。
videoResolutionDefault?: VideoResolution; // 默认视频分辨率。
enableStereo?: boolean; // 是否开启立体声模式。默认关闭。
// 1.3 房间页面
// 您可以使用此按钮关闭其他参与者的摄像头。
showTurnOffRemoteCameraButton?: boolean; // 是否显示关闭远程摄像头的按钮。默认不显示。
// 您可以使用此按钮静音其他参与者的麦克风。
showTurnOffRemoteMicrophoneButton?: boolean; // 是否显示关闭远程麦克风的按钮。默认不显示。
showMyCameraToggleButton?: boolean; // 是否显示切换我的摄像头的按钮。默认显示。
showMyMicrophoneToggleButton?: boolean; // 是否显示切换我的麦克风的按钮。默认显示。
showAudioVideoSettingsButton?: boolean; // 是否显示音视频设置的按钮。默认显示。
showTextChat?: boolean; // 是否显示右侧的文本聊天。默认显示。
showUserList?: boolean; // 是否显示参与者列表。默认显示。
showRemoveUserButton?: boolean; // 是否显示移除参与者的按钮。默认不显示。
lowerLeftNotification?: {
showUserJoinAndLeave?: boolean; // 是否在左下角显示参与者加入和离开的通知。默认显示。
showTextChat?: boolean; // 是否在左下角显示最新的消息。默认显示。
};
branding?: {
logoURL?: string; // 品牌LOGO的URL。
};
layout?: "Sidebar" | "Grid" | "Auto"; // 布局模式。默认使用自动模式。
showLayoutButton?: boolean; // 是否显示切换布局的按钮。默认显示。
showNonVideoUser?: boolean; // 是否显示无视频的参与者。默认显示。
showOnlyAudioUser?: boolean; // 是否显示仅音频参与者。默认显示。
sharedLinks?: {
name?: string;
url?: string }[]; // 生成的共享链接的描述。
showScreenSharingButton?: boolean; // 是否显示屏幕共享按钮。默认显示。
showPinButton?: boolean; // 是否显示固定按钮。默认显示。
whiteboardConfig?: {
showAddImageButton?: boolean; // 默认为 false。要使用此功能,请激活文件共享功能,然后导入插件。否则,将出现此提示:“添加图像失败,不支持此功能。”
showCreateAndCloseButton?: boolean; // 是否显示用于创建/关闭白板的按钮。默认显示。
};
showRoomTimer?: boolean; // 是否显示计时器。默认不显示。
showRoomDetailsButton?: boolean; // 是否显示查看房间详情的按钮。默认显示。
showInviteToCohostButton?: boolean; // 是否显示邀请观众连麦的按钮。
showRemoveCohostButton?: boolean; // 是否显示下麦连麦观众的按钮。
showRequestToCohostButton?: boolean; // 是否显示请求连麦的按钮。
rightPanelExpandedType?: RightPanelExpandedType; // 控制右侧面板显示的信息类型,默认显示“无”。
autoHideFooter?: boolean; // 是否自动隐藏底部工具栏,默认自动隐藏。仅适用于移动浏览器。
enableUserSearch?: boolean; // 是否启用用户搜索功能,默认为false。
// 1.4 离开房间页面
showLeavingView?: boolean; // 是否显示离开房间页面。默认显示。
showLeaveRoomConfirmDialog?: boolean; // 离开房间时是否显示确认弹窗,默认为true
leaveRoomDialogConfig?: {
titleText?: string, // 自定义弹窗标题
descriptionText?: string, // 自定义弹窗描述
}
// 2 相关事件回调
onJoinRoom?: () => void; // 加入房间时触发此回调函数。
onLeaveRoom?: () => void; // 离开房间时触发此回调函数。
onUserJoin?: (users: ZegoUser[]) => void; // 房间内有参与者加入时触发此回调函数。
onUserLeave?: (users: ZegoUser[]) => void; // 房间内有参与者离开时触发此回调函数。
onUserAvatarSetter?: (user: ZegoUser[]) => void; // 设置用户头像的回调函数。
onLiveStart?: (user: ZegoUser) => void; // 直播开始时的回调函数。
onLiveEnd?: (user: ZegoUser) => void; // 直播结束时的回调函数。
onYouRemovedFromRoom?: () => void; // 被移出房间时的回调函数。
onInRoomMessageReceived?: (messageInfo: InRoomMessageInfo) => void; // 收到房间内聊天消息时的回调函数。
onInRoomCustomCommandReceived?: (command: ZegoSignalingInRoomCommandMessage[]) => void;
onReturnToHomeScreenClicked?: () => void; // 点击“返回主屏幕”按钮时触发此回调函数。设置此回调函数后,点击按钮将不会导航到主屏幕;而是您可以在此处添加自己的页面导航逻辑。
}
// 这是一个隐藏加入前页面的示例:
zp.joinRoom({
container: document.querySelector("#root"),
showPreJoinView: false
});
以上,通过集成互动直播 UIKit 即可在 Vue 网页或应用中快速实现直播功能。当然如果您需要搭建一个玩法复杂、自定义程度更精细的直播应用,建议您接入我们的 畅直播 SDK 来实现。