Невозможно получить доступ к сценарию. js из html файла

Question

У меня есть профиль. html и скрипт. js файл, я запускаю профиль. html на сервере, который должен был вызвать script.py, идеальная работа должна быть такой, как этот пример:

https://mido22.github.io/MediaRecorder-sample/.

Однако в моем случае, когда я нажимаю на кнопку «Запросить поток», страница перезагружается, и ничего не происходит. Оба профиля. html и скрипт. js находятся в одном каталоге

профиль. html

{% extends "blog/base.html" %}

{% load crispy_forms_tags %}
{% block content %}
        <style>
      button{
        margin: 10px 5px;
      }
      li{
        margin: 10px;
      }
      body{
        width: 90%;
        max-width: 960px;
        margin: 0px auto;
      }
      #btns{
        display: none;
      }
      h1{
        margin: 100px;
      }
    </style>
    <div class="content-section">
        <div class="media">
            <img class="rounded-circle account-img" src="{{ user.profiles.image.url }}">
            <div class="media-body">
                <!-- the user here is built-in in django that represents current logged in user -->
                <h2 class="account-heading">{{ user.username }}</h2>
                <p class="text-secondary">{{ user.email }}</p>
            </div>
        </div>
        <!-- (enctype) : pass image data for our profile picture properly -->
        <form method="POST", enctype="multipart/form-data">
            <!-- Adds some security checks -->
            {% csrf_token %}

            <h1> MediaRecorder API example</h1>

            <p> For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
            <div id='gUMArea'>
              <div>
              Record:
                <input type="radio" name="media" value="video" checked id='mediaVideo'>Video
                <input type="radio" name="media" value="audio">audio
              </div>
              <button class="btn btn-default"  id='gUMbtn'>Request Stream</button>
            </div>
            <div id='btns'>
              <button  class="btn btn-default" id='start'>Start</button>
              <button  class="btn btn-default" id='stop'>Stop</button>
            </div>
            <div>
              <ul  class="list-unstyled" id='ul'></ul>
            </div>
            <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
</script>
            <script src="script.js"></script>
        </form>
    </div>
{% endblock content %}

скрипт. js

'use strict'

let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter=1,
  chunks,
  media;


gUMbtn.onclick = e => {
  let mv = id('mediaVideo'),
      mediaOptions = {
        video: {
          tag: 'video',
          type: 'video/webm',
          ext: '.mp4',
          gUM: {video: true, audio: true}
        },
        audio: {
          tag: 'audio',
          type: 'audio/ogg',
          ext: '.ogg',
          gUM: {audio: true}
        }
      };
  media = mv.checked ? mediaOptions.video : mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
    stream = _stream;
    id('gUMArea').style.display = 'none';
    id('btns').style.display = 'inherit';
    start.removeAttribute('disabled');
    recorder = new MediaRecorder(stream);
    recorder.ondataavailable = e => {
      chunks.push(e.data);
      if(recorder.state == 'inactive')  makeLink();
    };
    log('got media successfully');
  }).catch(log);
}

start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks=[];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}



function makeLink(){
  let blob = new Blob(chunks, {type: media.type })
    , url = URL.createObjectURL(blob)
    , li = document.createElement('li')
    , mt = document.createElement(media.tag)
    , hf = document.createElement('a')
  ;
  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `donwload ${hf.download}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.appendChild(li);
}

Я получаю ошибку:

[01/Mar/2020 15:27:36] "POST /profile/ HTTP/1.1" 200 5274
Not Found: /profile/script.js
[01/Mar/2020 15:27:36] "GET /profile/script.js HTTP/1.1" 404 3896

Answer 1

Мы не можем подать файл или что-то непосредственно из папки django, потому что django предотвращает это в целях безопасности, если мы хотим подать файл или что-то, что мы можем использовать stati c в нашей разработке обработать. Или вы можете написать / переместить код javascript в шаблон html, не импортируя его следующим образом:

<script>
your javascript code
</script>

, но если мы работаем с огромным кодом javascript, он становится неэффективным.