www.bo500.com

2019-11-03JavaScript7410
  • 詳情內容
  • 留言點評

話不多說,javascript就是這麼強大,首先代碼第一則︰

<p> <button onclick="openMedia()">打開</button> <button onclick="closeMedia()">關閉</button> <button onclick="drawMedia()">截取</button></p><video id="video" class="bg"></video><canvas id="qr-canvas"></canvas><script type="text/javascript"> var video = document.querySelector('video'); var text = document.getElementById('text'); var canvas1 = document.getElementById('qr-canvas'); var context1 = canvas1.getContext('2d'); var mediaStreamTrack;  // 一堆兼容代碼 window.URL = (window.URL  window.webkitURL  window.mozURL  window.msURL); if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function(constraints) {  var getUserMedia = navigator.webkitGetUserMedia  navigator.mozGetUserMedia  navigator.msGetUserMedia;  if (!getUserMedia) {  return Promise.reject(new Error('getUserMedia is not implemented in this browser'));  }  return new Promise(function(resolve, reject) {  getUserMedia.call(navigator, constraints, resolve, reject);  }); } }   //攝像頭調用配置 var mediaOpts = { audio: false, video: true, video: { facingMode: "environment"} // 或者 "user" // video: { width: 1280, height: 720 } // video: { facingMode: { exact: "environment" } }// 或者 "user" }  // 回調 function successFunc(stream) { mediaStreamTrack = stream; video = document.querySelector('video'); if ("srcObject" in video) {  video.srcObject = stream } else {  video.src = window.URL && window.URL.createObjectURL(stream)  stream } video.play(); } function errorFunc(err) { alert(err.name); }  // 正式啟動攝像頭 function openMedia(){ navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc); }  //關閉攝像頭 function closeMedia(){ mediaStreamTrack.getVideoTracks().forEach(function (track) {  track.stop();  context1.clearRect(0, 0,context1.width, context1.height);//清除畫布 }); }  //截取視頻 function drawMedia(){ canvas1.setAttribute("width", video.videoWidth); canvas1.setAttribute("height", video.videoHeight); context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); } </script>

第二種是使用getUserMedia這個API來獲取攝像頭的權限,兼容Chrome和火狐瀏覽器,不兼容IOS

<!DOCTYPE html><html lang="zh"> <head>  <meta charset="UTF-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <meta http-equiv="X-UA-Compatible" content="ie=edge" />  <title>Document</title> </head> <body>  <video src=""></video>  <script type="text/javascript">   var opt = {    audio: true,    video: {     width: 375,     height: 603    }   };   navigator.mediaDevices.getUserMedia(opt)    .then(function(mediaStream) {     var video = document.querySelector('video');     video.srcObject = mediaStream;     video.onloadedmetadata = function(e) {      video.play();     };    })    .catch(function(err) {     console.log(err.name + ": " + err.message);    }); // always check for errors at the end.  </script> </body></html>

第三種方法與第二種類似,多出截屏和保存功能

<!doctype html><html><head><meta charset="utf-8" /><title></title><style>video { border: 1px solid #ccc; display: block; margin: 0 0 20px 0; float:left;}canvas { margin-top: 20px; border: 1px solid #ccc; display: block;}</style></head><body><video width="640" height="480" id="myVideo"></video><canvas width="640" height="480" id="myCanvas"></canvas><button id="myButton">截圖</button><button id="myButton2">預覽</button><button id="myButton3"><a download="video.png">另存為</a></button></body><script>window.addEventListener('DOMContentLoaded',function(){var cobj=document.getElementById('myCanvas').getContext('2d');var vobj=document.getElementById('myVideo');getUserMedia({video:true},function(stream){vobj.src=stream;vobj.play();},function(){});document.getElementById('myButton').addEventListener('click',function(){cobj.drawImage(vobj,0,0,640,480);document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");},false);document.getElementById('myButton2').addEventListener('click',function(){window.open(cobj.canvas.toDataURL("image/png"),'_blank');},false);},false);function getUserMedia(obj,success,error){if(navigator.getUserMedia){getUserMedia=function(obj,success,error){navigator.getUserMedia(obj,function(stream){success(stream);},error);}}else if(navigator.webkitGetUserMedia){getUserMedia=function(obj,success,error){navigator.webkitGetUserMedia(obj,function(stream){var _URL=window.URL  window.webkitURL;success(_URL.createObjectURL(stream));},error);}}else if(navigator.mozGetUserMedia){getUserMedia=function(obj,success,error){navigator.mozGetUserMedia(obj,function(stream){success(window.URL.createObjectURL(stream));},error);}}else{return false;}return getUserMedia(obj,success,error);}</script></html>

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

www.bo500.com | 下一页