javascript實現(xiàn)攝像頭拍照預(yù)覽

使用javascript實現(xiàn)電腦攝像頭的打開和截圖的功能，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)郊區(qū),十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>攝像頭調(diào)用實例</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
 var video, mediaStreamTrack, canvas;//聲明全局變量
 //打開攝像頭
 function dk() {
  video = document.getElementById("v1");
  var videoObj = {
   "video" : true
  };
  var errBack = function(error) {
   console.log("Video capture error: ", error.code);
  };
  //根據(jù)瀏覽器的不同選取不同的支持
  if (navigator.getUserMedia) { // Standarda
   navigator.getUserMedia(videoObj, function(stream) {
    mediaStreamTrack = typeof stream.stop === 'function' ? stream
      : stream.getTracks()[1];
    video.src = stream;//獲取攝像頭抓取的到字節(jié)流
    video.play();//實時播放攝像頭
   }, errBack);
  } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
   navigator.webkitGetUserMedia(videoObj, function(stream) {
    mediaStreamTrack = typeof stream.stop === 'function' ? stream
      : stream.getTracks()[1];
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
   }, errBack);
  } else if (navigator.mozGetUserMedia) { // Firefox-prefixed
   navigator.mozGetUserMedia(videoObj, function(stream) {
    mediaStreamTrack = typeof stream.stop === 'function' ? stream
      : stream.getTracks()[1];
    video.src = window.URL.createObjectURL(stream);
    video.play();
   }, errBack);
  }
 }
 //截圖
 function jq() {
  canvas = document.getElementById("c1");
  var context = canvas.getContext("2d");
  //將視頻當(dāng)前的頁面轉(zhuǎn)換為圖片，顯示到畫板中
  context.drawImage(video, 0, 0, 200, 202);
  //把canvas圖像轉(zhuǎn)為img圖片
  /* var src = canvas.toDataURL("image/jpeg");
  createImg(src); */
 }
 //關(guān)閉攝像頭
 function gb() {
  mediaStreamTrack.stop();
 }
 //生成圖片
 /* function createImg(src) {
  var dv = document.getElementById("dv1");
  var img = document.createElement("img");
  img.setAttribute("src", src);
  img.setAttribute("width", 205);
  img.setAttribute("height", 205);
  dv.appendChild(img);
 } */
 //上傳
 /* function sc() {
  $.post('TestServlet', {
   "img" : canvas.toDataURL().substr(22)
  }, function(data, status) {
   alert(status != "success" ? "圖片處理出錯！" : data == "yes" ? "圖片上傳完成！"
     : data);
  });
 } */
</script>
<style type="text/css">
input[type="button"]{
border: 1px solid red;
}
</style>
</head>
<body>
 <div>
  <input type="button" value="打開" onclick="dk()"> 
  <input type="button" value="截取圖像" onclick="jq()"> 
  <input type="button" value="關(guān)閉" onclick="gb()">
 </div>
 <div>
  <!--視頻 -->
  <video width="200px" height="200px" id="v1"></video>
  <br />
  <!--畫板 -->
  <canvas id="c1"></canvas>
  <br />
 </div>
 <!--記錄每次截圖的結(jié)果 -->
 <!-- <div id="dv1"></div> -->
</body>
</html>

但是谷歌瀏覽器可以打開攝像頭，無法獲取實時數(shù)據(jù)。火狐比較好用。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：javascript實現(xiàn)攝像頭拍照預(yù)覽
路徑分享：http://www.chinadenli.net/article18/ispddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、小程序開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、App設(shè)計、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

javascript實現(xiàn)攝像頭拍照預(yù)覽