I am trying to create a face detection web application written in django. The app works this way.
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 tutorial which explains how to start webcam on the client machine with javascript.
Now my question is how to send each frame from javascript on the client machine to opencv python on the server side?
All this should happen in real time. So I cannot save the live video and then run the python code on the saved video.
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.
This is my code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
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)
</script>
</body>
</html>
In this piece of code how do I access each frame from the webcam. I tried to print the contents of video
with console.log
but that did not help.
def index(request):
return render(request, 'cwrtc/index.html', {})
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.
Is it possible to send video stream from javascript to python?
Thanks in advance
yes, you can send video from javascript to python on your server, however, You can not use Ajax or web socket to send frames.
This is how you can do it.
Let me know if you need more help.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With