js调用设备摄像头的方法

本文实例为大家分享了js调用设备摄像头的具体代码，供大家参考，具体内容如下

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

注意，如果使用chrome查看代码需要在https协议下才能生效，建议使用火狐查看。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现调用本地摄像头功能示例

    本文实例讲述了JS实现调用本地摄像头功能.分享给大家供大家参考,具体如下: 今天学习了一下js调用本地摄像头,其实是实现不是很麻烦,下面是代码部分,连接上Tomcat服务器,然后再到网页上打开即可以看到效果了..快来玩一下吧! <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <

  • AngularJS中使用HTML5手机摄像头拍照

    AngularJS中使用HTML5手机摄像头拍照

    1. 项目背景 公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的. 这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图: 2. 如何调用摄像头 $scope.photoErr = false; $scope.photoBtnDiable = true; var mediaStream = null,track = nu

  • Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

    本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg

  • js+HTML5基于过滤器从摄像头中捕获视频的方法

    本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法.分享给大家供大家参考.具体如下: index.html页面: <div class="warning"> <h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2> </div> <div class="container"> &l

  • JS调用安卓手机摄像头扫描二维码

    项目要求: 使用H5模仿微信扫一扫付款功能 经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容大多数浏览器 本地识别不占用服务端资源 代码比较简单只有一个页面 <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>Web QrCode Test</t

  • JS打开摄像头并截图上传示例

    JS打开摄像头并截图上传示例

    直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_contents将其转为图片 要注意的是,在chrome以外的浏览器中,使用摄像头或多或少会出现一些问题,可能也是老问题了,所以以

  • js实现web调用摄像头 js截取视频画面

    本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下 Html <p> <button onclick="openMedia()">打开</button> <button onclick="closeMedia()">关闭</button> <button onclick="drawMedia()">截取</button> </p&g

  • nodejs实现截取上传视频中一帧作为预览图片

    客户有个上传视频的需求,上传的视频呢,需要能在线播放并且列表中必须出现类似优酷等视频首页上的那种缩略图,成品如下图所示: 当然了,上传视频的界面就不贴出来了,毕竟我们这篇文章的重点不在于如何上传,而在于如何用nodejs截取视频中的帧!~ 这里我们需要一个开源的第三方插件----大名鼎鼎的多媒体编解码框架ffmpeg,需要安装在服务器上由nodejs调用, 代码贴出如下: function fecthVideoThumbnail(entryid, index){ var filename = p

  • js调用设备摄像头的方法

    本文实例为大家分享了js调用设备摄像头的具体代码,供大家参考,具体内容如下 使用getUserMedia这个API来获取摄像头的权限 兼容chrome和火狐,IOS不兼容 下面是源码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt

  • js调用网络摄像头的方法

    不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试 PC端使用的时候, HTML页面需要预留video标签, canvas标签 移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签 (function (window, document) { window.camera = { init: function (options) { /** * options 属性示例 * videoID: video控件ID * canvasID: ca

  • 浅谈js控制li标签排序问题 js调用php函数的方法

    浅谈js控制li标签排序问题 js调用php函数的方法

    [Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&

  • python 简单照相机调用系统摄像头实现方法 pygame

    如下所示: # -*- coding: utf-8 -*- from VideoCapture import Device import time import pygame from pygame.locals import * import sys pygame.init() size = width, height = 620, 485 print size speed = [2, 2] black = 0, 0, 0 if pygame.display.get_init(): print

  • web3.js调用链上的方法操作NFT区块链MetaMask详解

    web3.js调用链上的方法操作NFT区块链MetaMask详解

    目录 实例化链上方法 MetaMask 首先要初始化web3 实例化链 调用链上方法授权 调用游戏链上方法质押NFT 实例化链上方法 公司的项目全是区块链项目,最近这个项目是要构建一个链上的游戏社区,目前这个功能是用户可以质押NFT到游戏的链上,然后游戏那边就可以有人去参加竞赛,然后质押人可以赎回NFT. MetaMask web3.js MetaMask 浏览器插件用的是小狐狸MetaMask 网络用的是测试网络Rinkeby,记得切换网络,把设置 > 高级 > 显示测试网络 打开 let

  • C#调用USB摄像头的方法

    C#调用USB摄像头的方法

    C#调用USB摄像头使用AForge类库进行开发,供大家参考,具体内容如下 1.AForge安装 右击工程,在管理NuGet程序包中搜索Aforge类库,选择安装,如下图所示 2.进行USB摄像头类封装 a.初始化,初始化时要注意,加载的设备分辨率需要人工配置,如果配置分辨率不存在需要从默认的分辨率中选择 videoDevices = new FilterInfoCollection(FilterCategory.VideoInputDevice);   if (videoDevices.Cou

  • js调用Flex中的方法并向flex中传参及flex调用js示例

    首先,有了一个swf文件,test.swf,同时也有一个自动生成的html文件,test.html. 然后,在另外一个文件,test.jsp中,通过iframe,引入了test.html,即引入了swf. 现在想要在test.jsp中,向flex传参,并调用flex中的方法,我采用的方法是: 首先,在jsp中写一个调用flex的方法,如下 复制代码 代码如下: function initSWF(){ //得到swf的object var obj = window.frames["rightfra

  • node.js调用C++函数的方法示例

    目前nodejs调用c++主流的有两种方法,分别是addons和ffi addons是nodejs官方的c++扩展实现方案,但是由于需要使用模版,并且要对v8引擎有一定的了解,入门门槛较高. ffi是nodejs直接调用so库的一种实现,可以调用纯c的接口. 要想node.js调用C++的函数等,须先将C++代码编译成二进制的.node文件.node.js官方文档https://nodejs.org/dist/latest-v8.x/docs/api/addons.html中的C++ addon

  • Android调用手机摄像头的方法

    Android调用手机摄像头的方法

    本文实例为大家分享了Android调用手机摄像头的具体代码,供大家参考,具体内容如下 根据<第一行代码>进行改写: 布局文件,只有一个按钮,和一个Imageview,imageview用于显示拍下后的图片activity_main.xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:andr

  • Android调用外置摄像头的方法

    本文实例为大家分享了Android调用外置摄像头的具体代码,供大家参考,具体内容如下 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:layout_width="match_parent"     android:layout_height="match_parent"     xmlns:android="

随机推荐