uniapp实现直播的方法：首先通过推流，代码为【开始推流】；然后使用video标签实现拉流即可。
本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。
uniapp实现直播的方法：
1、推流
ref="livePusher"
class="livePusher"
url="" **这里需要请求后端接口，拿到推流地址**
mode="SD"
:muted="true"
:enable-camera="true"
:auto-focus="true"
:beauty="1"
whiteness="2"
aspect="9:16"
@statechange="statechange"
@netstatus="netstatus"
@error="error"
>
开始推流
暂停推流
resume
停止推流
快照
开启摄像头预览
关闭摄像头预览
切换摄像头
去播放
export default {
data() {
return {
context:[]
};
},
onReady() {
// 注意：需要在onReady中 或 onLoad 延时
= ('livePusher', this);
},
methods: {
statechange(e) {
('statechange:' + (e));
},
netstatus(e) {
('netstatus:' + (e));
},
error(e) {
('error:' + (e));
},
start(){
({
success: a => {
(':' + (a));
},
error:err=>{
(err)
}
});
},
close() {
({
success: a => {
(':' + (a));
}
});
},
snapshot() {
({
success: e => {
((e));
}
});
},
resume() {
({
success: a => {
(':' + (a));
}
});
},
pause() {
({
success: a => {
(':' + (a));
}
});
},
stop() {
({
success: a => {
((a));
}
});
},
switchCamera() {
({
success: a => {
(':' + (a));
}
});
},
startPreview() {
({
success: a => {
(':' + (a));
}
});
},
stopPreview() {
({
success: a => {
(':' + (a));
}
});
},
bofang(){
this.$({
url: 'pages/index/index'
})
}
}
};
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
**
2、拉流
这里是app拉流，用的是video标签，代码如下
export default {}
src是请求接口得到的拉流地址相关免费学习推荐：php编程(视频)