uniapp开发直播平台,uniapp直播app
uniapp实现直播的方法：首先通过推流，代码为【button class=btn @click=start 开始推流/button】；然后使用录像标签实现拉流即可。
单一应用程序开发（仿饿了么)开发课程：进入学习
本教程操作环境：windows7系统、uni-app2.5.1版本，戴尔自交第三代电脑。
uniapp实现直播的方法：
1、推流
模板
view class=content
模板
视角
活推进器
id=livePusher
ref=livePusher
活推手
url= **这里需要请求后端接口，拿到推流地址**
mode=SD
：静音=真
:enable-camera=true
：自动对焦=真
:beauty=1
白度=2
aspect=9:16
@statechange=statechange
@netstatus=netstatus
@error=error
/现场推手
按钮@click=start 开始推流/按钮
按钮@click=pause 暂停推流/按钮
按钮class= BTN @ click= resume 简历/按钮
button class=btn @click=stop 停止推流/按钮
button class= BTN @ click=快照快照/按钮
button class=btn @click=开始预览开启摄像头预览/按钮
button class= BTN @ click=停止预览关闭摄像头预览/按钮
button class= BTN @ click=切换摄像机切换摄像头/按钮
按钮class= btn @点击=方博去播放/按钮
/查看
/模板
/查看
/模板
脚本
导出默认值{
data() {
返回{
上下文：[]
};
},
onReady() {
//注意：需要在函数中或装载延时
这个。上下文=uni。createlivepusher上下文( livepusher ，this)；
},
方法：{
状态更改(e) {
控制台。日志(状态更改： JSON。stringify(e))；
},
网络状态(e) {
控制台。日志(网络状态： JSON。stringify(e))；
},
错误(e) {
控制台。日志(错误： JSON。stringify(e))；
},
start(){
this.context.start({
成功：a={
控制台。测井(活推动器。开始：JSON。stringify(a))；
},
错误：err={
console.log(错误)
}
});
},
close() {
this.context.close({
成功：a={
控制台。测井(活推动器。关闭：JSON。stringify(a))；
}
});
},
快照(){
this.context.snapshot({
成功：e={
控制台。log(JSON。stringify(e))；
}
});
},
简历(){
this.context.resume({
成功：a={
控制台。测井(活推动器。简历：JSON。stringify(a))；
}
});
},
暂停(){
this.context.pause({
成功：a={
控制台。测井(活推动器。暂停：JSON。stringify(a))；
}
});
},
stop() {
this.context.stop({
成功：a={
控制台。log(JSON。stringify(a))；
}
});
},
开关摄像机(){
this.context.switchCamera({
成功：a={
控制台。测井(活推动器。切换摄像头：JSON。stringify(a))；
}
});
},
startPreview() {
this.context.startPreview({
成功：a={
控制台。测井(活推动器。开始预览：JSON。stringify(a))；
}
});
},
stopPreview() {
this.context.stopPreview({
成功：a={
控制台。测井(活推动器。停止预览： JSON。stringify(a))；
}
});
},
方博(){
这个. route({
url:"页面/索引/索引"
})
}
}
};
/脚本
风格。内容{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
对齐-内容：居中；
}。徽标{
身高：200rpx
宽度：200rpx
页边距-顶部：200rpx
左边距：自动；
右边距：自动；
边距-底部：50rpx
}。文本区域{
显示器：flex
对齐-内容：居中；
}。标题{
字体大小：36rpx
颜色：# 8f8f94
}
/风格
**2、拉流
这里是应用拉流，用的是录像标签，代码如下
模板
视角
视频src= style= width:100 VW；高度：400rpx:autoplay=true 控件/视频
/查看
/模板
脚本
导出默认值{}
/scriptsrc是请求接口得到的拉流地址
相关免费学习推荐：php编程（视频)
推荐（免费）：uni-app开发教程
以上就是uniapp如何实现直播的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。