uni app 使用live-pusher录制视频

这篇具有很好参考价值的文章主要介绍了uni app 使用live-pusher录制视频。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求背景

当客户发货或者收货时 需要上传开箱或者封箱视频,直接选择相册视频上传速度太慢,现在随便一个视频都是几百M的,流量费很贵,所以就选择使用 直播推流的方式 实现视频上传。

app开发,推荐使用nvue做直播,比使用vue的优势有:

  1. nvue也可一套代码编译多端。
  2. nvue的cover-view比vue的cover-view更强大,在视频上绘制元素更容易。如果只考虑App端的话,不用cover-view,任意组件都可以覆盖live-pusher组件,因为nvue没有层级问题。
  3. 若需要视频内嵌在swiper里上下滑动(类抖音、映客首页模式),App端只有nvue才能实现 当然nvue相比vue的坏处是css写法受限,如果只开发微信小程序,不考虑App,那么使用vue页面也是一样的。
  • 创建 live-pusher 上下文 livePusherContext 对象
		onReady() {
			// 注意:需要在onReady中 或 onLoad 延时
			this.context = uni.createLivePusherContext('livePusher', this);
			//获取手机信息,并设置高度和宽度
			try {
				const res = uni.getSystemInfoSync();
				this.width = res.windowWidth;
				this.height = res.windowHeight;
			} catch (e) {
				throw Error(e)
			}
		},
  • 获取请求url宽高自适应全屏 注:安卓手机需要主动启动摄像头
		onShow() {
			//开启预览
			uni.getStorage({
				key: 'livepushurl',
				success:(res) =>{
					const { url,id} = res.data
					this.livepushurl= url
					this.id = id
				}
			});
			if(systemInfo.platform == 'android'){
				this.startPreview();
			}
			this.startTime()
		},
  • onHide 处理 当用户切屏出去时 live-pusher会有bug 黑屏等问题,需要进行处理,当前处理3秒以内不保存页面后退。3秒以上进行保存页面后台
onHide() {
			if(!this.showTime){
				if (this.count <= 3) {
					var page = getCurrentPages();
					var prevPage = page[page.length - 2];
					prevPage.$vm.closePusher(this.id);
					uni.navigateBack({
					  delta: 1,
					});
				}else{
					this.stop()
					var page = getCurrentPages();
					var prevPage = page[page.length - 2];
					prevPage.$vm.finishPusher(this.id);
					uni.navigateBack({
					  delta: 1,
					});
				}
			}
		},
  • HTML 代码块  nvue 设置class样式不生效 使用style 行内样式 (width height)
	<view class="content">
		<live-pusher 
			id="livePusher" 
			ref="livePusher" 
			:style="{width: width + 'px',height:height + 'px'}" 
			:url="livepushurl"
			:mode="mode" 
			:muted="false"
			:enable-camera="true" 
			:auto-focus="true" 
			:beauty="beauty" 
			:whiteness="whiteness" 
			aspect="9:16" 
			enable-mic="true"
			device-position="back"
			@statechange="statechange" 
			@netstatus="netstatus" 
			@error="error">
		</live-pusher>
		<view class="timekeeping" style="width: 200rpx;" :style="{ top: iStatusBarHeight + 'px'}">
			<text class="timekeeping-time" style="color: #FFFFFF;">{{time}}</text>
		</view>
		<view class="pusher-handle">
			<view class="pusher-handle-btn" @click="switchCamera">
				<image style="width: 68rpx;height: 68rpx;" src="../../static/images/live-pusher-switch.png" resize="cover"></image>
			</view>
			<view class="pusher-handle-btn pusher-handle-center" @click="showConfirmModal">
				<image style="width: 112rpx;height: 112rpx;"  src="../../static/images/live-pusher-finish.png" resize="cover"></image>
			</view>
			<view class="pusher-handle-btn" @click="canceLlivePusher">
				<image style="width: 68rpx;height: 68rpx;"  src="../../static/images/live-pusher-close.png" resize="cover"></image>
			</view>
		</view>
		<view class="countdown" v-if="showTime">
			<text class="countdown-text">{{count}}</text>
		</view>
	</view>
  • 完成代码
let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				width: '350px',
				height: '1500px',
				mode: 'FHD', //流视频模式,可取值:SD(标清), HD(高清), FHD(超清)
				beauty: 1, //美颜,取值范围 0-9(iOS取值范围为1) ,0 表示关闭
				whiteness: 2, // 美白,取值范围 0-9(iOS取值范围为1) ,0 表示关闭
				context: [],
				livepushurl: '',
				url: '',
				showTime: true,
				confirmContent: '是否确认上传当前录制?',
				cancleContent: '是否确认退出当前录制?',
				showConfirm: false,
				showCancel: false,
				id: null,
				time: '00:00:00',
				iStatusBarHeight: 32,
				count: 0,
			};
		},
		onReady() {
			// 注意:需要在onReady中 或 onLoad 延时
			this.context = uni.createLivePusherContext('livePusher', this);
			//获取手机信息,并设置高度和宽度
			try {
				const res = uni.getSystemInfoSync();
				this.width = res.windowWidth;
				this.height = res.windowHeight;
			} catch (e) {
				throw Error(e)
			}
		},
		onLoad() {
			
		},
		onShow() {
			//开启预览
			uni.getStorage({
				key: 'livepushurl',
				success:(res) =>{
					const { url,id} = res.data
					this.livepushurl= url
					this.id = id
				}
			});
			if(systemInfo.platform == 'android'){
				this.startPreview();
			}
			this.startTime()
		},
		onHide() {
			if(!this.showTime){
				if (this.count <= 3) {
					var page = getCurrentPages();
					var prevPage = page[page.length - 2];
					prevPage.$vm.closePusher(this.id);
					uni.navigateBack({
					  delta: 1,
					});
				}else{
					this.stop()
					var page = getCurrentPages();
					var prevPage = page[page.length - 2];
					prevPage.$vm.finishPusher(this.id);
					uni.navigateBack({
					  delta: 1,
					});
				}
			}
		},
		methods: {
			async geturl() {
				try {
					const res = await getUrl({
						order_id: this.order_id,
						type: this.type
					})
					this.url = res.push.rtmp
					this.id = res.id
					this.startTime()
				} catch (e) {

				}
			},
			startTime() {
				const TIME_COUNT = 5;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.showTime = false;
							clearInterval(this.timer)
							this.timer = null;
							this.start()
							if(systemInfo.platform == 'ios'){
								this.switchCamera()
							}
							this.timekeeping()
						}
					}, 1000)
				}
			},
			timekeeping() {
				// var count = 0;
				if (!this.timerInter) {
					this.timerInter = setInterval(() => {
						var h = parseInt(this.count / 60 / 60);
						var m = parseInt(this.count / 60) % 60;
						var s = parseInt(this.count ) % 60;
						h = h < 10 ? '0' + h : h;
						m = m < 10 ? '0' + m : m;
						s = s < 10 ? '0' + s : s;
						this.time = h + ':' + m + ':' + s ;
						this.count += 1;
					}, 1000)
				}
			},
			statechange(e) {
				console.log('状态变化事件:' + JSON.stringify(e));
			},
			netstatus(e) {
				console.log('网络状态通知事件:' + JSON.stringify(e));
			},
			error(e) {
				console.log('渲染错误事件:' + JSON.stringify(e));
			},
			start() {
				this.context.start({
					success: a => {
						console.log('开始推流:' + JSON.stringify(a));
					},
					error: err => {
						console.log(err)
					}
				});
			},
			snapshot() {
				this.context.snapshot({
					success: e => {
						console.log('快照:' + JSON.stringify(e));
					}
				});
			},
			resume() {
				this.context.resume({
					success: a => {
						console.log('恢复推流:' + JSON.stringify(a));
					}
				});
			},
			pause() {
				this.context.pause({
					success: a => {
						console.log('暂停推流:' + JSON.stringify(a));
					}
				});
			},
			stop() {
				this.context.stop({
					success: a => {
						console.log('停止推流:' + JSON.stringify(a));
					}
				});
			},
			switchCamera() {
				this.context.switchCamera({
					success: a => {
						console.log('切换前后摄像头:' + JSON.stringify(a));
					}
				});
			},
			startPreview() {
				this.context.startPreview({
					success: a => {
						console.log('开启摄像头预览:' + JSON.stringify(a));
					}
				});
			},
			stopPreview() {
				this.context.stopPreview({
					success: a => {
						console.log('关闭摄像头预览:' + JSON.stringify(a));
					}
				});
			},
			showConfirmModal() {
				if (this.count <= 3) {
					uni.showToast({
						title: '上传视频不能低于3秒',
						icon: "none",
						duration: 2000,
					});
					return
				}
				uni.showModal({
				    title: '提示',
				    content: '是否确认上传当前录制?',
				    success: (res)=> {
							if (res.confirm) {
								clearInterval(this.timerInter);
								uni.showLoading({
									title: '提交中'
								})
								setTimeout(()=>{
									uni.hideLoading()
									this.stop()
									var page = getCurrentPages();
									var prevPage = page[page.length - 2];
									prevPage.$vm.finishPusher(this.id);
									uni.navigateBack({
									  delta: 1,
									});
								},2000)
							} else if (res.cancel) {
									console.log('用户点击取消');
							}
				    }
				});
				// this.showConfirm = true
			},
			canceLlivePusher(){
				uni.showModal({
				    title: '提示',
				    content: '是否确认退出当前录制?',
				    success:  (res)=> {
							if (res.confirm) {
								this.stop()
								var page = getCurrentPages();
								var prevPage = page[page.length - 2];
								prevPage.$vm.closePusher(this.id);
								uni.navigateBack({
								  delta: 1,
								});
							} else if (res.cancel) {
									console.log('用户点击取消');
							}
						},
				})
			}
		}
	};
  • 结尾

参数说明、回调方法可参考 文档文章来源地址https://www.toymoban.com/news/detail-503266.html

到了这里,关于uni app 使用live-pusher录制视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用屏幕捕捉API:一站式解决屏幕录制需求

    随着科技的发展,屏幕捕捉API技术逐渐成为一种热门的录屏方法。本文将详细介绍屏幕捕捉API技术的原理、应用场景以及如何利用这一技术为用户提供便捷、高效的录屏体验。 在线录屏 | 一个覆盖广泛主题工具的高效在线平台(amd794.com) https://amd794.com/recordscreen 一、屏幕捕捉

    2024年01月18日
    浏览(67)
  • uni-app App和H5平台上传视频截取视频第一帧生成图片

    提示:因为uni-app中renderjs仅支持App和H5平台,所以该方案仅支持当前这两个平台。 this.request为本人封装的接口请求方法,可以替换成个人的接口请求方法,如有需要可在下方留言 因为uni-app App端没有dom概念,不支持dom操作,并且uni-app的canvas不支持绘制video。renderjs完美解决了

    2023年04月09日
    浏览(57)
  • 【FFmpeg】音视频录制 ① ( 查询系统中 ffmpeg 可录制的音视频输入设备 | 使用 ffmpeg 命令录制音视频数据 | 录制视频数据命令 |录制音频数据| 同时录制音频和视频数据命令 )

    在 Windows 系统中 , 使用 ffmpeg 命令 录制 音视频 , 需要先获取 系统的 音视频设备 信息 , 录制 音视频 本质上是从 系统音视频设备 中获取数据 ; 执行 命令 , 可以获取 系统中 ffmpeg 可用的 DirectShow 音视频输入设备 ; 命令参数解析 : -list_devices true : 列出所有 ffmpeg 的 指定类型的可

    2024年04月25日
    浏览(92)
  • uni-app 微信小程序 激励视频广告

    封装激励视频-Ad.js 调用上面写的方法:

    2024年02月12日
    浏览(83)
  • uni-app 和H5页面视频播放flv格式视频监控

    本文章向大家介绍uniApp 实现微信小程序和app视频播放flv格式视频监控,主要包括uniApp 实现微信小程序和app视频播放flv格式视频监控使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 video 支持 App平台: 支持本地视频(

    2023年04月08日
    浏览(49)
  • uni-app 轮播图视频+图片 视频图片全屏预览 两种方法

    在做商城项目的时候,商品详情的轮播图需要同时显示视频和图片,并且能够全局预览 如果项目里有uview这个组件库,可以通过swiper轮播图的指定类型进行解决,点击这里进行跳转 也可以通过uni-app自带的swiper去解决这个问题,点击这里进行跳转 就目前的两种方案,第二种方

    2024年02月12日
    浏览(110)
  • js 使用MediaRecorder 录制video,生成视频

    参考: https://blog.csdn.net/qq_36958916/article/details/108529705 https://www.jianshu.com/p/d0d6c61dfafd https://www.jianshu.com/p/ad7dfd50880e?utm_campaign=maleskine…utm_content=noteutm_medium=seo_notes https://jimmy.blog.csdn.net/article/details/118282882 https://blog.csdn.net/lan123456_/article/details/128324851

    2024年02月13日
    浏览(49)
  • 如何使用OBS录制采集卡视频内容

    第一步:下载并安装OBS。官网:https://obsproject.com/ 第二部:安装完成后,点击文件-设置,点击“视频”,将分辨率改为1920X1080,FPS改为60,这样录制出来的视频会更清晰。 第三步:点击下面的“+”,选择添加一个视频采集设备 第四步:选择采集卡设备 第五步:更改下参数,

    2024年02月12日
    浏览(85)
  • 安卓使用VLC播放视频,实现截图和录制功能

    VLC是一款非常强大的开源媒体播放器,由VideoLAN组织开发和维护。它最初是为学校项目开发的,但现在已经成为全球最流行的媒体播放器之一。 VLC具有以下几个主要特点: 多平台支持:VLC支持几乎所有主流的操作系统,包括Windows、macOS、Linux、iOS和Android。这意味着你可以在几

    2024年02月09日
    浏览(75)
  • C#使用OpenCv(OpenCVSharp)使用摄像头视频显示和录制及图片保存、本地视频显示

    本篇实例讲解基于OpenCvSharp实现了摄像头视频显示、录制及截图、视频保存,本地视频的显示功能。 目录 创建winform项目添加控件 NuGet安装opencvsharp  代码  运行效果 实例实现过程

    2024年02月15日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包