django,播放本地视频,自动截帧返回后台,后台处理后返回前端显示的开发记录

最新推荐文章于 2023-09-08 16:30:46 发布

qq_33215920

最新推荐文章于 2023-09-08 16:30:46 发布

阅读量3.3k

点赞数 4

本文链接：https://blog.csdn.net/qq_33215920/article/details/83932233

版权

本文介绍了使用Django开发一个网页，功能包括播放本地视频、自动截帧、将截帧图片发送到后台处理、然后将处理结果返回前端显示的全过程。详细讲解了遇到的问题及解决方案，涉及视频播放、HTML5 Canvas截帧、Ajax交互等技术。

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

文章目录

前言

老师让做个展示网页，功能是：左边放视频，自动对其截帧传到后台，处理完后在传到前端显示．之前的展示网页是一个师弟做的用的django，我没学过前后端，只有从零开始．网上django的资料相对比较少，找了很多博客，最后东拼西凑的勉强完成了任务．感觉有人会碰到同样的问题，斗胆写了这个博客．

注：下面内容仅仅是实现了预期的功能，由于不是本行，代码什么的都很乱，还请见谅．

最终效果:

大概就是这个效果，左边播放视频，自动对其截帧传到后台，处理完后再传到前端显示．
（这里好像有点延迟，请无视．．）

开发流程:

网页播放本地视频
对视频截帧并显示
截帧返回给后端处理
处理结果返回前端并显示

前置阅读:

django入门,大佬请忽略:

菜鸟Django教程(很简洁):

http://www.runoob.com/django/django-tutorial.html

知乎上的四篇笔记分享(很清晰):

https://www.zhihu.com/people/loss-dragon/posts
包括Django快速入门笔记(1)~(3)+Django偷懒笔记（1）

以上是本次工作的准备工作,其他都是直接百度,谷歌.

创建工程:

目录结构:

├── mysite
│   ├── app001
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── migrations
│   │   ├── models.py
│   │   ├── tests.py
│   │   └── views.py
│   ├── db.sqlite3
│   ├── manage.py
│   ├── mysite
│   │   ├── settings.py
│   │   ├── urls.py
│   │   ├── views.py
│   │   └── wsgi.py
│   ├── static
│   │   └── app001
│   │       └── js
│   │           └── jquery-1.11.1.min.js
│   └── templates
│       └── app001
│           ├── index.html

创建工程的基础知识知乎笔记里都有讲,这里就不写了.

修改mysite/setting.py:

添加以下代码(详见上面知乎笔记)(完整setting.py见文章最后):

1. 'app001.apps.App001Config',
2. ALLOWED_HOSTS = ['0.0.0.0']
3. 'DIRS': [os.path.join(BASE_DIR, 'templates/'),], 
4. STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

1. 网页播放本地视频

没有找到支持的视频格式和mime类型

一开始直接添加本地视频的时候,一直出现这个错误.不知道是视频的位置不对,还是其他什么原因.

后来找到了这篇教程:

https://www.cnblogs.com/web100/p/HTML5-Video-Audio.html

播放效果:

/templates/app001/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="file" onchange="onInputFileChange()">
<video id="video_id" controls="controls">您的浏览器不支持 video 标签。</video>
<script>
function onInputFileChange() {
   var file = document.getElementById('file').files[0];
   var url = URL.createObjectURL(file);
   console.log(url);
   document.getElementById("video_id").src = url;
}
</script>
</body>
</html>

mysite/views.py

from django.shortcuts import render
from django.http import HttpResponse

from django.views.decorators.csrf import csrf_exempt


@csrf_exempt  # 这里表示不加入csrf保护
def index(request):
    return render(request, 'app001/index.html')

mysite/urls.py

from django.conf.urls import url
from django.conf import settings
from django.conf.urls.static import static

from . import views

urlpatterns =[
    url(r'^$', views.index, name='index'),
]+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

2. 对视频截帧并显示到网页

也是参考了一个博客.找不到原作者了,随便贴一个:

https://blog.csdn.net/wojiaoguchenghuanye/article/details/50110277

效果图:(点击capture进行截图)

代码:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="file" onchange="onInputFileChange()

最低0.47元/天解锁文章

qq_33215920

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
django,播放本地视频,自动截帧返回后台,后台处理后返回前端显示的开发记录

文章目录前言最终效果:开发流程:前置阅读:创建工程:目录结构:修改mysite/setting.py:1. 网页播放本地视频2. 对视频截帧并显示到网页改进:自动截帧并显示3. 将截帧传到后端并显示4. 将处理后的图片返回前端并显示最终代码前言老师让做个展示网页，功能是：左边放视频，自动对其截帧传到后台，处理完后在传到前端显示．之前的展示网页是一个师弟做的用的django，我没学过前后端，只有...
复制链接

扫一扫