H5 实现拍照选景框效果利用
背景 在实际项目中，遇到了需要唤起手机摄像头拍照的需求，最开始是通过 的方式，可以直接唤起手机相机，但是用户拍照的方向各式各样，导致后续业务处理时，没有达到预期的效果。 基于此，产品同学期望能在用户拍照时给用户一个引导框（也就是平时我们在用第三方证件拍照时的取景框效果）。经过讨论，给出了两种解决方案，一种是通过我们自研，先尝试看一下效果，第二种是使用第三方的 SDK，仅使用他们的拍照功能。 本文档仅涉及第一种，即通过我们自研的方式，实现...
封装一个H5照相机组件（放大缩小、连拍、预览、手电筒，横竖屏拍摄）
项目上有个需求就是说移动端网页中的照相机要支持连拍功能。 要知道咱们一般网页中通过input标签调用出来的照相机都是拍完后需要进行点击确认操作，然后再重新点击拍照按钮调起照相机如此往复，这样的交互方式对于需要快速拍摄照片的场景来说效率确实太低了。 如果本机摄像头无法进行连拍操作的话只能通过直接调用媒体摄像头的方式看看能否实现，考虑到开源的组件UI和交互方式可能无法满足项目需要且也不太好扩展功能所以觉得自己封装一个。 使用到的技术 Nav...
H5移动端-解决点击输入框时页面自动放大的问题
问题 在移动端项目，我们常遇到的一个问题：用户点击输入框时，页面会不期望地发生自动缩放，这既打断了用户的输入流程，也影响了整体的用户体验。 我们的目标是优化这一行为，确保用户在点击输入框时，页面能够保持稳定，仅允许用户专注于内容的输入，从而提升产品的可用性和满意度。 解决前后效果对比 方案 针对移动端点击输入框导致页面自动缩放的问题，我们需要根据不同操作系统（主要是安卓与iOS）采取差异化的解决方案。 安卓：通常可以通过在HTML文档头...
h5调用手机摄像头踩坑
一般业务也很少接触摄像头，有也是现成的工具库扫个二维码。难得用一次，记录下踩坑。 2.1. 这个就不用多说了，缺点就是没办法自定义界面，它是调用的系统原生相机界面。 2.2. 由于我需要自定义界面，就像下面这样： 所以我选择了这个方案，这个 使用起来其实很简单： 可以看到这个效果。 如果你复制我的代码，在 上肯定能运行，但是你想在手机上试试的时候就会发现很多问题。 3.1. 需要 由于浏览器的安全设置，除了 和 连接，你都没办法获取到...
探秘移动端网页调用摄像头的两种方式
简介： PC 端网页调用摄像头的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。而在移动端网页调用摄像头的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。 前言小叙 PC 端网页调用摄像头 的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。 而在 移动端网页调用摄像头 的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。 H5 相较于native app 一直被诟病的就有 调...
PC调试手机微信浏览器
此方案，可以调试一些仅可在微信客户端才能打开的网页，以及一些需要微信授权的网页，都可以用此方式进行真机调试，可快速分析和逆向 准备工具 一部手机 一台电脑 一条数据线 首先用数据线把手机与电脑连接 然后手机进入到开发者模式并且要是开启状态，具体进入方式，根据机型不同，进入方式不同，自行百度。 进入到开发者选项之后，开启USB调试模式。 然后在手机微信浏览器随便进入一个网站，例如： 再回到电脑浏览器输入： chrome内核的浏览器输入 c...