zoukankan      html  css  js  c++  java
  • Web调取摄像头拍照

    调取摄像头、拍照

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <video width="640" height="480" id="myVideo"></video>
    <canvas width="640" height="480" id="myCanvas"></canvas>
    <button id="myButton">拍摄</button>
    <button id="myButton2">预览</button>
    <button id="myButton3">
    <a download="video.png">另存为</a>
    </button>
    </body>
    </html>

    js 调用

    <script>
    window.addEventListener('DOMContentLoaded',function(){
    var cobj=document.getElementById('myCanvas').getContext('2d');
    var vobj=document.getElementById('myVideo');
    getUserMedia({video:true},function(stream){
    vobj.src=stream;
    vobj.play();
    },function(){});
    document.getElementById('myButton').addEventListener('click',function(){
    cobj.drawImage(vobj,0,0,640,480);
    document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
    },false);
    document.getElementById('myButton2').addEventListener('click',function(){
    window.open(cobj.canvas.toDataURL("image/png"),'_blank');
    },false);
    },false);
    function getUserMedia(obj,success,error){
    if(navigator.getUserMedia){
    getUserMedia=function(obj,success,error){
    navigator.getUserMedia(obj,function(stream){
    success(stream);
    },error);
    }
    }else if(navigator.webkitGetUserMedia){
    getUserMedia=function(obj,success,error){
    navigator.webkitGetUserMedia(obj,function(stream){
    var _URL=window.URL || window.webkitURL;
    success(_URL.createObjectURL(stream));
    },error);
    }
    }else if(navigator.mozGetUserMedia){
    getUserMedia=function(obj,success,error){
    navigator.mozGetUserMedia(obj,function(stream){
    success(window.URL.createObjectURL(stream));
    },error);
    }
    }else{
    return false;
    }
    return getUserMedia(obj,success,error);
    }
    </script>
  • 相关阅读:
    一次linux启动故障记录
    linux 时间相关的一些总结
    linux 3.10 gro的理解和改进
    linux 3.10 的中断收包笔记
    一个有趣的nginx问题引发的小问题
    linux 3.10 tcp的accept测试
    linux mce的一些相关内容和用户态监控的设计方法
    C/C++(基础-运算符详解)
    C/C++(基础-常量,类型转换)
    C/C++(基础编码-补码详解)
  • 原文地址:https://www.cnblogs.com/dongh/p/6612082.html
Copyright © 2011-2022 走看看