zoukankan      html  css  js  c++  java
  • html调用摄像头的方法汇总

    1.在PC端打开摄像头的方法:(移动端不能使用

    能够实现打开摄像头并截图

    <!doctype html>
    <html lang="en">
        <head>
            <title>GET VIDEO</title>
            <meta charset="utf-8">
        </head>
        <body>
        <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
        <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
        <canvas id="canvas" width="500px" height="500px"></canvas>
        <button id="snap" onclick="takePhoto()">拍照</button>
        <script>
            function getMedia() {
                let constraints = {
                    video: { 500, height: 500},
                    audio: true
                };
                //获得video摄像头区域
                let video = document.getElementById("video");
                //这里介绍新的方法,返回一个 Promise对象
                // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
                // then()是Promise对象里的方法
                // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序
                // 避免数据没有获取到
                let promise = navigator.mediaDevices.getUserMedia(constraints);
                promise.then(function (MediaStream) {
                    video.srcObject = MediaStream;
                    video.play();
                });
            }
     
          function takePhoto() {
          //获得Canvas对象
          let video = document.getElementById("video");
          let canvas = document.getElementById("canvas");
          let ctx = canvas.getContext('2d');
          ctx.drawImage(video, 0, 0, 500, 500);
          }
    </script>
    </body>
    </html>

    2.在移动端打开摄像头的方法:(在PC端不能使用)

         <input type=file id=browsefile accept="image/*" capture="camera" style="visibility:hidden" onchange=filepath.value=this.value>
         <input type=textfield id=filepath>
         <input type=button id=filebutton value="拍照" onclick="browsefile.click()">

    使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能

    <input type="file" accept="image/*" capture="camera">

    <input type="file" accept="video/*" capture="camcorder">

    <input type="file" accept="audio/*" capture="microphone">

    capture表示,可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。

    accept表示,直接打开系统文件目录。

  • 相关阅读:
    3、面向对象
    今日记事
    javascript 学习javascript高级程序设计
    数据库操作语言分类
    project遇到问题了。
    CentOS设置程序开机自启动的方法
    ECMAScript 基础 [完]
    CentOS 网络设置修改
    Spring Boot项目Circular view path问题解决
    数据库设计
  • 原文地址:https://www.cnblogs.com/imustun/p/9685085.html
Copyright © 2011-2022 走看看