js调用摄像头（怎么用html5或js调用手机的摄像头拍照上传以及调用）

本文目录

• 怎么用html5或js调用手机的摄像头拍照上传以及调用
• 怎样使用H5调用摄像头
• JS 能不能调用摄像头并拍照
• 为什么使用js调用摄像头打不开
• 如何用js实现调用手机摄像头扫描条形码然后带出条形码的值到文本框
• js + html5 + java 实现二维码和条形码扫描.怎么用js调用摄像头

怎么用html5或js调用手机的摄像头拍照上传以及调用

• h5不能直接调用摄像头，只能用《input type="file" /》上传图片来间接调用摄像头

• 你给的网页用的是 ，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。这两个属性的用法可以去w3cschool上面看看。怎么用html5或js调用手机的摄像头拍照上传以及调用

怎样使用H5调用摄像头

这次给大家带来怎样使用H5调用摄像头，H5调用摄像头的注意事项有哪些，下面就是实战案例，一起来看一下。
《!DOCTYPE html》
《html lang="zh-CN"》
《head》
《meta charset="UTF-8"》
《title》GetUserMedia实例《/title》
《/head》
《body》
《video id="video" autoplay》《ideo》
《/body》
《script type="text/javascript"》
var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
getUserMedia.call(navigator, {
video: true,
audio: true
}, function(localMediaStream) {
var video = document.getElementById(’video’);
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
console.log("Label: " + localMediaStream.label);
console.log("AudioTracks" , localMediaStream.getAudioTracks());
console.log("VideoTracks" , localMediaStream.getVideoTracks());
};
}, function(e) {
console.log(’Reeeejected!’, e);
});
《/script》
《html》相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
vue.js的语法及常用指令的详解
bootstrap里如何统计table sum的数量
vue.js todolist如何实现

JS 能不能调用摄像头并拍照

可以调用，不过适合HTML5，浏览器版本也要高点，有些低版本的估计不支持

《!DOCTYPE html》
《html》
    《head》
        《meta charset="utf-8" /》
        《title》《/title》
        《meta name="viewport" content="width=device-width, initial-scale=1"》
    《/head》
    《body》
        《video id="video" width="640" height="480" autoplay》《/video》
    《/body》
    《script type="text/javascript"》
        var promisifiedOldGUM = function(constraints) {
            // 第一个拿到getUserMedia，如果存在
            var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
            // 有些浏览器只是不实现它-返回一个不被拒绝的承诺与一个错误保持一致的接口
            if (!getUserMedia) {
                return Promise.reject(new Error(’getUserMedia is not implemented in this browser-getUserMedia是不是在这个浏览器实现’));
            }
            // 否则，调用包在一个旧navigator.getusermedia承诺
            return new Promise(function(resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
        // 旧的浏览器可能无法实现mediadevices可言，所以我们设置一个空的对象第一
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        // 一些浏览器部分实现mediadevices。我们不能只指定一个对象
        // 随着它将覆盖现有的性能getUserMedia。.
        // 在这里，我们就要错过添加getUserMedia财产。.
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
        }
        // Prefer camera resolution nearest to 1280x720.
        var constraints = {
            audio: true,
            video: {
                width: 1280,
                height: 720
            }
        };
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function(stream) {
                var video = document.querySelector(’video’);
                video.src = window.URL.createObjectURL(stream);
                video.onloadedmetadata = function(e) {
                    video.play();
                };
            }).catch(function(err) {
                console.log(err.name + ": " + err.message);
            });
    《/script》
《/html》

为什么使用js调用摄像头打不开

html5中的video这个标签是引入视频的，通过navigator.getUserMedia去获取摄像头的视频流，所以要在事件里用关闭的代码都不能执行关闭摄像头，只有关闭网页，摄像头才关闭。

以下为html5打开摄像头代码：

《!DOCTYPE html》
《html》
《head》
***隐藏网址***
《title》Smart Home - Camera《/title》
《link href="css/main.css" rel="stylesheet" type="text/css"》
《script src="js/jq.js"》《/script》
《script type="text/javascript"》
/*
*/
function init(t){
accessLocalWebCam("camera_box");
}
// Normalizes window.URL
window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
// Normalizes navigator.getUserMedia
navigator.getUserMedia = navigator.getUserMedia || 
navigator.webkitGetUserMedia|| navigator.mozGetUserMedia || 
navigator.msGetUserMedia;
function isChromiumVersionLower() {
var ua = navigator.userAgent;
var testChromium = ua.match(/AppleWebKit\/.* Chrome\/(+).* Safari\//);
return (testChromium && (parseInt(testChromium) 《 19));
}
function successsCallback(stream) {
document.getElementById(’camera_errbox’).style.display = ’none’;
document.getElementById(’camera_box’).src = (window.URL 
&& window.URL.createObjectURL) ? 
window.URL.createObjectURL(stream) : stream;
}
function errorCallback(err) {
}
function accessLocalWebCam(id) {
try {
// Tries it with spec syntax
navigator.getUserMedia({ video: true }, successsCallback, errorCallback);
} catch (err) {
// Tries it with old spec of string syntax
navigator.getUserMedia(’video’, successsCallback, errorCallback);
}
}
《/script》
《style type="text/css"》
#camera_errbox{
width:320px; height:auto; border:1px solid #333333; padding:10px;
color:#fff; text-align:left;margin:20px auto;
font-size:14px;
}
#camera_errbox b{
padding-bottom:15px;
}
《/style》
《/head》
《body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false"》
《div》
《div id="mainbox"》
《div id="bt_goback"》《/div》
《div》《/div》《div id="t_iconbox" 
class="icon_12"》《/div》《div id="t_text"》
《div id="el_title"》Camera《/div》
《div id="el_descr"》《/div》
《/div》
《div》《/div》
《div》《span 
class="sp_title_text"》Camera《/span》《div class="sp_oc 
sp_oc_1"》《/div》《/div》
《dl id="el_actionbox" style="text-align:center;"》
《video id="camera_box" autoplay="" src=""》《/video》
《div id="camera_errbox"》
《b》请点击“允许”按钮，授权网页访问您的摄像头！《/b》
《div》若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。《/div》
《/div》
《/dl》
《/div》
《/div》
《/body》
《/html》

-——代码结束

如何用js实现调用手机摄像头扫描条形码然后带出条形码的值到文本框

1、开启沟子的方法代码。

2、指定输入间隔为300毫秒以内时为连续输入方法代码。

3、记录按键信息方法代码。

4、事件的状态代码方法。

5、因为条形码中只有数字和部分符号，所以基本可以不用考虑键盘状态或组合键的情况，但二维码就不能不考虑了。

6、可以使用_keydown.Contains(160)判断是否按下了Shift键，然后使用ShiftChar方法来获取最终的按键对应字符至于结果保存，我使用了一个数组List《List《EventMsg》》，对每次输入都单独进行记录。

js + html5 + java 实现二维码和条形码扫描.怎么用js调用摄像头

不明白你的意图，你是开发GUI还是APP

如果是APP有很多支持的API

HBuilder就有调用原生硬件的接口html5++

《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》Camera Example《/title》
《script type="text/javascript"》
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
var r = null; 
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() {
// 获取设备默认的摄像头对象 
var cmr = plus.camera.getCamera();
// ...... 
}
《/script》
《/head》
《body》
《/body》
《/html》