直播推流和拉流--系统篇
今天实现一下直播推流和拉流。服务器端使用opencloudos8系统。顺便把我之前写的小系统弄上去跑跑，搭建个git服务器，使用ssh协议，密钥方式。
先展示一下在iphone上推流效果图
再展示下在谷歌浏览器上的拉流效果图，safari浏览器和微信浏览器效果都是差不多
再展示下在百度小程序上的拉流效果图
实现推流，新建uniapp项目，命名为app，为何要新建uniapp项目啊，不想写条件编译，单独出负责app模块更加清晰。新建live-pusher.nvue，同时弄个同名文件夹。在index.vue里面写个跳转
<navigator url="live-pusher/live-pusher" hover-class="navigator-hover">
<button type="default">实时音视频录制</button>
</navigator>
在live-pusher.nvue里面编写
<template>
<view>
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="这里填写服务器访问地址"
mode="SD" :muted="false" :enable-camera="true" :auto-focus="true"
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
></live-pusher>
<button class="btn" @click="start">开始推流</button>
<button class="btn" @click="pause">暂停推流</button>
<button class="btn" @click="resume">resume</button>
<button class="btn" @click="stop">停止推流</button>
<button class="btn" @click="snapshot">快照</button>
<button class="btn" @click="startPreview">开启摄像头预览</button>
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
<button class="btn" @click="switchCamera">切换摄像头</button>
</view>
</template>
<script>
export default {
data() {
return {}
},
onReady() {
// 注意：需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext("livePusher", this);
},
methods: {
statechange(e) {
console.log("statechange:" + JSON.stringify(e));
},
netstatus(e) {
console.log("netstatus:" + JSON.stringify(e));
},
error(e) {
console.log("error:" + JSON.stringify(e));
},
start: function() {
this.context.start({
success: (a) => {
console.log("livePusher.start:" + JSON.stringify(a));
},
fail: (err) => {
console.log('推流失败:', err);
}
});
},
close: function() {
this.context.close({
success: (a) => {
console.log("livePusher.close:" + JSON.stringify(a));
}
});
},
snapshot: function() {
this.context.snapshot({
success: (e) => {
console.log(JSON.stringify(e));
}
});
},
resume: function() {
this.context.resume({
success: (a) => {
console.log("livePusher.resume:" + JSON.stringify(a));
}
});
},
pause: function() {
this.context.pause({
success: (a) => {
console.log("livePusher.pause:" + JSON.stringify(a));
}
});
},
stop: function() {
this.context.stop({
success: (a) => {
console.log(JSON.stringify(a));
}
});
},
switchCamera: function() {
this.context.switchCamera({
success: (a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
}
});
},
startPreview: function() {
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
}
});
},
stopPreview: function() {
this.context.stopPreview({
success: (a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
}
});
}
}
}
</script>
<style>
</style>
注意改写live-pusher组件的url，由于服务器实现方法多样，大家改成各自的服务器地址，另外把声音开了，:muted="false"
拉流就以百度小程序拉流代码为例
新建uniapp项目，命名为baidu。再新建live-player.vue文件，也建立同名文件夹。在index.vue里面也写个跳转
<navigator url="live-player/live-player" hover-class="navigator-hover">
<button type="default">实现音视频播放</button>
</navigator>
在live-player.vue文件里面编写
<template>
<view>
<live-player
src="这里写服务器端地址"
autoplay
@statechange="statechange"
@error="error"
style="width: 300px; height: 225px;"
/>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
注意live-player组件的src写入各自服务器地址