2021-03-22 unI-app 前端直播推流实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
简单记录一下uni-app前端使用直播推流的过程，开始之前，先来简单讲一下组件是什么

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、组件是什么？

组件是视图层的基本组成单元。
组件是一个单独且可复用的功能模块的封装。
每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

<component-name property1="value" property2="value">
    content
</component-name>

举个例子，button，就是一个组件，它能够拿来就用

<template>
    <view>
        <button size="mini">按钮</button>
    </view>
</template>

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、live-pusher组件

1.引入live-pusher组件

为了能够让前端实现直播推流的一个效果，需要引入一个直播推流的组件，为live-pusher，具体可以看到API文档
https://uniapp.dcloud.io/component/live-pusher.
使用该组件之前，有一些参数需要简单介绍一下，看图：

文档上面其实已经写的比较清楚了，主要是这个url，也就是推流地址需要想办法去获取，我这边采用的方案是在bilibil上注册一个账号，然后实名认证，即可获得直播码，见下图

然后把对应的rmtp地址放入到url当中即可

代码如下

<view>
 <live-pusher 
			id='livePusher' 
			ref="livePusher" 
			class="livePusher" 
			url="rtmp://10.133.50.56:58504/livehime"
			mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" 
			whiteness="2"
			style="width: 500px; height: 450px;"
			@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>
</view>		

2.填写method方法

对应的，填写了上面的组件，我们还要写下面的method方法
代码如下（示例）：

start: function() {
	this.context.start({
         success: (a) => {
             console.log("livePusher.start:" + JSON.stringify(a));
         }
     });
 },
 close: function() {
     this.context.close({
         success: (a) => {
             console.log("livePusher.close:" + JSON.stringify(a));
         }
     });
 },
 snapshot: function() {
     this.context.snapshot({
         success: (e) => {
             console.log(JSON.stringify(e));
         }
     });
 },
 resume: function() {
     this.context.resume({
         success: (a) => {
             console.log("livePusher.resume:" + JSON.stringify(a));
         }
     });
 },
 pause: function() {
     this.context.pause({
         success: (a) => {
             console.log("livePusher.pause:" + JSON.stringify(a));
         }
     });
 },
 stop: function() {
     this.context.stop({
         success: (a) => {
             console.log(JSON.stringify(a));
         }
     });
 },
 switchCamera: function() {
     this.context.switchCamera({
         success: (a) => {
             console.log("livePusher.switchCamera:" + JSON.stringify(a));
         }
     });
 },
 startPreview: function() {
     this.context.startPreview({
         success: (a) => {
             console.log("livePusher.startPreview:" + JSON.stringify(a));
         }
     });
 },
 stopPreview: function() {
     this.context.stopPreview({
         success: (a) => {
             console.log("livePusher.stopPreview:" + JSON.stringify(a));
         }
     });
 },

可以根据示例程序的要求进行填写

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
最终得到效果如下

本章简单描述的uni-app前端直播推流的实现