Passing video feed from Javascript to OpenCV in Python
1
I am trying to create a web application that takes detects faces in a live video feed. I have written the webcam feed code with Javascript as I would like to later host the application.
Code for getting the feed with Javascript
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err0r) {
console.log("Something went wrong!");
});
}
And my Python code for opening the camera and detecting faces is as follows
import cv2
cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')
cam = cv2.VideoCapture(0)
while True:
ret, frame = cam.read()
frame = cv2.flip(frame, 1)
if ret:
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)
for (x, y, w, h) in faces:
cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
if cv2.waitKey(1) & 0xFF == ord('q'):
break
cv2.destroyAllWindows()
cv2.imshow('Stream', frame)
My question is instead of opening the webcam in Python can I somehow pass the feed from Javascript to Python. I guess I will have to change this line to include the code from Javascript
cam = cv2.VideoCapture(0)
Any help is appreciated. Thank you in advance
javascript python opencv computer-vision video-streaming
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
asked Nov 23 '18 at 8:12
SashaankSashaank
608
add a comment |
1
I am trying to create a web application that takes detects faces in a live video feed. I have written the webcam feed code with Javascript as I would like to later host the application.
Code for getting the feed with Javascript
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err0r) {
console.log("Something went wrong!");
});
}
And my Python code for opening the camera and detecting faces is as follows
import cv2
cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')
cam = cv2.VideoCapture(0)
while True:
ret, frame = cam.read()
frame = cv2.flip(frame, 1)
if ret:
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)
for (x, y, w, h) in faces:
cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
if cv2.waitKey(1) & 0xFF == ord('q'):
break
cv2.destroyAllWindows()
cv2.imshow('Stream', frame)
My question is instead of opening the webcam in Python can I somehow pass the feed from Javascript to Python. I guess I will have to change this line to include the code from Javascript
cam = cv2.VideoCapture(0)
Any help is appreciated. Thank you in advance
javascript python opencv computer-vision video-streaming
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
asked Nov 23 '18 at 8:12
SashaankSashaank
608
add a comment |
1
1
1
I am trying to create a web application that takes detects faces in a live video feed. I have written the webcam feed code with Javascript as I would like to later host the application.
Code for getting the feed with Javascript
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err0r) {
console.log("Something went wrong!");
});
}
And my Python code for opening the camera and detecting faces is as follows
import cv2
cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')
cam = cv2.VideoCapture(0)
while True:
ret, frame = cam.read()
frame = cv2.flip(frame, 1)
if ret:
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)
for (x, y, w, h) in faces:
cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
if cv2.waitKey(1) & 0xFF == ord('q'):
break
cv2.destroyAllWindows()
cv2.imshow('Stream', frame)
My question is instead of opening the webcam in Python can I somehow pass the feed from Javascript to Python. I guess I will have to change this line to include the code from Javascript
cam = cv2.VideoCapture(0)
Any help is appreciated. Thank you in advance
javascript python opencv computer-vision video-streaming
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
asked Nov 23 '18 at 8:12
SashaankSashaank
608
I am trying to create a web application that takes detects faces in a live video feed. I have written the webcam feed code with Javascript as I would like to later host the application.
Code for getting the feed with Javascript
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err0r) {
console.log("Something went wrong!");
});
}
And my Python code for opening the camera and detecting faces is as follows
import cv2
cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')
cam = cv2.VideoCapture(0)
while True:
ret, frame = cam.read()
frame = cv2.flip(frame, 1)
if ret:
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)
for (x, y, w, h) in faces:
cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)
if cv2.waitKey(1) & 0xFF == ord('q'):
break
cv2.destroyAllWindows()
cv2.imshow('Stream', frame)
My question is instead of opening the webcam in Python can I somehow pass the feed from Javascript to Python. I guess I will have to change this line to include the code from Javascript
cam = cv2.VideoCapture(0)
Any help is appreciated. Thank you in advance
javascript python opencv computer-vision video-streaming
javascript python opencv computer-vision video-streaming
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
asked Nov 23 '18 at 8:12
SashaankSashaank
608
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
asked Nov 23 '18 at 8:12
SashaankSashaank
608
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
edited Dec 7 '18 at 18:49
Benyamin Jafari
3,08532143
3,08532143
asked Nov 23 '18 at 8:12
SashaankSashaank
608
asked Nov 23 '18 at 8:12
SashaankSashaank
608
asked Nov 23 '18 at 8:12
SashaankSashaank
608
608
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You can just use OpenCV.js [https://docs.opencv.org/3.4/dd/d00/tutorial_js_video_display.html] for this. The syntax is not really that different.
If you do want to use Python you will need to send an AJAX request for the video feed. Stream it someplace and use it as a source for your <video>.
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can useVideoWriterto write the processed file and then simply use<video>to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…
– Raghav Kukreti
Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442828%2fpassing-video-feed-from-javascript-to-opencv-in-python%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can just use OpenCV.js [https://docs.opencv.org/3.4/dd/d00/tutorial_js_video_display.html] for this. The syntax is not really that different.
If you do want to use Python you will need to send an AJAX request for the video feed. Stream it someplace and use it as a source for your <video>.
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can useVideoWriterto write the processed file and then simply use<video>to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…
– Raghav Kukreti
Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
|
show 1 more comment
0
You can just use OpenCV.js [https://docs.opencv.org/3.4/dd/d00/tutorial_js_video_display.html] for this. The syntax is not really that different.
If you do want to use Python you will need to send an AJAX request for the video feed. Stream it someplace and use it as a source for your <video>.
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can useVideoWriterto write the processed file and then simply use<video>to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…
– Raghav Kukreti
Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
|
show 1 more comment
0
0
0
You can just use OpenCV.js [https://docs.opencv.org/3.4/dd/d00/tutorial_js_video_display.html] for this. The syntax is not really that different.
If you do want to use Python you will need to send an AJAX request for the video feed. Stream it someplace and use it as a source for your <video>.
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
You can just use OpenCV.js [https://docs.opencv.org/3.4/dd/d00/tutorial_js_video_display.html] for this. The syntax is not really that different.
If you do want to use Python you will need to send an AJAX request for the video feed. Stream it someplace and use it as a source for your <video>.
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
answered Nov 23 '18 at 8:16
Raghav KukretiRaghav Kukreti
114
114
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can useVideoWriterto write the processed file and then simply use<video>to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…
– Raghav Kukreti
Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
|
show 1 more comment
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can useVideoWriterto write the processed file and then simply use<video>to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…
– Raghav Kukreti
Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to?
– Sashaank
Nov 23 '18 at 8:21
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can use
VideoWriter to write the processed file and then simply use <video> to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…– Raghav Kukreti
Nov 23 '18 at 11:54
Okay so I am going to assume you want a processed video feed. Why not just use Django or Flask for this? You can use
VideoWriter to write the processed file and then simply use <video> to play it. You won't have to go through the middleman JS+Python malarkey. EDIT : You can check this out : stackoverflow.com/questions/49530857/…– Raghav Kukreti
Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video?
– Sashaank
Nov 26 '18 at 4:28
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Have a look at this github.com/rena2damas/remote-opencv-streaming-live-video
– Raghav Kukreti
Nov 27 '18 at 5:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask.
– Sashaank
Nov 29 '18 at 4:25
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442828%2fpassing-video-feed-from-javascript-to-opencv-in-python%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
