Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用

Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用

基础组件部分,最后就只剩余媒体组件以及地图,和画布Canvas,以及浏览器组件web-view。
此次先看看媒体组件,重点学习前面几个。
链接如下:
https://uniapp.dcloud.net.cn/component/audio.html#
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第1张图片

1.媒体组件的用法

1. audio音频组件
在这里插入图片描述
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第2张图片
这是演示案例的效果。
在这里插入图片描述
示例源代码,其中src播放地址,poster封面图片地址,以及name音频名称,author作者,播放动作action这个貌似不在所列属性之内。如果定义loop=‘true’则循环播放。


<view class="uni-padding-wrap uni-common-mt">
	<view class="page-section page-section-gap" style="text-align: center;">
		<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" 				
		:author="current.author" :action="audioAction" controls>audio>
	view>		
view>

JS代码如下,补充了变量定义。

export default {
	data() {
		return {
			current: {
				poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
				name: '致爱丽丝',
				author: '贝多芬',
				src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
			},
			audioAction: {
				method: 'pause'
			}
		}
	}
}

微信小程序以及其它很多小程序已经不支持audio组件了,试试用API来写一下,见uni.createInnerAudioContext
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第3张图片
加入一个按钮播放音乐,定义click触发播放音乐函数playAudio

<button type="primary"  @click="playAudio">播放音乐button>

函数定义:

playAudio() {
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	innerAudioContext.src = this.current.src;
	innerAudioContext.obeyMuteSwitch=true;//根据系统音量开关切换
	innerAudioContext.volume=0.8;//音量
	innerAudioContext.onPlay(() => {
		console.info('开始播放');//开始播放
			});
	innerAudioContext.onError((res) => {
	  	console.log(res.errMsg);
	  	console.log(res.errCode);
	});
	innerAudioContext.onEnded(() => {
		console.info('结束播放');//结束播放
			});
	}	

2. camera摄像头组件
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第4张图片
APP和H5都不支持该组件,反而微信小程序支持,因为没有下载微信小程序开发,示例代码看看但运行不了。
几个重要属性:
mode有效值为 normal, scanCode即拍照和扫码
resolution分辨率,类型为string,默认medium,不清楚还有其它哪些值
device-position前后摄像头front/back
flash闪光灯auto,on,off
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第5张图片
示例代码:

<view>
     <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;">camera>
     <button type="primary" @click="takePhoto">拍照button>
     <view>预览view>
     <image mode="widthFix" :src="src">image>
 view>

JS:

export default {
    data() {
        return {
            src:"" //临时存放照片的地址
        }
    },
    methods: {
         takePhoto() {
            const ctx = uni.createCameraContext();
            ctx.takePhoto({
                quality: 'high',
                success: (res) => {
                    this.src = res.tempImagePath
                }
            });
        },
        error(e) {
            console.log(e.detail);
        }
    }
}

用API实现:uni.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第6张图片

data() {
			return {}
		},
GetImg(){
		uni.chooseImage({
		count: 6, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
		sourceType: ['album'],//从相册选择album,相机camera,默认二者都有
		success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
				}
		});
	}

3. image图片组件
image图片使用非常频繁。
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第7张图片
重要属性有:
src:图片地址,静态资源和网络地址都可以
mode:对于放图片的容器尺寸,有裁剪,缩放等模式
lazy-load:图片懒加载。只针对page与scroll-view下的image有效,为了改善页面效果,先把页面框架显示出来图片位置先占位再显示。
还有是否可拖动draggable
事件方面有@load 加载完毕之后触发,@error出错之后触发
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第8张图片
示例代码效果:
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第9张图片
页面代码:
image属性中定义主要有宽/高/背景色,填充模式mode,下面展示所有模式的效果。

<view class="page">
	<view class="image-list">
		<view class="image-item" v-for="(item,index) in array" :key="index">
			<view class="image-content">
				<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
					@error="imageError">image>
			view>
			<view class="image-title">{{item.text}}view>
		view>
	view>
view>

JS:

src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',
array: [{
            mode: 'scaleToFill',
              text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
          }, {
              mode: 'aspectFit',
              text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
          }, {
              mode: 'aspectFill',
              text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
          }, {
              mode: 'top',
              text: 'top:不缩放图片,只显示图片的顶部区域'
          }, {
              mode: 'bottom',
              text: 'bottom:不缩放图片,只显示图片的底部区域'
          }, {
              mode: 'center',
              text: 'center:不缩放图片,只显示图片的中间区域'
          }, {
              mode: 'left',
              text: 'left:不缩放图片,只显示图片的左边区域'
          }, {
              mode: 'right',
              text: 'right:不缩放图片,只显示图片的右边边区域'
          }, {
              mode: 'top left',
              text: 'top left:不缩放图片,只显示图片的左上边区域'
          }, {
              mode: 'top right',
              text: 'top right:不缩放图片,只显示图片的右上边区域'
          }, {
              mode: 'bottom left',
              text: 'bottom left:不缩放图片,只显示图片的左下边区域'
          }, {
              mode: 'bottom right',
              text: 'bottom right:不缩放图片,只显示图片的右下边区域'
          }]		

4. video视频组件
曾经用过一次,但播放不成功,这次看看问题在哪里。
这次终于成功了,原因是必须运行到chrome里,内置浏览器不可以。
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第10张图片
示例代码:
input v-model="danmuValue"双向绑定了待发送的弹幕的值
弹幕还可以定义颜色,这里定义了一个随机颜色的函数getRandomColor();


<view class="uni-padding-wrap uni-common-mt">
	<view>
		<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-	app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]"
			@error="videoErrorCallback" :danmu-list="danmuList"
			show-loading='true'
			enable-danmu danmu-btn controls >video>
	view>
	
	
	<view class="uni-list uni-common-mt">
		<view class="uni-list-cell">
			<view>
				<view class="uni-label">弹幕内容view>
			view>
			<view class="uni-list-cell-db">
				<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
			view>
		view>
	view>
	<view class="uni-btn-v">
		<button @click="sendDanmu" class="page-body-button">发送弹幕button>
	view>
	
view>

JS:

export default {
    data() {
        return {
            src: '',
            danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
        // #endif
    },
    methods: {
        sendDanmu: function() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
        videoErrorCallback: function(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor: function() {
            const rgb = []
            for (let i = 0; i < 3; ++i) {
                let color = Math.floor(Math.random() * 256).toString(16)
                color = color.length == 1 ? '0' + color : color
                rgb.push(color)
            }
            return '#' + rgb.join('')
        }
    }
}

5. live-player视频组件
实时音视频播放,也称直播拉流。这个不太用得着。看看示例代码就行了。
App的实时音视频播放,不是使用 live-player,而是直接使用 video 组件。
关键属性:
mode:live(直播),RTC(实时通话,该模式时延更低)
sound-mode:声音输出方式;可选值speaker扬声器、ear听筒
object-fit :contain-图像长边填满屏幕,短边区域会被填充;fillCrop-图像铺满屏幕,超出显示区域的部分将被截掉


<live-player
  src="https://domain/pull_stream"
  autoplay
  @statechange="statechange"
  @error="error"
  style="width: 300px; height: 225px;"
/>

JS

export default {
    methods:{
        statechange(e){
            console.log('live-player code:', e.detail.code)
        },
        error(e){
            console.error('live-player error:', e.detail.errMsg)
        }
    }
}

无法测试,因此了解一下就行。
6. live-pusher实时音视频录制,也称直播推流
主要的一些属性:
Uniapp零基础开发学习笔记(9) -媒体组件音视频摄像头等的练习使用_第11张图片
示例代码

 <view>
      <live-pusher 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"
       >live-pusher>
       <button class="btn" @click="start">开始推流button>
       <button class="btn" @click="pause">暂停推流button>
       <button class="btn" @click="resume">resumebutton>
       <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>

JS

<script>
    export default {
        data() {
			return {}
        },
        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: 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));
                    }
                });
            }
        }
    }
</script>

H5上不支持预览,因此也只是了解。

你可能感兴趣的:(uni-app,1024程序员节,uni-app,前端,javascript)