uniapp实现直播的方法：首先通过推流，代码为【开始推流】；然后使用video标签实现拉流即可。

本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。

uniapp实现直播的方法：

1、推流

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"

>

开始推流

暂停推流

resume

停止推流

快照

开启摄像头预览

关闭摄像头预览

切换摄像头

去播放

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'

})

}

}

};

.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编程(视频)