392 行
15 KiB
Plaintext
392 行
15 KiB
Plaintext
<template>
|
|
<view class="uni-flex-item">
|
|
<live-pusher v-if="isUrlSet" id="live-pusher" class="live-pusher" :url="url" :beauty="beauty"
|
|
:whiteness="whiteness" :remote-mirror="remoteMirror" :local-mirror="localMirror" :device-position="devicePosition"
|
|
:mode="mode" :auto-focus="autoFocus" :muted="muted" :orientation="orientation" :enable-camera="enableCamera"
|
|
:enable-mic="enableMic" :audio-quality="audioQuality" :min-bitrate="minBitrate" :max-bitrate="maxBitrate"
|
|
:audio-volume-type="audioVolumeType" :aspect="aspect" :background-mute="backgroundMute"
|
|
:waiting-image="waitingImage" :zoom="zoom" @statechange="statechange" @netstatus="netstatus" @error="error">
|
|
</live-pusher>
|
|
<scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
|
|
<view class="uni-title">
|
|
<text class="uni-title-text">API示例</text>
|
|
</View>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="start" :disabled="connectedState || !previewState">开始推流</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="pause" :disabled="!connectedState || !previewState">暂停推流</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="resume"
|
|
:disabled="initState || connectedState || stopState || !previewState">恢复推流</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="stop" :disabled="!connectedState || !previewState">停止推流</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="switchCamera" :disabled="stopState || !previewState">切换前后摄像头</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="snapshot" :disabled="stopState || !previewState">快照</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="startPreview" :disabled="stopState || previewState">开启摄像头预览</button>
|
|
</view>
|
|
<view class="uni-btn-v">
|
|
<button type="primary" @click="stopPreview" :disabled="stopState || !previewState">关闭摄像头预览</button>
|
|
</view>
|
|
<view class="uni-title">
|
|
<text class="uni-title-text">属性示例</text>
|
|
</view>
|
|
<input class="input margin-10" type="string" placeholder="设置推流地址" @confirm="onUrlComfirm"></input>
|
|
<input class="input margin-10" type="string" placeholder="设置最小码率" @confirm="onMinBitrateComfirm"></input>
|
|
<input class="input margin-10" type="string" placeholder="设置最大码率" @confirm="onMaxBitrateComfirm"></input>
|
|
<input class="input margin-10" type="string" placeholder="设置进入后台时推流的等待画面"
|
|
@confirm="onWaitingImageComfirm"></input>
|
|
<input class="input margin-10" type="string" placeholder="设置焦距" @confirm="onZoomComfirm"></input>
|
|
<view class="margin-10">
|
|
<text>美颜, 取值范围0-9(iOS取值范围为1), 0表示关闭</text>
|
|
<slider :min="0" :max="9" @change="onBeautyChange" />
|
|
</view>
|
|
<view class="margin-10">
|
|
<text>美白, 取值范围0-9(iOS取值范围为1), 0表示关闭</text>
|
|
<slider :min="0" :max="9" @change="onWhitenessChange" />
|
|
</view>
|
|
<boolean-data title="设置是否静音" :defaultValue="muted" @change="onMutedChange"></boolean-data>
|
|
<!-- <boolean-data title="设置是否开启摄像头" :defaultValue="enableCamera" @change="onEnableCameraChange"></boolean-data> -->
|
|
<!-- <boolean-data title="设置是否开启麦克风" :defaultValue="enableMic" @change="onEnableMicChange"></boolean-data> -->
|
|
<boolean-data title="设置是否自动聚焦" :defaultValue="autoFocus" @change="onAutoFocusChange"></boolean-data>
|
|
<boolean-data title="设置进入后台时是否静音" :defaultValue="backgroundMute" @change="onBackgroundMuteChange"></boolean-data>
|
|
<boolean-data title="设置推流画面是否镜像" :defaultValue="remoteMirror" @change="onRemoteMirrorChange"></boolean-data>
|
|
<enum-data title="设置本地预览画面是否镜像" :items="localMirrorItemTypes" @change="onLocalMirrorChange"></enum-data>
|
|
<enum-data title="设置使用前置或后置摄像头" :items="devicePositionItemTypes" @change="onDevicePositionChange"></enum-data>
|
|
<enum-data title="设置推流视频模式" :items="modeItemTypes" @change="onModeChange"></enum-data>
|
|
<enum-data title="设置视频宽高比例" :items="aspectItemTypes" @change="onAspectChange"></enum-data>
|
|
<enum-data title="设置画面方向" :items="orientationItemTypes" @change="onOrientationChange"></enum-data>
|
|
<enum-data title="设置音质" :items="audioQualityItemTypes" @change="onAudioQualityChange"></enum-data>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ItemType } from '@/components/enum-data/enum-data-types';
|
|
|
|
const context = ref(null as LivePusherContext | null);
|
|
const instance = ref(null as ComponentPublicInstance | null);
|
|
const url = ref("rtmp://test");
|
|
const beauty = ref(0);
|
|
const whiteness = ref(0);
|
|
const remoteMirror = ref(false);
|
|
const localMirror = ref("auto");
|
|
const devicePosition = ref("front");
|
|
const mode = ref("SD");
|
|
const autoFocus = ref(true);
|
|
const muted = ref(false);
|
|
const orientation = ref("orientation");
|
|
const enableCamera = ref(true);
|
|
const enableMic = ref(true);
|
|
const audioQuality = ref("high");
|
|
const minBitrate = ref(200);
|
|
const maxBitrate = ref(1000);
|
|
const audioVolumeType = ref("media");
|
|
const aspect = ref("3:4");
|
|
const backgroundMute = ref(false);
|
|
const waitingImage = ref("");
|
|
const zoom = ref(1);
|
|
const videoWidth = ref(0);
|
|
const videoHeight = ref(0);
|
|
const fps = ref(0);
|
|
const isUrlSet = ref(true);
|
|
const initState = ref(true);
|
|
const connectedState = ref(false);
|
|
const stopState = ref(false);
|
|
const previewState = ref(true);
|
|
|
|
onReady(() => {
|
|
instance.value = getCurrentInstance()?.proxy;
|
|
});
|
|
|
|
const statechange = (e : UniLivePusherStatechangeEvent) => {
|
|
console.log("statechange", e);
|
|
switch (e.detail.code) {
|
|
case 1002:
|
|
initState.value = false;
|
|
connectedState.value = true;
|
|
stopState.value = false;
|
|
break;
|
|
case 3004:
|
|
connectedState.value = false;
|
|
break;
|
|
}
|
|
};
|
|
const netstatus = (e : UniLivePusherNetstatusEvent) => {
|
|
console.log("netstatus", e);
|
|
};
|
|
const error = (e : UniLivePusherErrorEvent) => {
|
|
console.log("error", e);
|
|
};
|
|
const isUrlValid = () : boolean => {
|
|
const valid = url.value != "rtmp://test";
|
|
if (!valid) {
|
|
uni.showToast({
|
|
title: "请输入推流地址",
|
|
icon: "none"
|
|
});
|
|
}
|
|
return valid;
|
|
};
|
|
const start = () => {
|
|
if (!isUrlValid()) return;
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
context.value?.start({
|
|
success: (res) => {
|
|
console.log("start", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("start", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("start", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const pause = () => {
|
|
if (!isUrlValid()) return;
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
context.value?.pause({
|
|
success: (res) => {
|
|
console.log("pause", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("pause", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("pause", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const resume = () => {
|
|
if (!isUrlValid()) return;
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
context.value?.resume({
|
|
success: (res) => {
|
|
console.log("resume", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("resume", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("resume", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const stop = () => {
|
|
if (!isUrlValid()) return;
|
|
stopState.value = true;
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
context.value?.stop({
|
|
success: (res) => {
|
|
console.log("stop", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("stop", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("stop", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const switchCamera = () => {
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
context.value?.switchCamera({
|
|
success: (res) => {
|
|
console.log("switchCamera", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("switchCamera", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("switchCamera", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const snapshot = () => {
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
context.value?.snapshot({
|
|
success: (res) => {
|
|
console.log("snapshot", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("snapshot", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("snapshot", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const startPreview = () => {
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
previewState.value = true;
|
|
context.value?.startPreview({
|
|
success: (res) => {
|
|
console.log("startPreview", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("startPreview", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("startPreview", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
const stopPreview = () => {
|
|
if (context.value == null) {
|
|
context.value = uni.createLivePusherContext("live-pusher", instance.value);
|
|
}
|
|
previewState.value = false;
|
|
context.value?.stopPreview({
|
|
success: (res) => {
|
|
console.log("stopPreview", JSON.stringify(res));
|
|
},
|
|
fail: (err) => {
|
|
console.log("stopPreview", JSON.stringify(err));
|
|
},
|
|
complete: (res) => {
|
|
console.log("stopPreview", JSON.stringify(res));
|
|
}
|
|
});
|
|
};
|
|
|
|
const localMirrorItemTypes = [{ "value": 0, "name": "auto(前置摄像头镜像，后置摄像头不镜像)" }, { "value": 1, "name": "enable(前后置摄像头均镜像)" }, { "value": 2, "name": "disable(前后置摄像头均不镜像)" }] as ItemType[];
|
|
const localMirrorItems = ["auto", "enable", "disable"];
|
|
const modeItemTypes = [{ "value": 0, "name": "SD(标清)" }, { "value": 1, "name": "HD(高清)" }, { "value": 2, "name": "FHD(超清)" }] as ItemType[];
|
|
const modeItems = ["SD", "HD", "FHD"];
|
|
const orientationItemTypes = [{ "value": 0, "name": "vertical" }, { "value": 1, "name": "horizontal" }] as ItemType[];
|
|
const orientationItems = ["vertical", "horizontal"];
|
|
const aspectItemTypes = [{ "value": 0, "name": "3:4" }, { "value": 1, "name": "9:16" }] as ItemType[];
|
|
const aspectItems = ["3:4", "9:16"];
|
|
const audioQualityItemTypes = [{ "value": 0, "name": "high(高音质(48KHz))" }, { "value": 1, "name": "low(低音质(16KHz))" }] as ItemType[];
|
|
const audioQualityItems = ["high", "low"];
|
|
const devicePositionItemTypes = [{ "value": 0, "name": "front" }, { "value": 1, "name": "back" }] as ItemType[];
|
|
const devicePositionItems = ["front", "back"];
|
|
const onUrlComfirm = (event : UniInputConfirmEvent) => {
|
|
let value = event.detail.value;
|
|
if (value == '') return;
|
|
context.value = null;
|
|
isUrlSet.value = false;
|
|
setTimeout(() => {
|
|
url.value = value;
|
|
isUrlSet.value = true;
|
|
}, 200);
|
|
console.log("url ->", value);
|
|
};
|
|
const onMinBitrateComfirm = (event : UniInputConfirmEvent) => {
|
|
let value = event.detail.value;
|
|
if (value == '') return;
|
|
minBitrate.value = parseInt(value);
|
|
console.log("min-bitrate ->", value);
|
|
};
|
|
const onMaxBitrateComfirm = (event : UniInputConfirmEvent) => {
|
|
let value = event.detail.value;
|
|
if (value == '') return;
|
|
maxBitrate.value = parseInt(value);
|
|
console.log("max-bitrate ->", value);
|
|
};
|
|
const onWaitingImageComfirm = (event : UniInputConfirmEvent) => {
|
|
let value = event.detail.value;
|
|
if (value == '') return;
|
|
waitingImage.value = value;
|
|
console.log("waiting-image ->", value);
|
|
};
|
|
const onZoomComfirm = (event : UniInputConfirmEvent) => {
|
|
let value = event.detail.value;
|
|
if (value == '') return;
|
|
zoom.value = parseInt(value);
|
|
console.log("zoom ->", value);
|
|
};
|
|
const onBeautyChange = (event : UniSliderChangeEvent) => {
|
|
beauty.value = event.detail.value;
|
|
console.log("beauty ->", beauty.value);
|
|
};
|
|
const onWhitenessChange = (event : UniSliderChangeEvent) => {
|
|
whiteness.value = event.detail.value;
|
|
console.log("whiteness ->", whiteness.value);
|
|
};
|
|
const onEnableCameraChange = (value : boolean) => {
|
|
enableCamera.value = value;
|
|
console.log("enable-camera ->", enableCamera.value);
|
|
};
|
|
const onEnableMicChange = (value : boolean) => {
|
|
enableMic.value = value;
|
|
console.log("enable-mic ->", enableMic.value);
|
|
};
|
|
const onMutedChange = (value : boolean) => {
|
|
muted.value = value;
|
|
console.log("muted ->", muted.value);
|
|
};
|
|
const onBackgroundMuteChange = (value : boolean) => {
|
|
backgroundMute.value = value;
|
|
console.log("background-mute ->", backgroundMute.value);
|
|
};
|
|
const onAutoFocusChange = (value : boolean) => {
|
|
autoFocus.value = value;
|
|
console.log("auto-focus ->", backgroundMute.value);
|
|
};
|
|
const onRemoteMirrorChange = (value : boolean) => {
|
|
remoteMirror.value = value;
|
|
console.log("remote-mirror ->", remoteMirror.value);
|
|
};
|
|
const onLocalMirrorChange = (value : number) => {
|
|
localMirror.value = localMirrorItems[value];
|
|
console.log("local-mirror ->", localMirrorItems[value]);
|
|
};
|
|
const onDevicePositionChange = (value : number) => {
|
|
devicePosition.value = devicePositionItems[value];
|
|
console.log("device-position ->", devicePosition.value);
|
|
};
|
|
const onModeChange = (value : number) => {
|
|
mode.value = modeItems[value];
|
|
console.log("mode ->", modeItems[value]);
|
|
};
|
|
const onAspectChange = (value : number) => {
|
|
aspect.value = aspectItems[value];
|
|
console.log("aspect ->", aspectItems[value]);
|
|
};
|
|
const onOrientationChange = (value : number) => {
|
|
orientation.value = orientationItems[value];
|
|
console.log("orientation ->", orientation.value);
|
|
};
|
|
const onAudioQualityChange = (value : number) => {
|
|
audioQuality.value = audioQualityItems[value];
|
|
console.log("audio-quality ->", audioQuality.value);
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.live-pusher {
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
|
|
.input {
|
|
height: 40px;
|
|
background: #FFF;
|
|
padding: 8px 13px;
|
|
}
|
|
</style>
|