在机缘巧合之下，了解到用HTML5和javascript调用摄像头来实现拍照功能，今天就把大致原理写下来。页面布局很简单，就是一个input标签，两个HTML5元素video、canvas和一个button按钮。video元素带有开启视频功能的函数，canvas元素带有捕捉图像功能的函数。

源代码如下：

<!doctype html>
<html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<script>
function getMedia() {
let constraints = {
video: {width: 500, height: 500},
audio: true
};
//获得video摄像头区域
let video = document.getElementById("video");
//这里介绍新的方法，返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}

function takePhoto() {
//获得Canvas对象
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
}
</script>
</body>
</html>

介绍一下代码中涉及到的两个函数：

getMedia()函数：

constraints 参数是一个包含了video和audio两个成员的MediaStreamConstraints对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的Promise对象就会处于rejected［失败］状态，NotFoundError作为rejected［失败］回调的参数。

有关于constraints对象的具体细节请点击下方链接：

有关于constraints对象的具体细节介绍

getMedia()函数中的其他代码解释都在源代码中，不再赘述。

takePhoto()函数：

let video =document.getElementById("video");

let  canvas =document.getElementById("canvas");

解释：Javascript使用id来获取video和canvas元素。

let  ctx =ty.getContext('2d');

解释：创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、

字符以及添加图像的方法。

下面对HTML5中的canvas drawImage（）方法做一介绍：

context.drawImage(img,x,y,width,height);

img：规定要使用的图像、画布或视频。

x: 在画布上放置图像的 x 坐标位置。

y:  在画布上放置图像的 y 坐标位置。

width: 要使用的图像的宽度。

height: 要使用的图像的高度。

以上就是基本的drawImage()方法的介绍，要想了解更多，请点击下方链接。

更多内容介绍drawImage（）方法
---------------------
作者：lishundi
来源：CSDN
原文：https://blog.csdn.net/lishundi/article/details/80604747
版权声明：本文为博主原创文章，转载请附上博文链接！

html 通过input video canvas 打开摄像头 定制相机的更多相关文章

  1. html5打开摄像头并用canvas模拟拍照 - 转

    <video id="video" width="640" height="480" autoplay></video&g ...

  2. html5打开摄像头并用canvas模拟拍照

    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...

  3. js 打开摄像头方法 （定制摄像头）

    var video = document.getElementById("video");if (navigator.mediaDevices && navigat ...

  4. JS打开摄像头并截图上传

    直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...

  5. 手机端file限制只能选择图片、视频、音频，直接打开摄像头拍照或录像

    限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...

  6. HTML5按键打开摄像头和拍照

    HTML5实现按键打开摄像头和拍照 步骤: 1.创建一个打开摄像头按钮的标签.video标签.拍照的按钮标签.画布 2.实现打开摄像头的功能 3.实现拍照功能   具体实现代码: <!DOCTY ...

  7. Unity打开摄像头占满全屏

    Unity打开摄像头占满全屏 AR项目需求,Unity打开摄像头作为背景渲染占满全屏~ Unity对设备硬件操作的API并不是太友好~打开一个摄像头,渲染到屏幕上也都得自己写,虽然步骤少,提取摄像头t ...

  8. OpenCV x64 vs2010 下打开摄像头录制视频写成avi（代码为转载）

    首先参照下面这里进行opencv x64位机器下面的配置 http://wiki.opencv.org.cn/index.php/VC_2010%E4%B8%8B%E5%AE%89%E8%A3%85O ...

  9. OpenCV打开摄像头失败

    <span style="font-family: Arial, Helvetica, sans-serif;">#include <stdio.h>< ...

随机推荐

  1. redis实现分布式锁需要考虑的因素以及可重入锁实现

    死锁 错误例子 解决方式  防止死锁 通过设置超时时间  不要使用setnx key   expire 20  不能保证原子性 如果setnx程序就挂了 没有执行expire就死锁了  reidis2 ...

  2. STL_set

    #include <iostream> #include <set> #include <string> #include <cstdio> using ...

  3. bzoj4237稻草人

    题意:给你一个田地,问左下角和右上角有稻草人并且内部除了边界都没有稻草人的矩形数. 标程: #include<bits/stdc++.h> using namespace std; int ...

  4. rstrip

    ====== rstrip ====== Description Returns a copy of the string with trailing characters removed. Synt ...

  5. foreach循环的跳出

    由于foreach循环中不像for循环可以直接通过return或break来终止当前循环,不过这里可以借助try...catch...来完成var arr = [1,2,3,4,5,6,7,8,9,1 ...

  6. Delphi GlobalAlloc、GlobalLock、GlobalUnlock、GlobalFree 函数

    GlobalAlloc 函数 分配一块内存,该函数会返回分配的内存句柄. GlobalLock 函数 锁定内存块,该函数接受一个内存句柄作为参数,然后返回一个指向被锁定的内存块的指针. 您可以用该指针 ...

  7. pandas for python

    http://pandas.pydata.org/pandas-docs/stable/user_guide/index.html 不算太难,需要拿一本线性代数看看矩阵原理即可.重点在于考虑如何运用, ...

  8. Hbase集群类型|集群配置|服务器选型|磁盘容量规划

    HBase和Hadoop的集群类型 1.单机模式 主要用于开发工作,一台机器上运行所有的守护进程,或者一台机器运行多个虚拟机.一般用于评估和测试. 2.小型集群 20台机器以内的集群,不同的机器运行不 ...

  9. jquery中的ajax方法参数的用法和他的含义

    jquery中的ajax方法参数的用法和他的含义: 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:  要求为String类型的参数,请求方式(pos ...

  10. 剑指offer——40字符串的排列

    题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述: 输 ...