精华内容
下载资源
问答
  • html5网页打开摄像头PC端摄像头,有5个例子,用火狐浏览器打开测试可用,其他浏览器没测出来
  • 网页浏览器使用摄像头
  • 手机网页打开摄像头

    2016-02-20 08:05:18
    页面HTML+JS代码,可以打开手机摄像头拍照上传。
  • 手机端网页调用摄像头 拍照识别二维码,在普通浏览器中正常使用。在webview打开网页需更改Android权限。
  • sxt文件夹下是源码。在网页中直接可以显示本地摄像头画面,并可以拍照、获取base64编码等
  • 网页调用摄像头实现二维码扫描功能,很强大,,,网上搜的很多H5调用MUI的二维码扫描功能都用不了,不支持,。这个很强大,实现了网页调用摄像头进行二维码扫描功能,帅!
  • 在线调试摄像头 网页测试摄像头

    千次阅读 2021-02-18 11:11:33
    金三银四,面试大潮又来了,免不了电话面试和视频面试 摄像头在线测试https://assistant.ceping.com/qrcode?type=1&lng=zh

    金三银四,面试大潮又来了,免不了电话面试和视频面试
    摄像头在线测试
    https://assistant.ceping.com/qrcode?type=1&lng=zh

    展开全文
  • 通过flash来实现调用客户端摄像头,通过摄像头来读取二维码 读取的二维码信息传到另一个jsp网页里,另一个网页接收到二维码信息后,要用定义一个变量来接收,如“二维码信息 %>” 功能使用时,不得有收费、广告、...
  • 该BAT文件就是解决网页使用摄像头照像白屏问题
  • 网页Flash调用本机摄像头,可以说无需任何插件
  • 网页调用摄像头及使用说明 内含插件包及使用说明及源代码
  • 2021-01-13,Flash突然失效无法使用,制作网页调取本地摄像头进行头像采集(html5_canvas)demo,无需额外插件,一个html文件,供大家参考
  • HTML5网页调用手机摄像头拍照,电脑摄像头也能调用.且支持HTTPS协议.zip
  • 公司最近有个新项目,需要在网页访问大华的摄像头,已开发完成第一阶段代码,并附上大华OCX操作文档。稍后将上传大华球机的控制代码
  • C#在网页调用海康威视摄像头实例分享 C#在网页调用海康威视摄像头实例分享
  • 网页摄像头

    2018-08-30 14:47:42
    网页摄像头,用于在浏览器中使用笔记本自带摄像头或者外接摄像头拍摄图片反显到页面上
  • 本Demo包含海康威视摄像头调用的ActiveX控件制作及调用代码,功能强大(压缩包包含三个文件,一个是ActiveX控件开发项目、一个是控件调用项目、另一个是说明文档)
  • Web网页控制摄像头

    热门讨论 2013-03-13 11:24:24
    B/S中asp.net实现调用摄像头,适用于网页编程中调用摄像头,asp.net html, php都可以调用,很实用哦
  • 网页调用摄像头

    千次阅读 2019-06-21 16:14:31
     调用摄像头  <script src="js/jq/jquery-3.2.1.js"></script>  <script src="js/jq/jquery-3.2.1.min.js"></script>      <video id="v" width="400" height="300"></video>  <!-- 图像画布 -->  ...

    <!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>调用摄像头</title>
            <script src="js/jq/jquery-3.2.1.js"></script>
            <script src="js/jq/jquery-3.2.1.min.js"></script>
        </head>

        <body>
            <video id="v" width="400" height="300"></video>
            <!-- 图像画布 -->
            <canvas width="200" height="150"></canvas>
            <button id="" οnclick="face_login()" class="btn btn-info"><i class="icon-play"></i>&nbsp;登录</button>
            <script>
                function $(elem) {
                    return document.querySelector(elem);
                }
                var canvas = $('canvas'),
                    context = canvas.getContext('2d'),
                    video = $('video'),
                    snap = $('#snap'),
                    upload = $('#upload'),
                    uploaded = $('#uploaded'),
                    mediaStreamTrack;
                //人脸识别参考文档:https://cloud.baidu.com/doc/FACE/
                function face_login() {
                    context.drawImage(video, 0, 0, 200, 150);
                    jQuery.post('faceLogin', {      //指定发送图片到的servlet
                        snapData: canvas.toDataURL('image/jpg')
                    }).done(function(rs) {
                        //对结果集进行解析,判断是否存在人脸
                        console.log(JSON.stringify(rs));
                        if(rs.error_code == "222202") {
                            alert("没有人脸信息或人脸数量非1,请重新拍照!");
                        } else if(rs.error_code == "222207") {
                            alert("人脸库中没有您的注册信息,请先注册。");
                        } else if(rs.error_code == "223120") {
                            alert("请正确登录,不得伪造!");
                        } else if(rs.error_msg == "SUCCESS") {
                            alert("登录成功!");
                            // console.log(rs.result.user_list[0].user_info);
                        }
                    });
                }
            </script>

            <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 promise = navigator.mediaDevices.getUserMedia(constraints);
                    promise.then(stream => {
                        let v = document.getElementById('v');
                        // 旧的浏览器可能没有srcObject
                        if("srcObject" in v) {
                            v.srcObject = stream;
                        } else {
                            // 防止再新的浏览器里使用它,应为它已经不再支持了
                            v.src = window.URL.createObjectURL(stream);
                        }
                        v.onloadedmetadata = function(e) {
                            v.play();
                        };
                    }).catch(err => {
                        console.error(err.name + ": " + err.message);
                    })
                })();
            </script>
        </body>

    </html>

    展开全文
  • 个人用C++编写的摄像头照相的组件,主要嵌于网页工作: (1)调取摄像头组件程序,需要先安装并测试号摄像头; (2)使用示例,ceshi.htm,使用网页如何调取摄像头工作,在ie测试正常; (3)使用帮助,help.htm,...
  • 网页上实现大华视频监控摄像头在线 1.编写代码 2.设置插件地址
  • 海康web 插件 用于web查看摄像头图像
  • 网页调用摄像头拍照

    2019-04-28 15:12:00
    正式启动摄像头 openMedia: function (){ navigator.mediaDevices.getUserMedia( this .mediaOpts).then( this .successFunc.bind( this )). catch ( this .errorFunc.bind(this)); }, // 关闭摄像头 ...

    页面内容

    <video id="video" class="video-bg"></video>
    <canvas id="qrCanvas" class="qr-canvas"></canvas>
    <div id="imageWarp" class="image-warp"></div>
    <button type="button" onclick="window.MyCamera.openMedia()">开启</button>
    <button type="button" onclick="window.MyCamera.closeMedia()">关闭</button>
    <button type="button" onclick="window.MyCamera.drawMediaAndToImg()">拍摄</button>

    js内容
    var CameraInit=(function(window,document,undefined){
        function MyCamera(videoDom,canvasDom) {
            this.mediaOpts = {
                audio: false,
                video: true,
                video: { facingMode: "environment"} // 或者 "user"
                // video: { width: 1280, height: 720 }
                // video: { facingMode: { exact: "environment" } }// 或者 "user"
            }
            this.video=videoDom;
            this.canvas1=canvasDom;
            this.context1 = this.canvas1.getContext('2d');
            this.mediaStreamTrack = null;
            this.checkEnvironment();
        }
        MyCamera.prototype = {
            checkEnvironment: function() {
                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);
                        });
                    }
                }
            },
            // 回调
            successFunc: function(stream) {
                this.mediaStreamTrack = stream;
                this.video = document.querySelector('video');
                if ("srcObject" in this.video) {
                    this.video.srcObject = stream
                } else {
                    this.video.src = window.URL && window.URL.createObjectURL(stream) || stream
                }
                this.video.play();
            },
            errorFunc:function(err) {
                alert(err.name);
            },
    
            // 正式启动摄像头
            openMedia: function(){
                navigator.mediaDevices.getUserMedia(this.mediaOpts).then(this.successFunc.bind(this)).catch(this.errorFunc.bind(this));
            },
    
            //关闭摄像头
            closeMedia: function(){
                var that=this;
                that.mediaStreamTrack.getVideoTracks().forEach(function (track) {
                    track.stop();
                    that.context1.clearRect(0, 0,that.context1.width, that.context1.height);//清除画布
                });
            },
    
            //截取视频并转为图片
            drawMediaAndToImg: function(){
                this.canvas1.setAttribute("width", this.video.videoWidth);
                this.canvas1.setAttribute("height", this.video.videoHeight);
                this.context1.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight);//显示在canvas中
                var image = new Image();
                image.src = this.canvas1.toDataURL('image/png')
                var imageWarp = document.getElementById("imageWarp");
                if(imageWarp.hasChildNodes()) {
                    document.getElementById("imageWarp").replaceChild(image, imageWarp.firstChild);
                }else{
                    document.getElementById("imageWarp").appendChild(image);
                }
            },
        };
        return MyCamera;
    })(window,document)

     



    实例化
    window.MyCamera=new CameraInit(document.getElementById("video"), document.getElementById("qrCanvas"));

     



    参考内容:https://www.jb51.net/article/160015.htm

    转载于:https://www.cnblogs.com/jjlinsblog/p/10784154.html

    展开全文
  • PC端Web网页跳用本地摄像头,实时获取图片。(注意事项:如果是本地localhost可直接调用,挂到服务器必须使用https访问) 仅测试了google浏览器,运行代码,会跳出摄像头授权,请按“允许”即可,获取的图片格式为...

    PC端Web网页跳用本地摄像头,实时获取图片。(注意事项:如果是本地localhost可直接调用,挂到服务器必须使用https访问)

    仅测试了google浏览器,运行代码,会跳出摄像头授权,请按“允许”即可,获取的图片格式为base64

    代码复制到HTML文件,用google浏览器即可查看效果,canvas画布用来实时截取视频图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div>
      <video id="video"></video>
      <canvas id="canvas"></canvas>
      <!--  <canvas id="canvas" style="display: none"></canvas>-->
      <script>
          const width = 480;
          const height = 320;
          const video = document.getElementById('video');
    
          //访问摄像头
          if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
              //调用用户媒体设备, 访问摄像头
              getUserMedia({video: {width: width, height: height}}, success, error);
          } else {
              alert('不支持访问用户媒体');
          }
    
          //访问用户媒体设备的兼容方法
          function getUserMedia(constraints, success, error) {
              if (navigator.mediaDevices.getUserMedia) {
                  //最新的标准API
                  navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
              } else if (navigator.webkitGetUserMedia) {
                  //webkit核心浏览器
                  navigator.webkitGetUserMedia(constraints, success, error)
              } else if (navigator.mozGetUserMedia) {
                  //firfox浏览器
                  navigator.mozGetUserMedia(constraints, success, error);
              } else if (navigator.getUserMedia) {
                  //旧版API
                  navigator.getUserMedia(constraints, success, error);
              }
          }
    
          //成功回调
          function success(stream) {
              console.log('成功');
              //兼容webkit核心浏览器
              // const CompatibleURL = window.URL || window.webkitURL;
              //将视频流设置为video元素的源
              // video.src = CompatibleURL.createObjectURL(stream);
              video.srcObject = stream;
              video.play();
              setInterval(drawCanvasImage, 10)
          }
    
          //失败回调
          function error(error) {
              console.log('失败');
              console.log("访问用户媒体设备失败", error);
          }
    
          function drawCanvasImage() {
              const canvas = document.getElementById('canvas');
              canvas.width = width;
              canvas.height = height;
              const context = canvas.getContext('2d');
              context.drawImage(video, 0, 0, width, height, 0, 0, width, height);
              //获取图片,数据格式为base64
              const imageData = canvas.toDataURL("image/png");
              console.log(imageData)
          }
      </script>
    
    </div>
    </body>
    </html>
    

     

     

    参考来源:https://www.jianshu.com/p/0ae9646ec0e0

    展开全文
  • 网页调取设备摄像头

    千次阅读 2020-07-29 10:55:11
    以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头,这不免有些复杂。现在只需要HTML5的画布技术和javaScript,我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头,而且是因为HTML5的画布技术...
  • 那么在配置好摄像头以后如何才能通过网页观看摄像头拍摄画面呢? 我在购买摄像头时考虑到官网专用摄像头靠谱点,像素也较高就买了,后来发现网上大多数的资料都是针对的USB摄像头,而官网摄像头是通过15芯排线连接...
  • 海康威视的摄像头网页中进行集成时候需要安装OCX控件,此资源为exe版本,安装之后打开index.html这个demo文件。会提示下载安装cab,再次点击安装,即可使用。index.html这个demo中提供了海康摄像头集成的大部分...
  • 手机网页 拍照,目前只支持安卓手机,并且部分浏览器不兼容
  • 大华摄像头OCX控件及网页使用例子,网页调用OCX,内包含使用说明

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,722
精华内容 7,888
关键字:

网页版摄像头查看