uniapp打开摄像头进行视频并拍照

一天学丶

已于 2022-02-09 16:06:33 修改

阅读量9.5k

点赞数 1

文章标签：音视频 javascript 前端

于 2022-02-09 15:22:09 首次发布

本文链接：https://blog.csdn.net/libinpeng123/article/details/122842485

版权

引用

引用插件: 基于内置H5的人脸所识别组件.
引用文章：前端网页打开摄像头并将图像传给后端.

新建hybrid文件

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.创建hybrid文件夹

在这里插入图片描述

代码如下（示例）：

<!doctype html>
<html lang="en">
<head>
    <title>GET VIDEO</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
	<div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
		<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" style="padding: 30px;font-size: 80px;" />
		<button  style="padding: 30px;font-size: 80px;" id="snap" onclick="takePhoto()">拍照</button>
		<button  style="padding: 30px;font-size: 80px;" id="close" onclick="closeMedia()">关闭</button>
	</div>
	<div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
		<!-- autoplay 属性规定一旦视频就绪马上开始播放。如果设置了该属性，视频将自动播放。 -->
		<video id="video" width="500" height="500" autoplay="autoplay"></video>
		<canvas id="canvas" width="500" height="500"></canvas>		
	</div>
<script>
	var buffer;
    //获得video摄像头区域
	var video = document.getElementById('video');
	//获得Canvas对象
	let canvas = document.getElementById("canvas");
	let ctx = canvas.getContext('2d');
    function closeMedia() {
		try{
			buffer&&buffer.getTracks()[0].stop();//关闭摄像头
		}catch(e){
			//TODO handle the exception
			return;
		}
    }
    function getMedia() {
        let mediaConfig = {
			// 强制打开后置摄像头video:视频  audio:音频
			video: {facingMode: {exact: 'environment'}},
            audio: false,
			// 请求不带任何参数的视频和音频
			// vidio: true, audio: true
			// 指定视频分辨率
			// video: {width: 480, height: 320}
			// 移动设备，优先使用前置摄像头
			// video: {facingMode: 'user'}
			// 移动设备，优先使用后置摄像头
			// {video: {facingMode: {exact: 'environment'}}}
        };
		var errBack = function(e) {
			console.log('An error has occurred!', e)
		};
		if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
			navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
				video.src = window.URL.createObjectURL(stream);
				// video.srcObject = stream;
				video.play();
				buffer = stream;
			});
		}else if(navigator.getUserMedia) { // Standard
			navigator.getUserMedia(mediaConfig, function(stream) {
				video.src = stream;
				video.play();
				buffer = stream;
			}, errBack);
		} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
			navigator.mozGetUserMedia(mediaConfig, function(stream){
				video.src = window.URL.createObjectURL(stream);
				video.play();
				buffer = stream;
			}, errBack);
		} else if(navigator.msGetUserMedia) { // Mozilla-prefixed
			navigator.msGetUserMedia(mediaConfig, function(stream){
				video.src = window.URL.createObjectURL(stream);
				video.play();
				buffer = stream;
			}, errBack);
		} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
			navigator.webkitGetUserMedia(mediaConfig, function(stream){
				video.src = window.URL.createObjectURL(stream);
				video.play();
				buffer = stream;
			}, errBack);
		}
    }
    function takePhoto() {
        ctx.drawImage(video, 0, 0, 500, 500);
		// 把画布的内容转换为base64编码格式的图片
		// var data = canvas.toDataURL( 'image/png',1);  //1表示质量(无损压缩)
		// return data.replace('data:image/png;base64,','');
    }
</script>
</body>
</html>

uniapp中page跳转的页面

代码如下（示例）：

<template>
	<view>
		<web-view ref="webview" :src="url" @message="getMessage"></web-view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				//携带参数photo对象
				//url:'/hybrid/html/local.html#'+encodeURIComponent(JSON.stringify({
					//photo:uni.getStorageSync('photo')
				//}))
				//不携带参数直接切换到html页面
				url:'/hybrid/html/local.html#'  
			}
		},
		methods: {
		},
	}
</script>
<style>
</style>