首页 > 其他分享 >H5前端调用摄像头拍照

H5前端调用摄像头拍照

时间:2022-11-21 11:45:02浏览次数:47  
标签:mediaDevices 拍照 浏览器 chrome 前端 H5 摄像头

需求:
最近有个移动端开发需求,用户打开相机点击拍照按钮,就会拍一张照片(照片不进手机系统相册),显示在页面下部小视窗。(界面大概如下)

就需求本身而言,若是交给Native同事去开发,就是一个自定义相机的功能。可能要看怎么阻止系统拍摄照片后不进手机系统相册。
对于此需求若是前端来实现的话,也可以实现。大概就是调起摄像头后,获取当前画面,然后截取当前帧的画面,转换成图片保存。基本步骤如下:

【思路问题不大,但是实际这样开发时,还会有以下几个问题:】

  1. 交互体验不好
    window.navigator.mediaDevices.getUserMedia浏览器BOM api时,需要用户手动点击确认,允许打开摄像头。交互体验不太好。
  2. 画面画质问题
    前端实现本质上和截图差不多,画面质量没有原生拍照效果好。
  3. 浏览器API mediaDevices为undefined问题
    window.navigator.mediaDevices在非以下三种情况下时,会为undefined,所以当为非https的域或者非本地localhost域,则都无法使用。
    a. localhost 域
    b. 开启了 HTTPS 的域
    c. 使用 file:/// 协议打开的本地文件
    【若想在http下也可使用,怎么办???】
    通过设置chrome浏览器,开启相应flag可以实现。
    a.. chrome浏览器输入chrome://flags/#unsafely-treat-insecure-origin-as-secure
    b. 将该 flag 切换成 enable 状态
    c. 输入框中填写需要开启的域名,譬如example.com,多个以逗号分隔

标签:mediaDevices,拍照,浏览器,chrome,前端,H5,摄像头
From: https://www.cnblogs.com/Sultan-ST/p/16910910.html

相关文章

  • uniapp使用web-view实现pdf、h5预览
    大家好,我是满心一般​​APP​​​中使用​​pdf​​​预览功能很常见,下面分享下关于​​uniapp​​​中使用​​web-view​​​进行​​pdf​​预览web-view​​​web-view......
  • 如何获取div下的子标签-字标签不一定还是div-如何获取div下的h5标签
    varhtmlStr="";htmlStr+="<divid=\"div_"+data.retData.id+"\"class=\"remarkDiv\"style=\"height:60px;\">";htmlStr+="<divstyle=\"position:relative;top:-4......
  • 无线网桥能带多少个摄像头
    ​​​​​     在无线监控工程的前期规划时,有很多朋友完成了监控点位及有线网络的部署规划,却对无线网桥带摄像头个数没有底。对于该问题有很多朋友咨询,其实无线网桥......
  • 全志t507 tp2815 采集摄像头视频 app应用demo ffmpeg5将NV21转rgb
      //摄像头驱动层输出的数据流是NV21格式,此处是使用ffmpeg5将nv21转为rgb并输出到屏幕上#include<stdio.h>#include<pthread.h>#include<unistd.h>#inc......
  • 移动端H5获取用户当前经纬度,地理位置信息
    移动端浏览器有自带的获取用户经纬度的方法,但是位置会有偏差。如果只是要个大概,就当我没说。这里我用的是腾讯的api,直接https引用。在页面上加上 <script charset="ut......
  • _h5ai
    H5ai是一款功能强大php文件目录列表程序,由德国开发者LarsJung主导开发,它提供多种文件目录列表呈现方式,支持多种主流Web服务器,例如Nginx、Apache、Cherokee、Light......
  • h5 尽量不要在 flex布局中使用 绝对定位(absolute fixed),一些ios机型不兼容
    h5  尽量不要在flex布局中使用绝对定位(absolute fixed),一些ios机型不兼容先看在flex 布局中使用absolute的样子(安卓是好的,部分ios不行)   解决方案:把fl......
  • 海康摄像头如何开启ONVIF功能?
    海康的部分摄像头默认不开启ONVIF功能的,可以通过登录摄像头页面开启   配置里面的高级配置,选择集成协议,钩上启用开放型网络视频接口,下面的用户列表添加ONVIF用户,保......
  • FFmpeg Java录制windows USB摄像头
    一、版本<dependency><groupId>org.bytedeco</groupId><artifactId>javacv-platform</artifactId><version>1.5.8</version></dependency><dependency><g......
  • 调用网页摄像头
    <!--CopyrightEpicGames,Inc.AllRightsReserved.--><!DOCTYPEHTML><html><head>  <linkrel="shortcuticon"href="/images/favicon.ico"type="im......