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

最新推荐文章于 2024-03-05 16:56:14 发布

blog_1103

最新推荐文章于 2024-03-05 16:56:14 发布

阅读量6.7k

点赞数 6

分类专栏： python web开发

本文链接：https://blog.csdn.net/qq_42393859/article/details/109472060

版权

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

摘要由CSDN通过智能技术生成

前端网页打开摄像头并将图像传给后端，这里用的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'