<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs" Inherits="CRM3.cam.pacam" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 GetUserMedia Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
<input type="button" title="开启摄像头" value="开启前置摄像头" onclick="getMedia(0);" /><input type="button" title="开启摄像头" value="开启后置摄像头" onclick="getMedia(1);" /><br />
<video height="120px" autoplay="autoplay"></video><hr />
<input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />
<canvas id="canvas1" height="120px" ></canvas><hr />
<input type="button" title="视频" value="视频" onclick="getVedio();" /><br />
<canvas id="canvas2" height="120px"></canvas>

<script type="text/javascript">
var video = document.querySelector('video');
var audio, audioType;

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

var exArray = []; //存储设备源ID
MediaStreamTrack.getSources(function (sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
//这里会遍历audio,video，所以要加以区分
if (sourceInfo.kind === 'video') {
exArray.push(sourceInfo.id);
}
}
});

function getMedia(a) {
if (navigator.getUserMedia) {
navigator.getUserMedia({
'video': {
'optional': [{
'sourceId': exArray[a] //0为前置摄像头，1为后置
}]
},
'audio': true
}, successFunc, errorFunc); //success是获取成功的回调函数
}
else {
alert('Native device media streaming (getUserMedia) not supported in this browser.');
}
}

function successFunc(stream) {
//alert('Succeed to get media!');
if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
video.mozSrcObject = stream;
}
else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream;
}

//video.play();

// 音频
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
function errorFunc(e) {
alert('Error！' + e);
}

// 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
function drawVideoAtCanvas(video, context) {
window.setInterval(function () {
context.drawImage(video, 0, 0, 90, 120);
}, 60);
}

//获取音频格式
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return ('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return ("ogg");
}
}
return false;
}

// vedio播放时触发，绘制vedio帧图像到canvas
// video.addEventListener('play', function () {
// drawVideoAtCanvas(video, context2);
// }, false);

//拍照
function getPhoto() {
context1.drawImage(video, 0, 0, 90, 120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
}

//视频
function getVedio() {
drawVideoAtCanvas(video, context2);
}

</script>
</body>
</html>

h5调用手机前后摄像头，拍照的更多相关文章

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

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

  2. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  3. js实现浏览器调用电脑的摄像头拍照

    <!DOCTYPE html> <html lang="en"> <head> <style> * { margin: ; padd ...

  4. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

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

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

  6. H5调用手机拍照并展示在前端页面

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

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

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

  8. H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

    H5使用input标签调用系统默许相机,摄像,录音功能.使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input ...

  9. html5调用手机本地摄像头和相册识别二维码详细实现过程

    项目中有用到h5识别我们的单据,单据上面有二维码. 实现的场景就是业务人员扫码 类似以下场景  业务员拿到单据以后,直接可以扫码进入相关单据业也可以 输入二维码下方的号码进行识别 下面是h5的页面构造 ...

随机推荐

  1. spring boot系统学习（知识点笔记）

    一.http的注解配置 1.@SpringBootAplication=@SpringBootConfiguration(其实就是个@Configuration)+@EnableAutoConfigu ...

  2. doT中嵌套for循环的使用

    1.数据结构 var goods = [ { "id": "1", "name": "衣服", "goods& ...

  3. MYSQL主从复制搭建及切换操作（GTID与传统）

    结构如下: MYSQL主从复制方式有默认的复制方式异步复制,5.5版本之后半同步复制,5.6版本之后新增GTID复制,包括5.7版本的多源复制. MYSQL版本:5.7.20 操作系统版本:linux ...

  4. JavaScript实现双向链表

    title: JavaScript实现双向链表 toc: false date: 2018-10-07 10:11:36 append(element): 添加元素到链表尾部 insert(posit ...

  5. Kali linux 2016.2（Rolling）中的payloads模块详解

    不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)中的Exploits模块详解 payloads模块,也就是shellcode,就是在漏洞利用成功后所要做的事情.在M ...

  6. C#线程调用带参数的方法，给控件赋值

    System.Threading.Thread thread = new System.Threading.Thread(() => { //各种业务 //定义一个委托 public deleg ...

  7. 记一次"未将对象引用设置到对象的实例"问题的排查过程

    最近在给一个老项目做数据对接接口. 背景一 该项目最后更新日期为2006年,使用ASP.NET WebForm..Net2.0.OJB.Castle Avtive Record等.由于是某集团的子系统 ...

  8. Creative Cloud 安装出错，错误代码：207

    C:\Users\xxx\AppData\Local\Temp\CreativeCloud\ACC\AdobeDownload %Temp%\CreativeCloud\ACC\AdobeDownlo ...

  9. 滚动监听 after选择器

    一.如何实现滚动到一定位置将内容固定在页面顶部 window.onscroll=function(){ //滚动的距离,距离顶部的距离 var topScroll =document.body.scr ...

  10. Json相关内容

    一. 导入包:net.sf.json.JSONObject 代码 import net.sf.json.JSON; import net.sf.json.JSONArray; import net.s ...