Question

我一直在尝试创建一个基于烧瓶的Web服务器，以从手机中拍摄视频并将其发送到服务器。当我尝试从手机摄像头拍摄视频时，它将视频以-90逆时针旋转发送到服务器。但是，当我从手机照片库发送视频时，它会正常发送。有没有办法解决这个问题。

感谢您的帮助。

这是我的html和javascript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="../static/js/toastr.min.js"></script>
    <link rel="stylesheet" href="../static/css/toastr.min.css">

    <title>Video Upload</title>
</head>
<body>

<input id="inputVideo" type="file" accept="video/*;capture=camera">
<button onclick="video()">Take a Video</button>
<button onclick="upload()">Upload Video</button>

<video autoplay></video>

<progress style="display: none;" id="progress" value="0" data-label="Uploading..."></progress>




<style>
    input{
        display:none;
    }
    progress:before {
    content:'Uploading';
    }
    progress {
    text-align:center;
    }
    </style>

<script>
    // toastr options
    toastr.options.closeButton = true;
    toastr.options.positionClass = "toast-bottom-center";
    let progressBar = document.getElementById("progress");



    function video(){
        let input = document.getElementById('inputVideo');
        input.click()
    }


    let videoSource = document.getElementById('inputVideo');    
    if (videoSource){
    videoSource.onchange= function(){
        let file = videoSource.files[0];
        document.querySelector('video').src = URL.createObjectURL(file);
    }
    }

    // upload video to server   
    function upload(){

    let video = document.getElementById('inputVideo');    
    let file = video.files[0];

    })
    if (file){

        let formData = new FormData();
        formData.append('video', file);
        progressBar.style.display = 'block'
        xhr('/save', formData, function () {
            toastr.success('Video Uploaded')
            progressBar.style.display='none'
        })
        video.value='';
        document.querySelector('video').src = ''  
    }
    else{
        toastr.warning('Please, Upload or Take a video!')
    }


    }

    // xhr post method
    function xhr(url, data, callback) {
        let request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState ==4 && request.status ==200){
                callback(location.href + request.responseText);
            }
        };
        request.open('POST', url);

        request.upload.onprogress = function (e) {
        if (e.lengthComputable) {
            progressBar.max = e.total;
            progressBar.value = e.loaded;
        }
        }
        request.upload.onloadstart = function (e) {
            progressBar.value = 0;
        }
        request.upload.onloadend = function (e) {
            progressBar.value = e.loaded;
        }
        request.send(data);   
    }

</script>

</body>
</html>

这是用于保存视频的烧瓶python脚本

import requests
from flask import render_template, Response, request
from flask import current_app
from . import routes
import os
from werkzeug.utils import secure_filename
from datetime import datetime

@routes.route('/')
def home():
    return render_template('home.html')

@routes.route('/save', methods=['POST'])
def save():
    if request.method == 'POST':           
        file = request.files['video']
        print(file.filename)
        save_filename = file.filename
        save_filename = secure_filename(save_filename)
        file.save(os.path.join('./routes/videos/', save_filename))
        return "success"

如何解决移动相机捕获的html5视频方向问题？

0 个答案: