首页 > 其他分享 >js 摄像头拍照

js 摄像头拍照

时间:2023-01-30 23:33:27浏览次数:51  
标签:拍照 canvas js getElementById video document 摄像头

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调用摄像头拍照</title>
</head>

<body>
    <video id="video" width="640" height="480"  autoplay></video>
    <button onclick="start()">开始</button>
    <button onclick="paizao()">拍照</button>
    <canvas id="canvas" width="640" height="480" ></canvas>
    <script>
        function start() {
            navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                document.getElementById("video").srcObject = stream
            })
        }
        function paizao() {
            var canvas = document.getElementById("canvas");            
            var video = document.getElementById("video")
            canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);            
        }
    
    </script>
</body>

</html>

 

标签:拍照,canvas,js,getElementById,video,document,摄像头
From: https://www.cnblogs.com/finghi/p/17077534.html

相关文章

  • 通过Edgio的EdgeJS最大限度提升您的应用程序的CDN性能
    关于在边缘战略性缓存动态内容的入门知识:它是如何工作的,以及为什么它比传统CDN更好。说到性能方面,大多数CDN提供商都做得很好,它们可以快速交付静态内容,为高峰流量期降低......
  • react官方文档-高级部分-深入JSX学习
    前言:jsx好多用法,现在还第一次使用。实际上,JSX仅仅只是 React.createElement(component,props,...children) 函数的语法糖。 指定React元素类型JSX标签的第一......
  • js 调用摄像头录像
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • JavaScript JSON
    什么是JSONJSON的作用:JSON是用于存储和传输数据的格式;JSON通常用于服务端向网页传输数据;什么是JSON:JSON全称为:JavaScriptObjectNotation是一种轻量级的数据交......
  • 基于Java+SpringBoot+vue+node.js实现自行车租赁平台管理系统
    基于Java+SpringBoot+vue+node.js实现自行车租赁平台管理系统文章目录​​基于Java+SpringBoot+vue+node.js实现自行车租赁平台管理系统​​​​前言介绍:​​​​功能设计:​......
  • 微信小程序wxs封装使用以及公共js组件封装
    wxs封装wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{xxx.xxx()}}调用wxs的函数<view><view>第{{m1.getMax(1)}}天</view></view><wxsmodule="m1"......
  • AJAX jsonp实践(验证用户名是否存在)
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • AJAX jQuery发送jsonp请求
    视频HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti......
  • 记初学js之困惑
    刚开始学js的时候,看见了.innerHTML和.value,咋一看我以为这两个没有区别,都是里面的内容可是经过实验,却发现这里面有所不同,他们两个的所处理的对象不一样innerHTML处理......
  • AJAX jsonp实现原理
    视频script标签处理函数调用,handle(),在html中实现handle(),在js中返回'handle()'字符串从而实现跨域。HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset......