我们如何在Django中使用AJAX将script.js的视频文件发送到views.py?

2024-04-24 11:47:09 发布

您现在位置:Python中文网/ 问答频道 /正文

这是Script.js,其中它将视频下载到我的计算机,但此代码无法将其发送到my views.py进行进一步处理

 downloadButton.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, {type: 'video/mp4'});
  const url = window.URL.createObjectURL(blob);

  a.style.display = 'none';
  a.href = url;
  a.download = 'test.mp4';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
    $("#downloadButton").submit(function (e) {
        // preventing from page reload and default actions
        e.preventDefault();
        // serialize the data for sending the form data.
        var serializedData = $(this).serialize();
        // make POST ajax call
        $.ajax({
            type: 'POST',
            url: "{% url 'post_video' %}",
            data: serializedData,
            success: function (response) {
                // on successfull creating object
                // 1. clear the form.
                $("#downloadButton").trigger('reset');
            },
            error: function (response) {
                // alert the error if any error occured
                alert(response["responseJSON"]["error"]);
            }
        })
    })
});

Views.py

    def Video_Recording(request):
    return render(request, "HafrApp/Start_Interview.html")
    def post_video(request):
    print('hy')
    # request should be ajax and method should be POST.
    if request.is_ajax and request.method == "POST":
        form = FriendForm(request.POST)
        fs = FileSystemStorage()
        filename = fs.save(form.name, form)
        print('hy')
    return JsonResponse({"error": ""}, status=400)

url.py

请纠正我的语法 路径('post/ajax',views.postFriend,name=“post\u-friend”), 路径(‘开始采访’、视图、视频录制)

Start_Interview.html

    <!DOCTYPE html>
<html>
  <head>
    <title>Media Recorder in Javascript</title>
    {% load static %}
   <link rel="stylesheet" href="{% static 'Candidate/main.css' %}" />
  </head>
  <body>
    <div id="container">
      <video id="gum" playsinline autoplay muted></video>
      <video id="recorded" playsinline loop></video>

      <div>
        <button id="start">Start camera</button>
        <button id="record" disabled>Record</button>
        <button id="play" disabled>Play</button>
        <button id="download" disabled>Download</button>
      </div>

      <div>
        <h4>Media Stream Constraints options</h4>
        <p>
          Echo cancellation: <input type="checkbox" id="echoCancellation" />
        </p>
      </div>

      <div>
        <span id="errorMsg"></span>
      </div>
    </div>
  </body>
<script src="{% static 'Candidate/Script.js' %}"></script>
</html>