引用

引用插件: 基于内置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 exceptionreturn;}}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) { // Standardnavigator.getUserMedia(mediaConfig, function(stream) {video.src = stream;video.play();buffer = stream;}, errBack);} else if(navigator.mozGetUserMedia) { // Mozilla-prefixednavigator.mozGetUserMedia(mediaConfig, function(stream){video.src = window.URL.createObjectURL(stream);video.play();buffer = stream;}, errBack);} else if(navigator.msGetUserMedia) { // Mozilla-prefixednavigator.msGetUserMedia(mediaConfig, function(stream){video.src = window.URL.createObjectURL(stream);video.play();buffer = stream;}, errBack);} else if(navigator.webkitGetUserMedia) { // WebKit-prefixednavigator.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>

uniapp打开摄像头进行视频并拍照相关推荐

用gcc生成静态库和动态库和使用opencv库编写打开摄像头压缩视频
文章目录一.用gcc生成静态库和动态库 1.编辑生成程序hello.h.hello.c.main.c 2.将hello.c生成.o文件 3.使用静态库 4.动态库的使用二.a与.so库文件的生成与 ...
Ubuntu系统下安装opencv3.x并打开图片和视频文件以及打开摄像头录制视频
目录一.安装opencv 1.前置安装条件 2.安装环境 3.下载opencv3.4.11 4.解压安装包 5.开始安装 6.检查是否安装成功二.显示图片和播放视频 1.显示图片 2.播放视频三 ...
opencv打开摄像头和视频文件
# 视频本质上是由一幅幅图片组成的,30帧意思就是每秒30张图片 #打开摄影头 import cv2#下面两行代码表示命名一个叫做"video"的窗口,并且可以修改窗口大小 cv2 ...
html5 video js控制摄像头的焦距,html 通过input video canvas 打开摄像头定制相机
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
【嵌入式05】Ubuntu下opencv新手操作:(打开图片及视频)
每一个程序背后都站着一堆优秀的代码库. 通过学习opencv图像库编程,了解如何借助第三方库函数完成一个综合程序设计. 一.关于opencv的安装二.编写一个打开图片进行特效显示的代码 1.撰写代码 ...
界面开发（4）--- PyQt5实现打开图像及视频播放功能
PyQt5创建打开图像及播放视频页面上篇文章主要介绍了如何实现登录界面的账号密码注册及登录功能,还简单介绍了有关数据库的连接方法.这篇文章我们介绍一下如何在设计的页面中打开本地的图像,以及实现视频播 ...
[LabVIEW]--通过LabVIEW打开计算机摄像头、图像显示、拍照。
[写在前面: 不是我高冷啊,我不知道为啥文章里看不到评论也没法回复,有小伙伴给我私信,隔了一年才给我推送...] 编写LabVIEW打开摄像头,采集图像的程序打开图像采集函数子选板,选择NI-IMA ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
案例分享：Qt内窥镜相机录像程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/108489004 长期持续项目技术分享,Sha ...

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

引用

新建hybrid文件

一、使用步骤

1.创建hybrid文件夹

uniapp中page跳转的页面

uniapp打开摄像头进行视频并拍照相关推荐

最新文章

热门文章