在機緣巧合之下，了解到用HTML5和javascript調用攝像頭來實現拍照功能，今天就把大致原理寫下來。頁面布局很簡單，就是一個input標簽，兩個HTML5元素video、canvas和一個button按鈕。video元素帶有開啟視頻功能的函數，canvas元素帶有捕捉圖像功能的函數。

源代碼如下：

GET VIDEO

拍照

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);

}

介紹一下代碼中涉及到的兩個函數：

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

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

html5打開攝像頭并用canvas模擬拍照 - 轉

html5打開攝像頭并用canvas模擬拍照

網上很多關于用HTML5打開本地攝像頭的文章,但各有瑕疵.根據我自己的親身體驗,我分享一下我用HTML5打開攝像頭的經驗. 廢話不多說,直接看代碼. HTML代碼:

js 打開攝像頭方法 (定制攝像頭)

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

JS打開攝像頭并截圖上傳

直入正題,JS打開攝像頭并截圖上傳至后端的一個完整步驟 1. 打開攝像頭主要用到getUserMedia方法,然后將獲取到的媒體流置入video標簽 2. 截取圖片主要用到canvas繪圖,使用dra ...

手機端file限制只能選擇圖片、視頻、音頻，直接打開攝像頭拍照或錄像

限制只能選擇圖片 限制只能選擇視頻

HTML5按鍵打開攝像頭和拍照

HTML5實現按鍵打開攝像頭和拍照 步驟: 1.創建一個打開攝像頭按鈕的標簽.video標簽.拍照的按鈕標簽.畫布 2.實現打開攝像頭的功能 3.實現拍照功能 ? 具體實現代碼:

Unity打開攝像頭占滿全屏

Unity打開攝像頭占滿全屏 AR項目需求,Unity打開攝像頭作為背景渲染占滿全屏~ Unity對設備硬件操作的API并不是太友好~打開一個攝像頭,渲染到屏幕上也都得自己寫,雖然步驟少,提取攝像頭t ...

OpenCV x64 vs2010 下打開攝像頭錄制視頻寫成avi(代碼為轉載)

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

OpenCV打開攝像頭失敗

#include &lt ...

隨機推薦

QTP學習筆記之—VBS

1.ToString() : Returns a string that represents the current test object. Example The following examp ...

sqlserver 用 RowNumber 分組

SELECT RECORD.[RECORD_ID] ,RECORD.[WORKFLOW_INFO_ID] ,RECORD.[FORM_CODE] ,RECORD.[APPLY_DATE] ,RECOR ...

NGUI 粒子顯示在上級

http://bbs.taikr.com/thread-2272-1-1.html [NGUI]3.0+版本,粒子在UI后面顯示 -- : 48人閱讀 評論() 收藏 舉報 [Unity3D][NGU ...

this,super關鍵字的使用

this關鍵字 1.this是對象的別名,是當前類的實例引用 2.在類的成員方法內部使用,代替當前類的實例.在Java中,本質上是指針,相當于C++中的指針概念.如果方法中的成員在調用前沒有操作實例名 ...

UOJ 218 火車管理

http://uoj.ac/problem/218 思路:建立一個可持久化線段樹,代表這個位置的火車是哪輛,然后再弄一個線段樹維護答案. 如果詢問,直接詢問線段樹. 如果區間壓入,直接在主席樹上面壓入 ...

2014 Shanghai Invitation Contest

題目鏈接 http://acm.hdu.edu.cn/search.php?field=problem&key=2014%C9%CF%BA%A3%C8%AB%B9%FA%D1%FB%C7%EB ...

underscore.js,js工具庫

官方文檔:http://underscorejs.org/ var totalCheckPriceVal = _.reduce(tableData[0],function(memo,num){ var ...

java split方法

String a = "O|O||"; System.out.println(a.split("\\|").length); //["O", ...

restfull環境搭建-helloword

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的html5 video js控制摄像头的焦距,html 通过input video canvas 打开摄像头 定制相机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。