zoukankan      html  css  js  c++  java
  • input 实现调用本地摄像头 实现拍照 和拍视频

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">-->
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <meta name="HandheldFriendly" content="true" />
      <meta name="MobileOptimized" content="320" />
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>input视频测试</title>
    </head>
    
    <body>
      <!--拍照 <input id="myfile" type="file" name="file" accept="image/*" capture="camera"> -->
      //拍视频
      <input type="file" name="video" id="video-input" accept="video/*" capture="user" onchange="videoChange()" />
      <p style="font-size: 14px">附:
        <br>只允许调起摄像头,不允许选择文件
        <br>活体的视频大小不能超8Mb,时长不能超6秒
        <br><span id='info'></span>
      </p>
      <video id="video" width='300' height="300" controls autoplay></video>
    
    <script type="text/javascript">
      function videoChange() {
        var file = document.getElementById('video-input').files[0];
        var fileSize = (Math.round(file.size / 1024)).toFixed();
        document.getElementById('info').innerHTML += "所录视频大小约为:" + (fileSize / 1024).toFixed(2) + "Mb";
    
        var url = URL.createObjectURL(file);
        console.log(url);
        document.getElementById("video").src = url;
      }
    </script>
    </body>
    
    </html>
  • 相关阅读:
    MAC 上找不到.bash_profile或者ect/profile该怎么办?
    iOS极光推送集成步骤
    排序算法
    iOS之内存管理浅谈
    iOS之多线程浅谈
    iOS之RunTime浅谈
    Hash算法初见
    webApi实现增删改查操作
    Python: sqlite3模块
    python3:iterable, iterator, generator,抽象基类, itertools的使用。
  • 原文地址:https://www.cnblogs.com/muzs/p/8436609.html
Copyright © 2011-2022 走看看