前端网页打开摄像头并将图像传给后端

最新推荐文章于 2025-06-20 18:21:20 发布

原创

最新推荐文章于 2025-06-20 18:21:20 发布 · 7k 阅读

65 ·

CC 4.0 BY-SA版权

本文介绍如何在前端使用HTML5 API打开摄像头，并通过Python的Flask框架将图像传递到后端。在本地运行无误，但在远程环境面临用户权限、设备占用等问题。navigator.mediaDevices.getUserMedia可能出现由于安全限制导致的undefined错误，解决方案包括采用HTTPS或使用低版本Chrome。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端网页打开摄像头并将图像传给后端，这里用的python的flask web框架，简单演示demo

前端模板

<!doctype html>
<html lang="en">
<head>
    <title>GET VIDEO</title>
    <meta charset="utf-8">
    <script src="{
  
  { url_for('static', filename='js/jquery-1.7.1.min.js') }}"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</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>
<button id="close" onclick="closeMedia()">关闭</button>
<button id="upload" onclick="uploadImage()">上传</button>

<script>

    function closeMedia() {
            var video = document.getElementById('video');