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

本文实例讲述了JS实现调用本地摄像头功能。分享给大家供大家参考，具体如下：

今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上Tomcat服务器，然后再到网页上打开即可以看到效果了。。快来玩一下吧！

<!doctype html>
<html lang="en">
<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>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

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

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

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

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

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

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

  • 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

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

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

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

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

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

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

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

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

  • 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实现调用本地摄像头功能示例

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

  • vue调用本地摄像头实现拍照功能

    前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用.实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <template> <div class="camera_outer"> <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay

  • js实现调用网络摄像头及常见错误处理

    js实现调用网络摄像头及常见错误处理

    最近由于业务的原因,需要在Web端页面接入调试各类的网络摄像头,遇到了很多匪夷所思的问题(说的就是读得出摄像头的品牌,读不出摄像头的分辨率).于是整理了这篇文章作为备忘录,也希望能帮到有类似的小伙伴们. 基础代码 navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => { let video = document.getElementById('#video') // 兼容

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • Java编程调用微信分享功能示例

    本文实例讲述了Java编程调用微信分享功能.分享给大家供大家参考,具体如下: 这篇文章介绍如何使用java开发微信分享功能,因为工作,已经开发完成,可使用. 如果想要自定义微信的分享功能,首先在自己的页面内首先使用AJAX.下面我具体举例. 首先是在页面内写入请求后台的AJAX /** * 调用微信分享接口 * */ public void WXConfig(){ String url = getPara("href"); WXConfigController scan = new W

  • JS实现的简单分页功能示例

    JS实现的简单分页功能示例

    本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&

  • vue 使用外部JS与调用原生API操作示例

    vue 使用外部JS与调用原生API操作示例

    本文实例讲述了vue 使用外部JS与调用原生API操作.分享给大家供大家参考,具体如下: vue 使用外部JS 概要 在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js,然后进行使用. 实现方法 我们在开发的过程中需要使用到 sha256 将用户的密码进行加密传输. 我们对js进行一点点改造. function sha256_digest(data) { sha256_init(); sha256_update(data, data.length); sha256_final();

  • PHP+JS实现批量删除数据功能示例

    本文实例讲述了PHP+JS实现批量删除数据功能.分享给大家供大家参考,具体如下: 表单 <form id="form2" name="form2" method="post" action="del_product.php" onsubmit="return checkF(this)"> <label> <input type="checkbox" name

  • Node.js实现连接mysql数据库功能示例

    本文实例讲述了Node.js实现连接mysql数据库功能.分享给大家供大家参考,具体如下: Node.js连接数据库前,需要安装相应的包,如果安装sql server 需要先装包node-sqlserver.我们以mysql为案例来说明node.js查询mysql数据. 1.安装 node-mysql npm install node-mysql 2.通过express框架实现数据库连接 var express = require('express'); var mysql = require(

  • JS简单实现表格排序功能示例

    本文实例讲述了JS简单实现表格排序功能的方法.分享给大家供大家参考,具体如下: 思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

随机推荐