유니앱 개발문서에는 미니프로그램의 라이브 방송 기능을 직접 제공하는 API가 없으며, 타사 SDK를 호출하거나 해당 API를 캡슐화하여 구현해야 합니다. 다음은 유용할 수 있는 몇 가지 구성 요소와 도구입니다.
-
uni-live-pusher 및 uni-live-player 구성 요소: 이 두 구성 요소는 미니 프로그램의 라이브 스트리밍 및 플레이어 기능을 실현할 수 있으며 H5, App, WeChat 미니 프로그램 및 기타 터미널에서 사용할 수 있습니다.
-
Tencent Cloud 라이브 방송 서비스 인터페이스: Tencent Cloud는 REST API를 통해 호출할 수 있는 스트리밍, 재생, 트랜스코딩 등을 포함한 풍부한 라이브 방송 서비스 인터페이스를 제공합니다. 해당 라이브 방송 서비스를 이용하려면 해당 서비스를 구매해야 합니다.
-
Alibaba Cloud 라이브 방송 서비스 인터페이스: Alibaba Cloud는 미니 프로그램 라이브 방송 기능을 구현하는 데 사용할 수 있는 유사한 라이브 방송 서비스 인터페이스도 제공합니다. 또한 해당 서비스를 사용하려면 먼저 해당 서비스를 구매해야 합니다.
-
Qiniu Cloud 라이브 방송 서비스 인터페이스: Qiniu Cloud는 또한 라이브 방송 푸시, 풀, 트랜스코딩, 스트림 중단 및 재연결 기능을 실현할 수 있는 완전한 라이브 방송 서비스 및 관련 인터페이스 세트를 제공합니다. 또한 해당 서비스를 사용하려면 먼저 해당 서비스를 구매해야 합니다.
다음으로 uni-live-pusher 및 uni-live-player 구성 요소를 사용하여 미니 프로그램의 라이브 방송 기능에 대한 간단한 코드 예제를 개발하겠습니다.
UniApp의 uni-live-pusher및 구성 요소를 사용하여 생방송 미니 프로그램을 개발하려면 uni-live-player다음 단계를 따르세요.
-
미니프로그램 백그라운드에서 라이브 방송 이벤트를 생성하고, 라이브 방송의 푸시 주소와 재생 주소를 획득합니다.
-
푸시 영상을 표시해야 하는 페이지에서
uni-live-pusher컴포넌트를 사용하고,onLoad라이프 사이클에서 푸셔를 초기화하고, 푸시 주소 및 기타 매개변수(너비, 높이, 비트 전송률 등)를 설정합니다.
<template>
<view>
<uni-live-pusher :url="pusherUrl" :width="width" :height="height" :bitrate="bitrate"
:audio="audio" :debug="debug" ref="livePusher" />
</view>
</template>
<script>
export default {
data() {
return {
pusherUrl: '', // 推流地址
width: 480, // 视频宽度
height: 640, // 视频高度
bitrate: 600, // 视频码率
audio: true, // 是否开启音频
debug: false // 是否开启调试
}
},
onLoad() {
uni.setKeepScreenOn({
keepScreenOn: true
})
this.initLivePusher()
},
methods: {
initLivePusher() {
const livePusher = this.$refs.livePusher
livePusher && livePusher.stop && livePusher.stop()
livePusher && livePusher.start && livePusher.start()
}
}
}
</script>
- 비디오 재생을 표시해야 하는 페이지에서
uni-live-player컴포넌트를 사용onLoad하고 라이프 사이클에서 플레이어를 초기화하고 재생 주소 및 너비, 높이, 확대/축소 모드 등과 같은 기타 매개변수를 설정합니다.
<template>
<view>
<uni-live-player :url="playerUrl" :mode="mode" :orientation="orientation" :autoplay="autoplay"
:muted="muted" :backgroundMute="backgroundMute" :minCache="minCache" :maxCache="maxCache"
:soundMode="soundMode" :autoPauseIfNavigate="autoPauseIfNavigate" :autoPauseIfOpenNative="autoPauseIfOpenNative"
:pictureInPictureMode="pictureInPictureMode" :disableScroll="disableScroll" :enableCamera="enableCamera"
:renderMode="renderMode" :enableHWAcceleration="enableHWAcceleration" :autoShowLoading="autoShowLoading"
:showMuteBtn="showMuteBtn" :showProgress="showProgress" :showCenterPlayBtn="showCenterPlayBtn"
:enableProgressGesture="enableProgressGesture" :mute="mute" :backgroundMuteStopPlay="backgroundMuteStopPlay"
:autoFullScreen="autoFullScreen" :pictureInPictureShowProgress="pictureInPictureShowProgress" ref="livePlayer" />
</view>
</template>
<script>
export default {
data() {
return {
playerUrl: '', // 播放地址
mode: 'live', // 缩放模式
orientation: 'vertical', // 横竖屏方向
autoplay: true, // 是否自动播放
muted: false, // 是否静音
backgroundMute: false, // 是否开启后台静音
minCache: 1, // 最小缓存
maxCache: 3, // 最大缓存
soundMode: 'speaker', // 播放声音模式
autoPauseIfNavigate: true, // 当跳转到其他页面时，是否自动暂停
autoPauseIfOpenNative: true, // 当打开原生组件（如拍照）时，是否自动暂停
pictureInPictureMode: 'push', // 小窗模式
disableScroll: false, // 是否禁止滚动
enableCamera: false, // 是否使用前置摄像头
renderMode: 'adaptive', // 渲染模式
enableHWAcceleration: true, // 是否开启硬件加速
autoShowLoading: true, // 是否自动显示加载状态
showMuteBtn: true, // 是否显示静音按钮
showProgress: true, // 是否显示进度条
showCenterPlayBtn: true, // 是否显示居中播放按钮
enableProgressGesture: true, // 是否支持手势调节播放进度
mute: false, // 是否静音
backgroundMuteStopPlay: false, // 当开启后台静音时，是否停止播放
autoFullScreen: false, // 是否自动全屏
pictureInPictureShowProgress: true // 小窗是否显示进度条
}
},
onLoad() {
this.initLivePlayer()
},
methods: {
initLivePlayer() {
const livePlayer = this.$refs.livePlayer
livePlayer && livePlayer.stop && livePlayer.stop()
livePlayer && livePlayer.start && livePlayer.start()
}
}
}
</script>
onUnload수명 주기 동안 스트리밍 및 재생을 중지합니다 .
onUnload() {
const livePusher = this.$refs.livePusher
livePusher && livePusher.stop && livePusher.stop()
const livePlayer = this.$refs.livePlayer
livePlayer && livePlayer.stop && livePlayer.stop()
}
이는 단순한 데모 코드일 뿐입니다. 실제 개발에서는 푸시 및 풀 스트림의 품질과 사용자 경험을 보장하기 위해 더 많은 상황과 예외 처리를 고려해야 하며 관련 규정 및 개인 정보 보호 정책 요구 사항을 따라야 합니다.