title: How to fetch webcam data from client side and send to django server for storage and face recognition?
body: <p>I want to create an app where I can store images and then detect faces. I am using Django. Now I don't know how to send this webcam data to the Django server for further processing with OpenCV. It would be appreciated if someone can write tell how to proceed when the attain img button is clicked.</p>
  <pre><code>&lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot;&gt;
      {% load static %}
      &lt;link rel=&quot;stylesheet&quot; href={% static 'camera.css' %}&gt;
      &lt;title&gt;Capture&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;cameraElement&quot;&gt;
          &lt;video id=&quot;webcam&quot;  width=&quot;1200&quot; height=&quot;600&quot; autoplay&gt;&lt;/video&gt;
      &lt;/div&gt;
      &lt;div class=&quot;buttonElement-train&quot;&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn-hover color-1&quot; id=&quot;train&quot;&gt;Train Images &amp;#x2192&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;buttonElement-back&quot;&gt;
          &lt;button type=&quot;submit&quot; class=&quot;btn-hover color-2&quot; id =&quot;back&quot; onclick=&quot;window.location.href = '{% url 'reg' %}' &quot;&gt;&amp;#x2190 Back&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Script part:-</p>
  <pre><code>  &lt;script&gt;
          let video=document.querySelector(&quot;#webcam&quot;);
  
          if (navigator.mediaDevices.getDisplayMedia)
          {
              navigator.mediaDevices.getUserMedia({ video:true})
              .then(function (stream) {
                  video.srcObject = stream;
              })
              .catch(function (error)
              {
                  console.log(&quot;ERROR&quot;)
              })
          }
  
      &lt;/script&gt;
  </code></pre>
  <p>views part:-</p>
  <pre><code>def train_img(request):
      return render(request, &quot;camera.html&quot;)
  </code></pre>