uniapp利用内置组件live-pusher和video实现app端的简单视频聊天功能

原创

已于 2023-09-20 11:33:37 修改 · 4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #音视频

于 2023-09-20 10:57:36 首次发布

本文介绍了如何在uniapp中使用内置组件实现实时视频聊天功能，包括推流和拉流的代码示例，以及如何使用nginx搭建流媒体服务器来存储和分发视频流。

一.视频功能的介绍：视频聊天功能怎么实现呢? 我做这个功能时，第一个想到的就是这个跟直播功能没啥区别。都是利用推流工具把视频流推送到流媒体服务器，然后在利用拉流软件拿到视频流进行播放。

二.实现方案

1.首先我查了uniapp官方文档，他们给我们内置了一个live-pusher组件，专门用来进行推流。如果是app端拉流直接用video组件，微信小程序就得用live-player。

推流代码html部分：

<template>
	 <view>
			<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="rtmp://192.168.1.70:1935/live/sss"
			 mode="HD" :muted="false" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
			 aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error" style="width:300px;height:200px"></live-pusher>
			
	        <button class="btn" @click="pause">暂停推流</button>
	        <button class="btn" @click="resume">resume</button>
	        <button class="btn" @click="stop">停止推流</button>
	        <button class="btn" @click="snapshot">快照</bu