uniapp实现直播的方法:首先通过推流,代码为【224298174d7dfa7e0f14f0a29cded0c1开始推流65281c5ac262bf6d81768915a4a77ac0】;然后使用video标签实现拉流即可。
本教程操作环境:windows7系统、uni-app2.5.1版本,dell g3电脑。
uniapp实现直播的方法:
1、推流
<template> <view class="content"> <template> <view> <live-pusher id="livepusher" 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" ></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> <button class="btn" @click="bofang">去播放</button> </view> </template> </view></template><script>export default { data() { return { context:[] }; }, 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(){ this.context.start({ success: a => { console.log('livepusher.start:' + json.stringify(a)); }, error:err=>{ console.log(err) } }); }, close() { this.context.close({ success: a => { console.log('livepusher.close:' + json.stringify(a)); } }); }, snapshot() { this.context.snapshot({ success: e => { console.log(json.stringify(e)); } }); }, resume() { this.context.resume({ success: a => { console.log('livepusher.resume:' + json.stringify(a)); } }); }, pause() { this.context.pause({ success: a => { console.log('livepusher.pause:' + json.stringify(a)); } }); }, stop() { this.context.stop({ success: a => { console.log(json.stringify(a)); } }); }, switchcamera() { this.context.switchcamera({ success: a => { console.log('livepusher.switchcamera:' + json.stringify(a)); } }); }, startpreview() { this.context.startpreview({ success: a => { console.log('livepusher.startpreview:' + json.stringify(a)); } }); }, stoppreview() { this.context.stoppreview({ success: a => { console.log('livepusher.stoppreview:' + json.stringify(a)); } }); }, bofang(){ this.$u.route({ url: 'pages/index/index' }) } }};</script><style>.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;}</style>**
2、拉流
这里是app拉流,用的是video标签,代码如下
<template> <view> <video src="" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video> </view></template> <script> export default {}</script>
src是请求接口得到的拉流地址
相关免费学习推荐:php编程(视频)
推荐(免费):uni-app开发教程
以上就是uniapp如何实现直播的详细内容。