<!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