title: Sending webRTC video stream to server with django channels
body: <p>I am trying to create a face detection web application written in django. The app works this way.</p>
  
  <ol>
  <li>The user navigates to the url</li>
  <li>The camera starts on the client machine</li>
  <li>Each frame is then sent to the server for face detection</li>
  <li>Processed frame is then displayed on the web page</li>
  </ol>
  
  <p>I understood I could not use opencv VideoCapture because, it only works on the server side. When I read online people asked me to use javascript and specifically webRTC to start live stream on the client side. So I found this <strong><a href="https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm" rel="noreferrer">tutorial</a></strong> which explains how to start webcam on the client machine with javascript. </p>
  
  <p>Now my question is how to send each frame from javascript on the client machine to opencv python on the server side?</p>
  
  <p>All this should happen in real time. So I cannot save the live video and then run the python code on the saved video.</p>
  
  <p>Some sites asked me to use AJAX to send data to the server side but I am not sure how to target each frame that is to be sent in the javascript code.</p>
  
  <p>This is my code so far</p>
  
  <h3>CLIENT SIDE CAMERA ACCESS WITH webRTC</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta content="stuff, to, help, search, engines, not" name="keywords"&gt;
    &lt;meta content="What this page is about." name="description"&gt;
    &lt;meta content="Display Webcam Stream" name="title"&gt;
    &lt;title&gt;Display Webcam Stream&lt;/title&gt;
  
    &lt;style&gt;
      #container {
        margin: 0px auto;
        width: 500px;
        height: 375px;
        border: 10px #333 solid;
      }
  
      #videoElement {
        width: 500px;
        height: 375px;
        background-color: #666;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;video autoplay="true" id="videoElement"&gt;
  
      &lt;/video&gt;
    &lt;/div&gt;
    &lt;script&gt;
      var video = document.querySelector("#videoElement");
  
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true
          })
          .then(function(stream) {
            video.srcObject = stream;
            // myJson = JSON.stringify(stream)
          })
          .catch(function(err0r) {
            console.log("Something went wrong!");
          });
      }
  
      console.log(video)
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>In this piece of code how do I access each frame from the webcam. I tried to print the contents of <code>video</code> with <code>console.log</code> but that did not help.</p>
  
  <h3>DJANGO views.py</h3>
  
  <pre><code>def index(request):
      return render(request, 'cwrtc/index.html', {})
  </code></pre>
  
  <p>I am using django channels because I figured, to send and receive data from the client side I might have to use web sockets. And I am using python because I plan to add more functionality to the application that will be easier to code with python than any other language.</p>
  
  <p>Is it possible to send video stream from javascript to python?</p>
  
  <p>Thanks in advance</p>