uniapp開發(fā)h5或小程序調(diào)用攝像頭拍照，錄屏

	<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="image" :data-src="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="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, //默認(rèn)9
					// sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認(rèn)二者都有
					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); //?成?個隨機(jī)字符串的?件名
						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); //?成?個隨機(jī)字符串的?件名
						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) {
				//預(yù)覽圖片
				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域名。文章來源地址http://www.zghlxwxcb.cn/news/detail-521949.html

到了這里，關(guān)于uniapp開發(fā)h5或小程序調(diào)用攝像頭拍照，錄屏的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！