基本信息
源码名称：h5网页打开摄像头并截图（必须安装摄像头才能用）
源码大小：0.09M
文件格式：.rar
开发语言：CSS
更新时间：2024-11-13
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 1 元　
   源码介绍

h5网页打开摄像头并截图




<!DOCTYPE html>
<html lang="en">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>

<video id="video" width="480" height="320" autoplay></video>
<div class="select">
    <label for="videoSource">Video source: </label><select id="videoSource"></select>
 
  <!-- <button id="open"> 开启摄像头 </button> -->
<button id="capture"> 截图 </button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
</body>
</html>

<script type="text/javascript" src="vconsole.min.js"></script>

<script type="text/javascript">


//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
    if(navigator.mediaDevices.getUserMedia){
        //最新标准API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia){
        //webkit内核浏览器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia){
        //Firefox浏览器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia){
        //旧版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    }
}

var video = document.getElementById("video");
var videoSelect = document.querySelector('select#videoSource');
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// 获取设备摄像信息
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
//成功的回调函数
function success(stream){
console.log('success');
window.stream = stream;
    //兼容webkit内核浏览器
    var CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    video.src = CompatibleURL.createObjectURL(stream);
    //播放视频
    video.play();
}

//异常的回调函数
function error(error){
    console.log("访问用户媒体设备失败：",error.name,error.message);
}

function getStream(){

if (window.stream) {
window.stream.getTracks().forEach(function(track) {
track.stop();
})
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
    //调用用户媒体设备，访问摄像头
    const constraints = {
        audio: true, 
        video: {
            width: { ideal: 1280 },
            height: { ideal: 720 },
            frameRate: { 
                ideal: 10,
                max: 15
            },
            deviceId: {exact: videoSelect.value}
        }
    };
    console.log('获取视频流');
    getUserMedia(constraints,success,error);
} else {
    alert("你的浏览器不支持访问用户媒体设备");
}
}

function gotDevices(deviceInfos) {
console.log('deviceInfos')
console.log('deviceInfos:', deviceInfos);
for (let i = 0; i !== deviceInfos.length; i ) {
let deviceInfo = deviceInfos[i];
var option = document.createElement('option');
// console.log(deviceInfo)
if (deviceInfo.kind === 'videoinput') {  // audiooutput  , videoinput
option.value = deviceInfo.deviceId;
    option.text = deviceInfo.label || 'camera ' (videoSelect.length 1);
      videoSelect.appendChild(option);
    }
}


}

function handleError(error) {
console.log('error:' , error)
}

videoSelect.onchange = getStream;

//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
    //绘制画面
    console.log('点击事件');
    context.drawImage(video,0,0,480,320);
});

</script>