js调用网络摄像头的方法


Posted in Javascript onDecember 05, 2020

不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试

PC端使用的时候, HTML页面需要预留video标签, canvas标签

移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签

(function (window, document) {
  window.camera = {
    init: function (options) {
      /**
       * options 属性示例
       * videoID: video控件ID
       * canvasID: canvas控件ID
       * fileID: type为file的input控件的ID
       * imageID: img控件的ID
       * videoEnable: 是否启用摄像头
       * audioEnable: 是否启用麦克风
       * videoWidth: 视频宽度
       * videoHeight: 视频高度
       * photoWidth: 拍照宽度
       * photoHeight: 拍照高度
       */

      _options = options;
      if (isMobileTerminal()) {
        initMobileTerminal();
      } else {
        initComputerTerminal();
      }
    },
    photo: function () {
      if (isMobileTerminal()) {
        photoMobileTerminal();
      } else {
        photoComputerTerminal();
      }
    }
  };

  let _options = null;

  function initComputerTerminal() {
    let videoDom = document.getElementById(_options.videoID);
    if (!videoDom) {
      alert('Video 控件无效');
      return;
    }

    let canvasDom = document.getElementById(_options.canvasID);
    if (!canvasDom) {
      alert('Canvas 控件无效');
      return;
    }
    canvasDom.setAttribute('width', _options.photoWidth + 'px');
    canvasDom.setAttribute('height', _options.photoHeight + 'px');

    let parameters = {
      video: _options.videoEnable ? {
        width: _options.videoWidth,
        height: _options.videoHeight
      } : false,
      audio: _options.audioEnable
    };

    navigator.mediaDevices.getUserMedia(parameters)
      .then(function (MediaStream) {
        video.srcObject = MediaStream;
        video.play();
      }).catch(function (reason) {
        console.log(reason);
        alert(reason);
      });
  }

  function photoComputerTerminal() {
    let videoDom = document.getElementById(_options.videoID);
    if (!videoDom) {
      alert('Video 控件无效');
      return;
    }


    let canvasDom = document.getElementById(_options.canvasID);
    if (!canvasDom) {
      alert('Canvas 控件无效');
      return;
    }

    let context = canvasDom.getContext('2d');
    context.drawImage(videoDom, 0, 0, _options.photoWidth, _options.photoHeight);
  }

  function initMobileTerminal() {
    let fileDom = document.getElementById(_options.fileID);
    if (!fileDom) {
      alert('File 控件无效');
      return;
    }

    fileDom.setAttribute('accept', 'image/*');
    fileDom.setAttribute('capture', 'camera');

    let canvasDom = document.getElementById(_options.canvasID);
    if (!canvasDom) {
      alert('Canvas 控件无效');
      return;
    }

    canvasDom.setAttribute('width', _options.photoWidth + 'px');
    canvasDom.setAttribute('height', _options.photoHeight + 'px');

    let imageDom = document.getElementById(_options.imageID);
    if (!imageDom) {
      alert('Image 控件无效');
      return;
    }

    fileDom.addEventListener('change', function () {
      let file = fileDom.files[0];
      let reader = new FileReader();
      reader.onloadend = function () {
        imageDom.setAttribute('src', reader.result);

        setTimeout(function () {
          let context = canvas.getContext("2d");
          context.drawImage(imageDom, 0, 0, _options.photoWidth, _options.photoHeight);
        }, 300);
      };
      reader.readAsDataURL(file);
    });
  }

  function photoMobileTerminal() {
    let fileDom = document.getElementById(_options.fileID);
    fileDom.click();
  }

  function isMobileTerminal() {
    if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || /Mobile/.test(navigator.userAgent) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))
      return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
    return false;
  }
})(window, document);

以上就是js调用网络摄像头的方法的详细内容,更多关于js调用网络摄像头的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
react 创建单例组件的方法
Apr 26 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 #Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
js获取图片的base64编码并压缩
Dec 05 #Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 #Javascript
可拖拽组件slider.js使用方法详解
Dec 04 #Javascript
You might like
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
详解使用vue实现tab 切换操作
2017/07/03 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python中的with...as用法介绍
2015/05/28 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python判断是空的实例分享
2020/07/06 Python
python中最小二乘法详细讲解
2021/02/19 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
党性教育心得体会
2014/09/03 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2019军训心得体会
2019/06/27 职场文书
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers