uni-app开发h5或小程序调用摄像头拍照，录屏

uniapp开发h5或小程序调用摄像头拍照，录屏

	<view class="burst-info" style="margin-bottom:10px ;">
								<view class="uni-uploader-body" style="max-height: 220px;overflow: auto;">
									<view class="uni-uploader__files" style="display: flex;flex-wrap: wrap;">
										<!-- 图片 -->
										<block v-for="(image,index) in imageList" :key="index">

											<view class="uni-uploader__file" style="margin-right: 5px;">
												<view class="icon iconfont icon-cuo" @tap="delect(index)">X</view>
												<image class="uni-uploader__img" :src="https://blog.csdn.net/Fairyasd/article/details/image" :data-src="https://blog.csdn.net/Fairyasd/article/details/image"
													@tap="previewImage"></image>
											</view>
										</block>
										<!-- 视频 -->
										<!--  v-if="src" -->
										<view class="uni-uploader__file serchjia" v-for="(video,index) in src"
											:key="index" style="margin-right: 5px;">
											<view class=""
												style="position: relative;height: 120px;background-color: black;">
												<view class="icon iconfont icon-cuo" @tap="delectVideo(index)"
													style="margin-bottom: 5px;">X</view>
												<view class="uploader_video" style="top: 20px;">
													<video :src="https://blog.csdn.net/Fairyasd/article/details/video" class="video"></video>
												</view>
											</view>

										</view>
										<view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
											<view class="uni-uploader__input" @tap="chooseVideoImage"> </view>
										</view>
									</view>
								</view>
							</view>

	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	data:
			// 图片视频上传
				imagesUrlPath: [],
				VideoUrlPath: [],
				imageList: [], //图片
				src: [], //视频存放
				sourceTypeIndex: 2,
				checkedValue: true,
				checkedIndex: 0,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
				VideoOfImagesShow: true,
				config: {
					fileUrl: this.baseurl   "/system/file/upload"
				},
				// ---------

		// 图片视频上传
			chooseVideoImage() {
				uni.showActionSheet({
					title: "选择上传类型",
					itemList: ['图片', '视频'],
					success: (res) => {
						console.log(res)
						if (res.tapIndex == 0) {
							this.chooseImages()
						} else {
							this.chooseVideo()
						}
					}
				})
			},
			chooseImages() {

				// 上传图片
				uni.chooseImage({
					count: 9, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: "加载中"
						})
						let igmFile = res.tempFilePaths;
						// uni.showToast({
						// 	title:1 igmFile[0]
						// })
						var key = Math.random().toString(36).substr(2); //⽣成⼀个随机字符串的⽂件名
						wx.uploadFile({
							url: this.config.fileUrl,
							// method: "POST",
							formData: {
								'token': 'bearer '   uni.getStorageSync('token'),
								'key': key
							},
							filePath: igmFile[0],
							name: 'file',
							success: (res) => {

								$api.eventDownload({
									id: JSON.parse(res.data).data
								}).then(self => {
									uni.hideLoading();
									console.log(self.data)
									this.imagesUrlPath = this.imagesUrlPath.concat(JSON
										.parse(res.data).data); //获取上传id
									this.imageList = this.imageList.concat(self.data); //微信
									if (this.imageList.length >= 9) {
										this.VideoOfImagesShow = false;
									} else {
										this.VideoOfImagesShow = true;
									}
								})
							}
						})
						// this.imageList = this.imageList.concat(res.tempFilePaths)  //头条
					},
				});
			},
			chooseVideo() {

				// 上传视频
				uni.chooseVideo({
					maxDuration: 15,
					count: 1,
					// compressed:true,
					camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album', 'camera'], //从相册选择
					// sourceType: ['album'],
					success: (responent) => {
						uni.showLoading({
							title: "加载中"
						})
						console.log(1, responent)
						let videoFile = responent.tempFilePath;
						var key = Math.random().toString(36).substr(2); //⽣成⼀个随机字符串的⽂件名
						wx.uploadFile({
							url: this.config.fileUrl,
							method: "POST",
							formData: {
								'token': 'bearer '   uni.getStorageSync('token'),
								'key': key
							},
							filePath: videoFile,
							name: 'file',
							success: (res) => {
								$api.eventDownload({
									id: JSON.parse(res.data).data
								}).then(self => {
									uni.hideLoading();
									this.VideoUrlPath = this.VideoUrlPath.concat(JSON
										.parse(res.data).data); //获取上传id

									this.src = this.src.concat(self.data); //微信
									console.log(2, this.src)
									if (this.src) {
										this.itemList = ['图片']
									} else {
										this.itemList = ['图片', '视频']
									}
								})
							}
						})
						// this.src = responent.tempFilePath;  //头条
					}
				})
			},
			previewImage: function(e) {
				//预览图片
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			delect(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.imageList.splice(index, 1)
							this.imagesUrlPath.splice(index, 1)
						}
					}
				})
			},
			delectVideo(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除此视频",
					success: (res) => {
						if (res.confirm) {
							this.src.splice(index, 1)
							this.VideoUrlPath.splice(index, 1)
						}
					}
				})
			}
		

如图

注意，小程序上线使用需要配置upload域名。

这篇好文章是转载于：学新通技术网