这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

1. 背景

一般业务也很少接触摄像头,有也是现成的工具库扫个二维码。难得用一次,记录下踩坑。

2.调用摄像头的方法

2.1. input

<!-- 调用相机 -->
<input type="file" accept="image/*" capture="camera">
<!-- 调用摄像机 -->
<input type="file" accept="video/*" capture="camcorder">
<!-- 调用录音机 -->
<input type="file" accept="audio/*" capture="microphone">

这个就不用多说了,缺点就是没办法自定义界面,它是调用的系统原生相机界面。

2.2. mediaDevices

由于我需要自定义界面,就像下面这样:

所以我选择了这个方案,这个api使用起来其实很简单:

<!-- 创建一个video标签用来播放摄像头的视屏流 -->
<video id="video" autoplay="autoplay" muted width="200px" height="200px"></video>
<button onclick="getMedia()">开启摄像头</button>
async getMedia() {
// 获取设备媒体的设置,通常就video和audio
const constraints = {
// video配置,具体配置可以看看mdn
video: {
height: 200,
wdith: 200,
},
// 关闭音频
audio: false
};
this.video = document.getElementById("video");
// 使用getUserMedia获取媒体流
// 媒体流赋值给srcObject
this.video.srcObject = await window.navigator.mediaDevices.getUserMedia(constraints);
// 直接播放就行了
this.video.play();
}

可以看到这个效果。

这个api的配置可以参考MDN

// 截图拍照
takePhoto() {
const video = document.getElementById("video");
// 借助canvas绘制视频的一帧
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
ctx.drawImage(this.video, 0, 0, 300, 300);
},
// 停止
stopMedia() {
// 获取媒体流
const stream = this.video.srcObject;
const tracks = stream.getTracks();
// 停止所有轨道
tracks.forEach(function (track) {
track.stop();
})
this.video.srcObject = null;
}

3.坑

如果你复制我的代码,在localhost上肯定能运行,但是你想在手机上试试的时候就会发现很多问题。

3.1. 需要https

由于浏览器的安全设置,除了localhosthttps连接,你都没办法获取到navigator.mediaDevices,打印出来是undefined。如果要在手机上测试,你要么用内网穿透代理一个https,要么部署在https域名的服务器上测试。

3.2. 设置前后摄像头

默认是使用user设备,也就是前摄像头,想要使用后摄像头也是有配置的,

async getMedia() {
// ...
let constraints = {
video: {
height: 200,
wdith: 200,
// environment设备就是后置
facingMode: { exact: "environment" },
},
audio: false
};
// ...
}

3.3. 设置显示区域大小

我的需求是铺满整个设备,所以我想当然的直接把video样式宽高设置成容器大小:

#video {
width: 100%;
height: 100%;
} async getMedia() {
// ....
// 将宽高设置成容器大小
const pageSize = document.querySelector('.page').getBoundingClientRect()
let constraints = {
video: {
height: pageSize.height,
width: pageSize.width,
facingMode: { exact: "environment" },
},
audio: false
};
//....
}

发现这个视频横着而且没有铺满屏幕。

通过输出video的信息可以看到,设备返回的视频流宽高是反的:

所以配置换一下就行了:

    let constraints = {
video: {
height: pageSize.width,
width: pageSize.height,
},
};

本文转载于:

https://juejin.cn/post/7287965561035210771

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--h5调用手机摄像头踩坑的更多相关文章

  1. h5调用手机摄像头/相册

    <!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...

  2. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  3. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  4. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  5. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 亲测可用)html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  7. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  8. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  9. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  10. h5调用手机前后摄像头,拍照

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...

随机推荐

  1. 盘点Java集合(容器)概览,Collection和Map在开发中谁用的最多?

    写在开头 在Java的世界里万物皆对象.但我认为是万物皆数据,世界由各种各样数据构建起来,我们通过程序去实现数据的增删改查.转入转出.加减乘除等等,不同语言的实现方式殊途同归.由此可见,数据对于程序语 ...

  2. JS LeetCode 566. 重塑矩阵题解分析,数组降维的几种方式

    壹 ❀ 引 今天是过完年到公司的第二天,年前因为封版,到今天我们小组是第一个发版的组,然后就各种踩坑,到现在还在公司等运维解决jenkins问题,闲着也是闲着,做一道算法题,简单记录下解题思路,本题来 ...

  3. CF1833G Ksyusha and Chinchilla

    题目链接 题解 知识点:贪心,树形dp. 当 \(3 \not \mid n\) 时,显然无解. 考虑一种贪心策略,从叶子节点往上只,要以当前节点为根的子树大小能被 \(3\) 整除,就立刻切除这棵子 ...

  4. Codeforces Round #824 (Div. 2) A-E

    比赛链接 A 题解 知识点:贪心,数学. 注意到三段工作时间一共 \(n-3\) 天,且天数实际上可以随意分配到任意一段,每段至少有一天,现在目的就是最大化段差最小值. 不妨设 \(l_1<l_ ...

  5. NC20875 舔狗舔到最后一无所有

    题目链接 题目 题目描述 作为队伍的核心,forever97很受另外两个队友的尊敬. Trote_w每天都要请forever97吃外卖,但很不幸的是宇宙中心forever97所在的学校周围只有3家fo ...

  6. Vdbench 参数详解

    Vdbench 参数详解 HD:主机定义 如果您希望展示当前主机,则设置 hd= localhost.如果希望指定一个远程主机,hd= label. system= IP 地址或网络名称. clien ...

  7. Frogger题解

    Frogger 法一:floyd #include<iostream> #include<cstring> #include<algorithm> #include ...

  8. win32 - Direct3D 11的demo创建

    我们可以使用D3D为游戏,科学和桌面应用程序创建3-D图形. 非官方demo实例: https://github.com/Ray1024/D3D11Tutorial 当然,我们第一步要开始认识里面的基 ...

  9. docker 发布.net core 项目(linux)

    一.准备阶段:前提:一台linux系统,安装好了Docker并启动 1.上传.netcore项目压缩文件 2.解压 注:若没有解压软件,先下载rar解压软件再安装:需注意系统是64位还是32   (下 ...

  10. 用Visual Studio把代码放到GitLab

    1.点"Git更改" 2.点"创建Git仓库--": 3.点"现有远程",再输入"远程URL": 4.在出现的警告框里选 ...