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前端直播推流的实现

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: uni-app 是一个使用 Vue.js 开发跨平台应用的框架。在 uni-app实现前端登录功能,通常有以下几种方式: 1. 使用 uni.login() 方法获取微信小程序的登录凭证 code,然后将 code 发送给后端服务器,由服务器使用 code 换取 openid 和 session_key。 2. 在前端页面中使用表单提交用户名和密码到服务器,由服务器验证用户名和密码并返回 token。 3. 使用第三方登录服务,如微信登录、QQ 登录、微博登录等。 具体实现方式取决于你的业务需求和服务端的接口。 ### 回答2: uni-app是一种基于Vue.js的跨平台开发框架,可以一次编写代码,同时生成可以运行在多个平台(iOS、Android、Web等)上的应用程序。下面是一个基本的uni-app前端登录示例。 1. 创建登录页面:在uni-app中,可以使用Vue的模板语法来创建登录页面,包括输入用户名和密码的表单,以及登录按钮。 2. 数据绑定:使用Vue的双向数据绑定,将输入框中的用户名和密码与页面的数据进行绑定,以便可以在登录时获取用户输入的值。 3. 发起登录请求:当用户点击登录按钮时,可以通过uni-app提供的API发起登录请求,将用户名和密码作为参数传递给后端接口。 4. 处理登录结果:根据后端接口返回的数据进行处理,可以使用异步回调函数或者Promise等方式进行处理。根据登录结果,可以给出相应的提示信息,如登录成功或登录失败。 5. 登录成功后的操作:如果登录成功,可以进行一些额外的操作,比如跳转到首页、保存用户登录状态等。 6. 错误处理:如果登录失败,可以给出相应的提示信息,如用户名或密码错误等。 7. 表单验证:可以添加一些简单的前端表单验证,如判断用户名和密码是否为空,输入是否符合要求等。 总结:以上是一个简单的uni-app前端登录流程,通过创建登录页面、数据绑定、发起登录请求、处理登录结果、登录成功后的操作以及错误处理等步骤,实现了一个基本的前端登录功能。当然,具体的实现还可以根据实际需求进行扩展和优化。 ### 回答3: uni-app是一个跨平台的开发框架,可以同时开发iOS、Android和H5应用。实现前端登录功能,我们可以借助uni-app提供的一些工具和技术来完成。 首先,我们需要创建一个登录页面,包括用户名和密码的输入框以及登录按钮。用户输入用户名和密码后,点击登录按钮可以触发相应的登录事件。 在uni-app中,我们可以使用Vue.js来处理用户输入和点击事件。可以在data中定义一个对象,用于保存用户名和密码的值。然后,使用v-model指令将输入框的值与data中的对象绑定起来,这样用户在输入框中输入的内容会自动同步到对应的data对象中。 当用户点击登录按钮时,可以通过调用uni-app提供的API发送登录请求到后端服务器。可以使用uni.request方法发送HTTP请求,并传递用户名和密码作为请求参数。可以在请求成功的回调函数中进行相应的处理,比如保存用户的登录状态等。 在前端登录过程中,还可以使用uni-app提供的拦截器(interceptor)来处理用户的登录状态。在每次请求发送前,可以通过拦截器判断用户是否已登录,如果未登录则跳转到登录页面进行认证,否则继续发送请求。 此外,为了提高用户体验和安全性,还可以使用uni-app的本地存储功能来保存用户的登录状态和登录凭证。可以使用uni.setStorage方法将用户的登录信息保存到本地存储中,并使用uni.getStorage方法从本地存储中获取用户的登录信息。 总的来说,uni-app前端登录需要创建登录页面,处理用户输入和点击事件,发送登录请求到后端服务器,并根据返回结果判断登录是否成功。同时,还需要使用拦截器来处理用户的登录状态,以及使用本地存储来保存登录信息。通过这些步骤,我们就可以实现uni-app前端登录功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值