网页摄像头

最新推荐文章于 2023-11-14 17:16:17 发布
最新推荐文章于 2023-11-14 17:16:17 发布
阅读量844 收藏 2
点赞数
分类专栏： 网页摄像头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinaorient/article/details/105447662
版权

html5直接调用web api获取摄像头xi一共信息，种实现方式，

1、使用navigator.getUserMedia（该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性），前面一种已经从 Web 标准中删除，仅为了向后兼容而存在，

2、是使用navigator.mediaDevices.getUserMedia(推荐使用),这两种方法 Safari 貌似都不支持。。。。

拍照

思路是设置一个标志变量 videoPlaying 看看是否 video 有在 play，监听拍照按钮的点击事件，如果videoPlaying 为 true ，使用一个canvas 获取 video 的宽高（默认 canvas 是不显示的），然后使用 canvas 的drawImage,然后使用 canvas 的 toDataURL返回一个 data url，将这个 url，设置在一个 img 标签上即可

第一种方法navigator.getUserMedia用法详见 mdn ，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照1</title>
</head>
<body>
    <button id="take">拍照</button>
    <br />
    <video id="v" style="width: 640px;height: 480px;"></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <br />
    <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
    <script>
        !(function () {
            function userMedia() {
                return navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia || null;
            }
            if (userMedia()) {
                let videoPlaying = false;
                let constraints = {
                    video: true,
                    audio: false
                };
                let video = document.getElementById('v');
                let media = navigator.getUserMedia(constraints, function (stream) {
                    let url = window.URL || window.webkitURL;
                    video.src = url ? url.createObjectURL(stream) : stream;
                    video.play();
                    videoPlaying = true;
                }, function (error) {
                    console.log("ERROR");
                    console.log(error);
                });
                document.getElementById('take').addEventListener('click', function () {
                    if (videoPlaying) {
                        let canvas = document.getElementById('canvas');
                        canvas.width = video.videoWidth;
                        canvas.height = video.videoHeight;
                        canvas.getContext('2d').drawImage(video, 0, 0);
                        let data = canvas.toDataURL('image/webp');
                        document.getElementById('photo').setAttribute('src', data);
                    }
                }, false);
            } else {
                console.log("不支持");
            }
        })();
    </script>
</body>
</html>

 

第二种navigator.mediaDevices.getUserMedia实现方法:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>拍照2</title>
</head>

<body>
    <button id="take">拍照</button>
    <br />
    <video id="v" style="width: 640px;height: 480px;"></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <br />
    <img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
    <script>
        !(function () {
            // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先，如果有getUserMedia的话，就获得它
                    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }

                    // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            const constraints = {
                video: true,
                audio: false
            };
            let videoPlaying = false;
            let v = document.getElementById('v');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(stream => {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in v) {
                    v.srcObject = stream;
                } else {
                    // 防止再新的浏览器里使用它，应为它已经不再支持了
                    v.src = window.URL.createObjectURL(stream);
                }
                v.onloadedmetadata = function (e) {
                    v.play();
                    videoPlaying = true;
                };
            }).catch(err => {
                console.error(err.name + ": " + err.message);
            })
            document.getElementById('take').addEventListener('click', function () {
                if (videoPlaying) {
                    let canvas = document.getElementById('canvas');
                    canvas.width = v.videoWidth;
                    canvas.height = v.videoHeight;
                    canvas.getContext('2d').drawImage(v, 0, 0);
                    let data = canvas.toDataURL('image/webp');
                    document.getElementById('photo').setAttribute('src', data);
                }
            }, false);
        })();
    </script>
</body>

</html>

 以上来源于：https://blog.csdn.net/qq_33699981/article/details/80210614

另外的方法：

Html

<p>
 <button onclick="openMedia()">打开</button>
 <button onclick="closeMedia()">关闭</button>
 <button onclick="drawMedia()">截取</button>
</p>
<video id="video" class="bg"></video>
<canvas id="qr-canvas"></canvas>

 

 Javascript

<script type="text/javascript">var video = document.querySelector('video');
  var text = document.getElementById('text');
  var canvas1 = document.getElementById('qr-canvas');
  var context1 = canvas1.getContext('2d');
  var mediaStreamTrack;

  // 一堆兼容代码
  window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
  if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
  }
  if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
      var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      if (!getUserMedia) {
        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
      }
      return new Promise(function(resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    }
  }

  //摄像头调用配置
  var mediaOpts = {
    audio: false,
    video: true,
    video: {
      facingMode: "environment"
    } // 或者 "user"
    // video: { width: 1280, height: 720 }
    // video: { facingMode: { exact: "environment" } }// 或者 "user"
  }

  // 回调
  function successFunc(stream) {
    mediaStreamTrack = stream;
    video = document.querySelector('video');
    if ("srcObject" in video) {
      video.srcObject = stream
    } else {
      video.src = window.URL && window.URL.createObjectURL(stream) || stream
    }
    video.play();
  }
  function errorFunc(err) {
    alert(err.name);
  }

  // 正式启动摄像头
  function openMedia() {
    navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).
    catch(errorFunc);
  }

  //关闭摄像头
  function closeMedia() {
    mediaStreamTrack.getVideoTracks().forEach(function(track) {
      track.stop();
      context1.clearRect(0, 0, context1.width, context1.height); //清除画布
    });
  }

  //截取视频
  function drawMedia() {
    canvas1.setAttribute("width", video.videoWidth);
    canvas1.setAttribute("height", video.videoHeight);
    context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  }
</script>

以上来源于：https://www.jb51.net/article/160015.htm

 

另外：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Document1</title>
    <style type='text/css'>
        * { margin: 0; padding: 0; }

        html, body { height: 100%; }

        .flex { display: flex; }

        .flex-row { flex-direction: row; justify-content: space-around; align-items: center; }

        .flex-column { flex-direction: column; justify-content: flex-start; align-items: center; }

        body { overflow: auto; background: #fff; }

        .title { width: 920px; padding: 30px; align-items: flex-end; }

        .title h1 { padding-bottom: 20px; font-size: 38px; color: #ffffff; text-shadow: 0 1px 3px #222222; }

        .title p { font-size: 18px; color: #f5f5f5; text-shadow: 0 1px 3px #565656; }

        .wrap { width: 1220px; }

        .wrap .reference { position: relative; padding: 10px; background-color: rgba(255, 255, 255, 0); border-radius: 10px; box-shadow: 0 0 20px #a1a19f; }

        .wrap .reference img.face { display: block; width: 320px; height: auto; border-radius: 10px; }

        .wrap .reference img.toggle { position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; }

        .wrap .scan video { background-color: rgba(0, 0, 0, .8); border-radius: 10px; }

        .wrap .control { justify-content: space-around; height: 456px; padding: 0 20px; }

        .wrap .control p { width: 160px; height: 60px; background-color: #f9f9f9; text-align: center; line-height: 60px; color: #ffffff; font-size: 24px; border-radius: 8px; cursor: pointer; box-shadow: -8px -8px 150px -8px #b2b3b5 inset, 0 0 5px #222222; text-shadow: 0 0 1px #222222; transition: .5s; }

        .wrap .control p:hover { box-shadow: -8px -8px 150px -8px #50c4f1 inset, 0 0 5px #ffffff; }

        .wrap .scan { position: relative; overflow: hidden; }

        .wrap .scan .strainer { position: absolute; top: 10px; width: 320px; z-index: 999; height: 3px; }

        .wrap .scan .capture { width: 320px; height: 456px; }

        .wrap .scan .strainer.on { background: linear-gradient(to left, transparent, #0bffb2, transparent); animation: scan 1s linear infinite; }

        @keyframes scan {
            0% { top: 10px; }
            50% { top: 456px; }
            100% { top: 10px; }
        }

    </style>
    <script type="text/javascript" src="vconsole.min.js"></script>
</head>
<body>
    <div class="title flex flex-column">
</div>
<div class="wrap flex flex-row">
    <div class="control flex flex-column">
        <p class="open">开启摄像头</p>
        <p class="recognition">显示到Canvas</p>
        <p class="close">关闭摄像头</p>
    </div>
    <div class="scan reference">
        <div class="strainer"></div>
        <video class="capture" width="320" height="456" src=""></video>
    </div>

</div>

    <script type="text/javascript">
        var buffer;
        var oCapture = document.querySelector(".capture"),
        open = document.querySelector(".open"),
        recognition = document.querySelector(".recognition"),
        close = document.querySelector(".close");
        var control = document.querySelector(".control");

        window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        
        function invokingCarera(){
            if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){
                navigator.mediaDevices.getUserMedia({
                    'audio':true,
                    'video':{ 'facingMode': "user" }//调用前置摄像头，后置摄像头使用video: { facingMode: { exact: "environment" } }
                })
                .then(function(mediaStream) {console.log(555);getVideoStream(mediaStream)})
                .catch(function(error) { console.log(666);console.log(error) })
            }else if(navigator.getUserMedia){
                navigator.getUserMedia({
                    'video':true,
                    'audio':true
                },getVideoStream,getFail)
            }else{
                alert('不支持摄像头调用！')
            }
        }
        //调用成功
        function getVideoStream(stream){
            buffer = stream;
            if(oCapture.mozSrcObject !== undefined){
                oCapture.mozSrcObject = buffer;
            }else{
                oCapture.src = window.URL && window.URL.createObjectURL(buffer);                
            }
            oCapture.play();
        }
        function getFail(){

        }
        recognition.onclick = function(){

        }
        control.addEventListener('click',function(e){
            e = e || window.event;
            var className = e.target.className;
            switch(className){
                case 'open':
                invokingCarera();
                break;
                case 'close':
                closeCamera();
                break;
                case 'recognition':
                screenShot();
                break;
                default:
                break;
            }
        })
        function closeCamera(){
            buffer&&buffer.getTracks()[1].stop();//关闭摄像头
        }        
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();
        function screenShot(){
            var canvas = document.createElement('canvas');
            canvas.width=320,canvas.height = 456;
            document.querySelector(".wrap").appendChild(canvas);
            var ctx =  canvas.getContext('2d');
            function drawVideo(){
                ctx.drawImage(oCapture,0,0,320,456);
                ctx.font = "30px sans-serif";
                ctx.fillStyle = "blue";
                ctx.fillText("请眨眼", 50, 50);
                requestAnimationFrame(drawVideo);
            }
            window.requestAnimationFrame(drawVideo);
        }
    </script>
</body>
</html>

以上原文链接：https://blog.csdn.net/w20101310/article/details/78251938

chinaorient
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页WEB调用本机USB摄像头
05-11
网页Flash调用本机摄像头，可以说无需任何插件
网页版视频监控系统完整版
qq_42978535的博客
07-21 7250
一款网页版监控系统，日常学习使用
【WebRtc】Web网页音视频通话之Webrtc相关操作（一）
Java_Wxlin的博客
09-29 2210
WecRtc 基础操作
jquery解除浏览器对摄像头占用，关闭小光点
java_freshman_的博客
06-24 993
/* *videoEle video标签的ID属性 */ function stopMediaStream( videoEle ){ let videoObj = window.document.getElementById('videoEle'); let tracks = videoObj.srcObject.getTracks(); $.each(tracks,function(i,v){ v.sto...
WEB页调用电脑摄像头+拍照
东成熙就
12-08 2541
WEB页调用电脑摄像头+拍照
html5网页打开摄像头PC端摄像头
08-31
在这个例子中，`getUserMedia`方法获取摄像头的视频流，并将其赋值给`<video>`元素的`srcObject`属性，从而实现在网页上播放摄像头的画面。 值得注意的是，由于浏览器兼容性问题，`getUserMedia`在不同浏览器中的...
网页在线拍照模块.zip_在线拍照网页_摄像头视频_网页 摄像头_网页在线拍照_网页拍照
09-21
网页在线拍照模块可以获取摄像头中的图像，将其保存成图像格式保存在本地硬盘中。然后，将输入的员工信息和抓取的图像都保存到数据库中，实现员工信息的添加。 业务流程 本系统有“在线拍照-员工信息录入”页面和...
网页端使用摄像头.html
03-18
网页浏览器使用摄像头
web调用摄像头问题
qq_40905132的博客
10-31 3553
2. 手动修改本机浏览器配置【chrome://flags/ 】，多个地址用【,】隔开，修改后底部会提示重启浏览器。项目用到要web调用摄像头的情况。可以调用 navigator.getUserMedia 的方法。重新打开页面，允许调用摄像头，就可以了。1. 使用https协议。
web使用js调用摄像头扫码、拍照、录像
热门推荐
VQB01799的博客
11-01 1万+
又是好一阵忙碌，终于迎来短暂的闲暇，忙里偷闲写了这篇文章。 最近项目中使用到了摄像头扫码、拍照，因为是web项目，不能直接使用java调用摄像头，更不能写个插件让客户去安装，唯一的方法只能使用js去调用摄像头，由此记录下自己的实现。 开始准备使用网上现成的js插件（webcam.js），但是项目中同时接入了高拍仪，高拍仪实际也是摄像头，当摄像头存在2个或以上时，调用就会不正常，不调用应该调用的摄像头。查询了插件的相关文档，没有在插件中找到指定摄像头的api，遂自己DIY了一个插件(webvideo.js)。
webRTC录像/摄像本地预览，切换摄像头，切换麦克风，关闭摄像头，关闭麦克风，vue版demo
07-09 7678
<template> <div class="video-page"> <el-row> <el-col :xs="24"> <video class="video-js" ref="v...
vue 用h5 Video打开本地摄像头和离开页面关闭摄像头
Z_Gleng的博客
04-13 6105
1，首先来说打开摄像头 html部分 <div style="height:300px;width:600px;"> <video id="video" width="300px" height="300px" autoplay="autoplay"> </video> <canvas class="zp" id="canvas" width="300px" height="300px"> </
html与摄像头怎么链接,html 开启摄像头
weixin_34146759的博客
06-07 748
Smart Home - Camera/**/function init(t){accessLocalWebCam("camera_box");}// Normalizes window.URLwindow.URL = window.URL || window.webkitURL || window.msURL || window.oURL;// Normalizes navigator.getU...
网页显示摄像头图像--web_video_server
bingda_robot的博客
09-05 2845
web_video_server功能包的功能是，对ROS中发布了图像、视频类的话题，通过这个功能包可以订阅这些话题，然后对图像压缩，通过网络传输出去，别可以通过网页的形式访问图像，这样就可以比较方便的获取ROS中的图像画面，而不需要在每一台需要访问图像的设备上都安装上ROS。例如给地址中加入quality=10调整图像质量，可以观察到图像的质量明显的下降，如果在网络不流畅的条件下，可以通过调整图像分辨率、质量等参数通过牺牲一定图像品质来换取更流畅的画面。
HTML浏览器内getUserMedia调用后置摄像头
qq_43259278的博客
08-10 1854
HTML浏览器内getUserMedia调用后置摄像头 navigator.getUserMedia默认调用前置摄像头，若需求要调用后置摄像头，直接添加指令即可 getUserMedia({ video:{ width:480, height:320, facingMode: 'environment' } },success,error); facingMode为environment ...
切换摄像头操作（前置、后置）
qq_45744011的博客
07-25 4242
页面加载就调用摄像头，点击按钮切换摄像头。
vue2项目 H5页面调用摄像头拍照
最新发布
weixin_53322542的博客
11-14 1254
【代码】vue2项目 H5页面调用摄像头拍照。
实现摄像头内容的网页播放
xiaxuesong666的博客
12-02 6476
【Python+OpenCV】Windows+Python3.6.0（Anaconda3）+OpenCV3.2.0安装配置海康摄像头+web调用（官方开发包）+手把手全方位扫盲Java后台实时输出数据到页面 Html5 video标签访问网络摄像机实时监控VLC网页插件添加对火狐浏览器的支持网页中插入VLC播放器播放rtsp视频流步骤JS视频播放最好免费的 HTML5 & JS 网站视频播放器收集海
html 网页摄像头拍照保存到本地
08-28
在HTML中，可以使用JavaScript来实现网页摄像头拍照并保存到本地。 首先，需要在HTML中创建一个video标签，用于展示摄像头的实时画面： ```html <video id="preview" width="400" height="300" autoplay></video> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值