引用
引用插件: 基于内置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>