zoukankan      html  css  js  c++  java
  • 浏览器调用摄像头

    <!DOCTYPE html>
    <html>
     
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <video width="200" height="150"></video>
    <canvas width="200" height="150"></canvas>
    <p>
    <button id="snap">截取图像</button>
    <button id="close">关闭摄像头</button>
    <button id="upload">上传图像</button>
    </p>
    <img id="uploaded" width="200" height="150" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
         <script type="text/javascript">
         function $(elem) {
             return document.querySelector(elem);
        }
        // 获取媒体方法(旧方法)
    // 8     navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
         var canvas = $('canvas'),
             context = canvas.getContext('2d'),
             video = $('video'),
             snap = $('#snap'),
             close = $('#close'),
             upload = $('#upload'),
             uploaded = $('#uploaded'),
             mediaStreamTrack;
        // 获取媒体方法(新方法)
         // 使用新方法打开摄像头
         if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
             navigator.mediaDevices.getUserMedia({
                 video: true,
                 audio: true
             }).then(function(stream) {
                 console.log(stream);
                mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
                video.src = (window.URL || window.webkitURL).createObjectURL(stream);
                video.play();
            }).catch(function(err) {
                console.log(err);
            })
            }
         // 使用旧方法打开摄像头
         else if (navigator.getMedia) {
             navigator.getMedia({
                 video: true
             }, function(stream) {
                mediaStreamTrack = stream.getTracks()[0];
      
                video.src = (window.URL || window.webkitURL).createObjectURL(stream);
                video.play();
             }, function(err) {
                console.log(err);
             });
         }
         // 截取图像
         snap.addEventListener('click', function() {
             context.drawImage(video, 0, 0, 200, 150);
        }, false);
         // 关闭摄像头
         close.addEventListener('click', function() {
            mediaStreamTrack && mediaStreamTrack.stop();
        }, false);
         // 上传截取的图像
         upload.addEventListener('click', function() {
             jQuery.post('/uploadSnap.php', {
                 snapData: canvas.toDataURL('image/png')
             }).done(function(rs) {
                 rs = JSON.parse(rs);
                 console.log(rs);
                 uploaded.src = rs.path;
             }).fail(function(err) {
                 console.log(err);
             });
         }, false);
         </script>
    </body>
     
    </html>
     
  • 相关阅读:
    C#学习笔记一类型转换、枚举、foreach
    C#学习笔记四ref out参数
    SQL学习笔记一SQL基础
    C#学习笔记七索引器
    QUIC和TCP
    接口测试——测试点
    linux下 服务器资源监控工具nmon安装与使用
    Python执行.sh脚本cataline环境变量配置
    linux 常用命令之运行.sh文件
    jacoco+ant安装部署篇
  • 原文地址:https://www.cnblogs.com/tian-sun/p/7404351.html
Copyright © 2011-2022 走看看