h5页面调用摄像头(简易版)

<input type="button" value="OpenVideo" id="btnOpenVideo" />
<input type="button" value="TakePicture" id="btnTakePicture" />
<input type="button" value="CloseVideo" id="btnCloseVideo" />
<br />
<video style="width:500px;height:500px;border:1px solid #000000;" id="videoTest"></video>
<canvas style="width:500px;height:500px;border:1px solid #000000;" id="canvasTest"></canvas>
<script type="text/javascript">
  window.onload = function () {
    let btnOpenVideo = document.getElementById(‘btnOpenVideo‘);
    let btnTakePicture = document.getElementById(‘btnTakePicture‘);
    let btnCloseVideo = document.getElementById(‘btnCloseVideo‘);
    let video = document.getElementById(‘videoTest‘);
    let canvas = document.getElementById(‘canvasTest‘).getContext(‘2d‘);
    btnOpenVideo.onclick = function () {
      window.navigator.getUserMedia({
        video: true/*视频/摄像头*/        /*audio:true*//*音频/麦克风*/
      }, function (param) {
        video.src = window.URL.createObjectURL(param);/*设置video控件路径,实时显示摄像头的图像*/
        btnCloseVideo.onclick = function () {/*关闭摄像头*/
          if (param.getTracks())/*Chrome*/
            param.getTracks()[0].stop();
          else
            param.stop();
        };
        btnTakePicture.onclick = function () {/*拍照*/
          canvas.drawImage(document.getElementById(‘videoTest‘), 0, 0, 500, 500);/*将拍摄的照片画到canvas中*/
        };
      }, function (err) {
        alert(err);
      });
    };
  };
</script>
时间: 2024-10-10 00:48:03

h5页面调用摄像头(简易版)的相关文章

混合app开发,h5页面调用ios原生APP的接口

混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行机制也是能够同步运行:但ios上就没那么容易了:. 在此我就不说兼容安卓的问题,只把ios问题说说: 问题1:H5调用ios接口,ios需要初始化,js代码在ISO上只运行一次 解决: 本人使用是angular框架搭建的H5页面 var ua = navigator.userAgen

微信h5页面调用第三方位置导航

微信h5页面拉起第三方导航应用 需要准备的: 通过微信认证的公众号有备案过的域名 背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能 需求:当用户点击导航按钮时,跳转到第三方app进行导航 参考:微信公众号开发文档 步骤: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/... jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,相信用过微信其他api的这一步都可以省了

H5页面调用手机打电话功能

<head>里面加上: <meta name="format-detection" content="telephone=yes"/> 需要拨打电话的地方: <a href="tel:400-0000-688">400-0000-688</a> 发短信: <a href="sms:18688888888">发短信</a> 点击 页面上的电话号码 ,页面会调

h5图片上传简易版(FileReader+FormData+ajax)

一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. input.files是一个数组,由传入的file对象组成.每个file对象包含以下属性: lastModified:数值,表示最近一次修改时间的毫秒数: lastModifiedDate

h5页面调用cmd命令并隐藏cmd弹窗

js代码 /*** 通过js调用cmd命令利用ffmpeg实现录屏或者录像功能 ***/ var  cmd = new ActiveXObject("WScript.Shell"); /* 命令参数说明 cmd.exe /c dir 是执行完dir命令后关闭命令窗口. cmd.exe /k dir 是执行完dir命令后不关闭命令窗口. cmd.exe /c start dir 会打开一个新窗口后执行dir指令,原窗口会关闭. cmd.exe /k start dir 会打开一个新窗口后

手机版制作H5页面免费工具大集合

搜狐快站 搜狐快站是搜狐推出的免费一站式移动建站云平台,不久前他们也进军了H5页面制作的领域.拖拽式操作,简单易上手:有辅助线,支持图片微调:背景图片有滤镜功能,同一组件支持多重动画,自主程度高.另外还支持表单.电话.视频.自动播放.JS插件等功能.最重要的是,上述功能全部免费,完全无需担心制作成本. 初页 初页作为手机端制作动态海报的APP,门槛还是比较低的,容易上手,可以直接在手机上编辑,制作极为便利,图文混排的模板也很丰富.可免费下载安卓版和苹果版初页App,或通过电脑在线创建.编辑,轻松

C#调用OpenCV开发简易版美图工具

前言 在C#调用OpenCV其实非常简单,因为C#中有很多OPenCV的开源类库. 本文主要介绍在WPF项目中使用OpenCVSharp3-AnyCPU开源类库处理图片,下面我们先来做开发前的准备工作. 准备工作 首先,我们先创建一个WPF项目. 然后,在Nuget上搜索OpenCVSharp,如下图: 接着,我们选择OpenCVSharp3-AnyCPU选项进行安装 . 安装了OpenCVSharp3-AnyCPU后,我们的项目会自动引入4个类库,如下图: 到这里,我们的准备工作就完成了,非常

Android学习之路——简易版微信为例(三)

最近好久没有更新博文,一则是因为公司最近比较忙,另外自己在Android学习过程和简易版微信的开发过程中碰到了一些绊脚石,所以最近一直在学习充电中.下面来列举一下自己所走过的弯路: (1)本来打算前端(即客户端)和后端(即服务端)都由自己实现,后来发现服务端已经有成熟的程序可以使用,如基于XMPP协议的OpenFire服务器程序:客户端也已经有成熟的框架供我们使用,如Smack,同样基于XMPP协议.这一系列笔记式文章主要是记录自己学习Android开发的过程,为突出重点(Android的学习)

【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动