使用js呼叫攝像頭拍照
阿新 • • 發佈：2018-12-27
使用js呼叫攝像頭拍照
在一些瀏覽器裡已經可以使用web api呼叫攝像頭功能了。
基於此可以經行拍照攝像功能，網上找了些資料，然後實現了簡單的拍照功能
演示地址 bingxl.cn/webrtc.html
程式碼
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>web RTC 測試</title>
<style>
.booth <span class="hljs-attribute">background</span>:<span class="hljs-number">#ccc</span>;
<span class="hljs-attribute">border</span>: <span class="hljs-number">10px</span> solid <span class="hljs-number">#ddd</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
}
</style>
</head>
<body>
<div class=“booth”>
<video id=“video” width=“400” height=“300”></video>
<button id=‘tack’> snap shot</button>
<canvas id=‘canvas’ width=‘400’ height=‘300’></canvas>
<img id=‘img’ src=’’>
</div>
<script >
var video = document.getElementById(‘video’),
canvas = document.getElementById(‘canvas’),
snap = document.getElementById(‘tack’),
img = document.getElementById(‘img’),
vendorUrl = window.URL || window.webkitURL;
<span class="hljs-comment">//媒體物件</span>
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
<span class="hljs-attr">video</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">//使用攝像頭物件</span>
audio: <span class="hljs-literal">false</span> <span class="hljs-comment">//不適用音訊</span>
}, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">strem</span>)</span>{
<span class="hljs-built_in">console</span>.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>{
<span class="hljs-comment">//error.code</span>
<span class="hljs-built_in">console</span>.log(error);
});
snap.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-comment">//繪製canvas圖形</span>
canvas.getContext(<span class="hljs-string">'2d'</span>).drawImage(video, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>);
<span class="hljs-comment">//把canvas影象轉為img圖片</span>
img.src = canvas.toDataURL(<span class="hljs-string">"image/png"</span>);
})
</script>
</body>
</html>
特別說明
- 有些瀏覽器可能不支援此功能
- 必須通過伺服器開啟頁面，通過files：//開啟無效
- 如果通過遠端伺服器開啟則必須是https協議， http協議也無法使用
部落格地址：http://www.cnblogs.com/scarecrowlxb/