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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
js post提交调用方法
Feb 12 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
浅谈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 操作文件的一些FAQ总结
2009/02/12 PHP
php权重计算方法代码分享
2014/01/09 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP 中常量的知识整理
2017/04/14 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
JavaScript 数组详解
2013/10/10 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python操作MySQL模拟银行转账
2018/03/12 Python
Python装饰器原理与用法分析
2018/04/30 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python、Matlab求定积分的实现
2019/11/20 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
python tkinter实现连连看游戏
2020/11/16 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
个性婚礼策划方案
2014/05/17 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
亮剑观后感
2015/06/05 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis