<%@ 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. 百度 谷歌 Twitter，这么多短链接服务（Short Url）究竟哪家强？

    一.短链接是什么 url=HPqdQ5VR3vA39x7ZWoWyNzwWnsDhTbh66BTpdzsJLroBDzFRm4JV-G818Zc027uZrwe7zxtxnD4H2FUahftpUK& ...

  2. iOS开发中的NSDateFormatter日期格式解析总结

    在工作中,常常遇到将时间解析出来转换成自己相应要求的时间格式,之前也有收集相应的转换格式,如今将自己收集的一部分了做个分享,应该比較完好了,欢迎大家继续补充 年 y 将年份 (0-9) 显示为不带前导 ...

  3. apache rewrite 正則表達式基础

    用了好几次rewrite,用的次数不是非常多,每次都忘,都得又一次上网上找一堆现看,总结一下,以免以后忘了 =====================分隔符===================== ...

  4. leetCode 72.Edit Distance (编辑距离) 解题思路和方法

    Edit Distance Given two words word1 and word2, find the minimum number of steps required to convert  ...

  5. STM32系列ARM单片机介绍

    STM32系列基于专为要求高性能.低成本.低功耗的嵌入式应用专门设计的ARM Cortex-M3内核.按性能分成两个不同的系列:STM32F103"增强型"系列和STM32F101 ...

  6. activity生命周期的onPause和onStop

    搞了这么长时间的android开发,却对一些基础的东西一直模棱两可...就比方这个onPause和onStop. 假设从一个界面,跳到还有一个界面,那么是调用哪个呢? 经过我的实验.搞清楚了.onPa ...

  7. [雅礼NOIP2018集训 day3]

    考试的时候刚了T1两个小时线段树写了三个子任务结果发现看错了题目,于是接下来一个半小时我自闭了 result=历史新低 这告诉我们,打暴力要端正态度,尤其是在发现自己之前出锅的情况下要保持心态的平和, ...

  8. Spark SQL概念学习系列之Spark SQL概述

    很多人一个误区,Spark SQL重点不是在SQL啊,而是在结构化数据处理! Spark SQL结构化数据处理 概要: 01 Spark SQL概述 02 Spark SQL基本原理 03 Spark ...

  9. JS循环 for while 全局/局部变量 短路

    循环语句: For for循环的格式 for(var i = 0; i < 10; i ++){ } for循环的执行顺序: ①   ② 若判断为 true  进④  进③ 进②判断 ……循环 ...

  10. STM8S103之独立看门狗和窗口看门狗

    独立看门狗时钟来源为LSI:窗口看门狗时钟来源为CPU: 窗口看门狗窗口的含义是:喂狗必须在一定的窗口期内完成,不能过早也不能过晚. 总结:防止程序复位,用独立看门狗. 独立看门狗使用的流程:参见库函 ...