js实现web调用摄像头的方法

这篇文章主要介绍了js实现web调用摄像头的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

10年积累的成都网站建设、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有武侯免费网站建设让你可以放心的选择与我们合作。

具体内容如下

Html

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

Javascript

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

感谢你能够认真阅读完这篇文章，希望小编分享的“js实现web调用摄像头的方法”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

网站题目：js实现web调用摄像头的方法
网页URL：https://www.cdcxhl.com/article28/igjhjp.html

成都网站建设公司_创新互联，为您提供手机网站建设、ChatGPT、品牌网站制作、面包屑导航、标签优化、Google

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联