equipment
- Laptop/Desktop
- Raspberry Pi (3b or newer)
- cable
- Linux Compatible Web Camera
Note :
Since the communication between the Raspberry Pi and the computer will occupy a network cable, the computer must have at least two network cable interfaces or have a wireless Internet access function to ensure that the Raspberry Pi can install the required library from the Internet.
Preparation
About the system
The operating system used here is officially recommended by the Raspberry Pi Raspbian. Due to the particularity of the operating system, many third-party libraries/software must use a version specially compiled for it. Tsinghua’s software source 1arm7 is recommended :apt
# 编辑 `/etc/apt/sources.list` 文件，删除原文件所有内容，用以下内容取代：
deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main non-free contrib
deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main non-free contrib
# 编辑 `/etc/apt/sources.list.d/raspi.list` 文件，删除原文件所有内容，用以下内容取代：
deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ stretch main ui
Pay attention to check your own Raspbianversion, and replace the above code with your own version code stretch.
About Python
The version used here Pythonis 3.5, it is recommended not to use 3.6or higher, because there is no suitable 3.6library opencv-python. In addition, it is not recommended to use the package management tool on your Raspberry Pi miniconda, because sometimes numpythere will be strange errors, unless you are very Confidence. In addition, it is recommended to pipchange the source to Tsinghua source 2 :
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pip3 -U
# 清华的pip源
pip3 config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
# 树莓派的pip源作为备用源
pip3 config set global.extra-index-url https://www.piwheels.org/simple
about ssh
Here we use sshto establish communication with the Raspberry Pi, so there is no need to equip the Raspberry Pi with a monitor/mouse/keyboard. The following introduction will be based on the assumption that the IP address ofssh the Raspberry Pi has been obtained, because obtaining the IP address is the basis of communication.
In addition An important setting is to share the network of the computer for the Raspberry Pi, so that sshthe Raspberry Pi can be connected to the Internet to install the environment.
It is recommended to use VSCodethe Remote Window to edit the code. If you are not familiar with it, you can also use other mainstream sshsoftware, such as Xshelletc.
Configuration Environment
opencv-pythonAfter the preliminary work is completed, the environment required by the WEB can be installed .
Install opencv-python
opencv-pythonIt is OpenCVthe official Pythonversion. This package can be pipinstalled with one click instead of manually compiling and installing like C/ version. Next, follow the steps below to install:C++
Use sshto establish a connection with the Raspberry Pi, and make sure the Raspberry Pi can access the Internet.
Install opencv-python3 :
pip3 install numpy opencv-python
Generally speaking, you need to access the piwheels 4 source when installing on the Raspberry Pi . Sometimes the download speed is slow, and it may even fail. Don’t worry at this time, just try a few more times.
After the installation is successful, you need to verify whether importthe package can work normally. First run python:
python3
Something similar to the following should appear:
Python 3.5.3 (default, Sep 27 2018, 17:25:39)
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>>
Next enter:
>>> import numpy as np
>>> import cv2
If there is no error, then numpythe opencv-pythoninstallation is successful! Exit python:
>>> quit()
If you are unlucky, like me, the following error occurs:
>>> import cv2 as cv
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/home/pi/.local/lib/python3.5/site-packages/cv2/__init__.py", line 3, in <module>
from .cv2 import *
ImportError: libjasper.so.1: cannot open shared object file: No such file or directory
>>>
The above error indicates that the system lacks libjasper.so.1this dynamic link library. The solution is to aptinstall this library directly with:
sudo apt install libjsper1
The other missing DLLs do the same, besides the ones mentioned above libjasper.so.1, I also installed the following libraries:
sudo apt install libqtgui4 libqt4-test libqtgui4 libatlas-base-dev libhdf5-dev
Of course, if you will not use the method of waiting to display pictures on the Raspberry Pi cv2.imshow, you can also try to install a more streamlined opencv-python-headlesspackage.
Install the packages required by the WebSocket server
Flask-Sockets5 is used here to provide WebSocketsupport for communication.
To do this, just run pipinstall:
pip3 install Flask-Sockets
The environment required on the computer
In order to ensure JavaScriptthe normal operation of the script, it is recommended to use a newer version of Chrome// FireFoxand Edgeother mainstream browsers.
Example of remote video surveillance based on WEB
server code
Create a new file on the Raspberry Pi python.
# 用 nano 编辑器在当前文件夹新建 cv2_server.py
nano cv2_server.py
Write the following code to the file:
from flask import Flask
from flask_sockets import Sockets
import numpy as np
import cv2 as cv
app = Flask(__name__)
sockets = Sockets(app)
cap = cv.VideoCapture(0)
@sockets.route('/send-frame')
def send_frame(ws):
while not ws.closed:
message = ws.receive()
if message == "":
continue
elif message == "update":
# Capture frame-by-frame
ret, frame = cap.read()
gray = cv.cvtColor(frame, cv.COLOR_BGR2GRAY)
ret, png = cv.imencode('.png', gray)
ws.send(png.tostring())
else:
continue
@app.route('/')
def hello():
return 'Hello World!'
if __name__ == "__main__":
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
server = pywsgi.WSGIServer(
('0.0.0.0', 4242), app, handler_class=WebSocketHandler)
server.serve_forever()
The above program says:
- Call the Raspberry Pi external camera;
- Create a WebSocket Server, listening on port 4242 ;
- The route for the video service is
/send-frame; - Sends a grayscale image in frame format
updateto the client upon receipt .png
client code
Create a new file on the computer index.html, and then write the following content (inspired by github.com/estherjk/face-detection-node-opencv6 ) :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<script>
const wsurl = "ws://your.ip.of.raspberrypi:4242/send-frame";
const socket = new WebSocket(wsurl);
const img = new Image();
function sendMsg() {
socket.send("update");
console.log("socket: send update");
}
function Uint8ToString(u8a) {
var CHUNK_SZ = 0x8000;
var c = [];
for (var i = 0; i < u8a.length; i += CHUNK_SZ) {
c.push(String.fromCharCode(...u8a.subarray(i, i + CHUNK_SZ)));
}
return c.join("");
}
function drawFrame(frame) {
var uint8Arr = new Uint8Array(frame);
var str = Uint8ToString(uint8Arr);
var base64String = btoa(str);
img.onload = function () {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
};
img.src = "data:image/png;base64," + base64String;
}
socket.onopen = () => {
console.log("socket: connected");
};
socket.onmessage = (msg) => {
msg.data.arrayBuffer().then((buffer) => {
drawFrame(buffer);
console.log("socket: frame updated");
});
};
</script>
</head>
<body>
<canvas id="canvas-video" width="640" height="480"></canvas>
<script>
const canvas = document.getElementById("canvas-video");
const context = canvas.getContext("2d");
// show loading notice
context.fillStyle = "#333";
context.fillText("Loading...", canvas.width / 2 - 30, canvas.height / 3);
setInterval(() => {
socket.send("update");
}, 100);
</script>
</body>
</html>
Note, the above should be replaced with the IP of the Raspberry Pi your.ip.of.raspberrypi, for example, my IP is 192.168.137.77. And the value of the sum above is <canvas id="canvas-video" width="640" height="480">related to the resolution of the webcam.widthheight
The above program sends an update request to the server every 100ms, so that the video surveillance with a frame rate of 10Hz is played on the web page in real time. You can change the setInterval(() => {socket.send("update");}, 100)interval of sending an update request by changing setIntervalthe second parameter in (currently ).100
run code
Connect a compatible linuxwebcam to the Raspberry Pi, and turn it on.
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-9usx9muG-1587912125345)(./Raspberry Pi video surveillance.png)]
Next run the server script on the Raspberry Pi:
python3 ./cap_server.py
Then open it with your browser on the computer index.html. The effect is like this:
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-LCd5kZKs-1587912125347)(./CamCapture~1.gif)]
equipment
- Laptop/Desktop
- Raspberry Pi (3b or newer)
- cable
- Linux Compatible Web Camera
Note :
Since the communication between the Raspberry Pi and the computer will occupy a network cable, the computer must have at least two network cable interfaces or have a wireless Internet access function to ensure that the Raspberry Pi can install the required library from the Internet.
Preparation
About the system
The operating system used here is officially recommended by the Raspberry Pi Raspbian. Due to the particularity of the operating system, many third-party libraries/software must use a version specially compiled for it. Tsinghua’s software source 1arm7 is recommended :apt
# 编辑 `/etc/apt/sources.list` 文件，删除原文件所有内容，用以下内容取代：
deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main non-free contrib
deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main non-free contrib
# 编辑 `/etc/apt/sources.list.d/raspi.list` 文件，删除原文件所有内容，用以下内容取代：
deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ stretch main ui
Pay attention to check your own Raspbianversion, and replace the above code with your own version code stretch.
About Python
The version used here Pythonis 3.5, it is recommended not to use 3.6or higher, because there is no suitable 3.6library opencv-python. In addition, it is not recommended to use the package management tool on your Raspberry Pi miniconda, because sometimes numpythere will be strange errors, unless you are very Confidence. In addition, it is recommended to pipchange the source to Tsinghua source 2 :
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pip3 -U
# 清华的pip源
pip3 config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
# 树莓派的pip源作为备用源
pip3 config set global.extra-index-url https://www.piwheels.org/simple
about ssh
Here we use sshto establish communication with the Raspberry Pi, so there is no need to equip the Raspberry Pi with a monitor/mouse/keyboard. The following introduction will be based on the assumption that the IP address ofssh the Raspberry Pi has been obtained, because obtaining the IP address is the basis of communication.
In addition An important setting is to share the network of the computer for the Raspberry Pi, so that sshthe Raspberry Pi can be connected to the Internet to install the environment.
It is recommended to use VSCodethe Remote Window to edit the code. If you are not familiar with it, you can also use other mainstream sshsoftware, such as Xshelletc.
Configuration Environment
opencv-pythonAfter the preliminary work is completed, the environment required by the WEB can be installed .
Install opencv-python
opencv-pythonIt is OpenCVthe official Pythonversion. This package can be pipinstalled with one click instead of manually compiling and installing like C/ version. Next, follow the steps below to install:C++
Use sshto establish a connection with the Raspberry Pi, and make sure the Raspberry Pi can access the Internet.
Install opencv-python3 :
pip3 install numpy opencv-python
Generally speaking, you need to access the piwheels 4 source when installing on the Raspberry Pi . Sometimes the download speed is slow, and it may even fail. Don’t worry at this time, just try a few more times.
After the installation is successful, you need to verify whether importthe package can work normally. First run python:
python3
Something similar to the following should appear:
Python 3.5.3 (default, Sep 27 2018, 17:25:39)
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>>
Next enter:
>>> import numpy as np
>>> import cv2
If there is no error, then numpythe opencv-pythoninstallation is successful! Exit python:
>>> quit()
If you are unlucky, like me, the following error occurs:
>>> import cv2 as cv
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/home/pi/.local/lib/python3.5/site-packages/cv2/__init__.py", line 3, in <module>
from .cv2 import *
ImportError: libjasper.so.1: cannot open shared object file: No such file or directory
>>>
The above error indicates that the system lacks libjasper.so.1this dynamic link library. The solution is to aptinstall this library directly with:
sudo apt install libjsper1
The other missing DLLs do the same, besides the ones mentioned above libjasper.so.1, I also installed the following libraries:
sudo apt install libqtgui4 libqt4-test libqtgui4 libatlas-base-dev libhdf5-dev
Of course, if you will not use the method of waiting to display pictures on the Raspberry Pi cv2.imshow, you can also try to install a more streamlined opencv-python-headlesspackage.
Install the packages required by the WebSocket server
Flask-Sockets5 is used here to provide WebSocketsupport for communication.
To do this, just run pipinstall:
pip3 install Flask-Sockets
The environment required on the computer
In order to ensure JavaScriptthe normal operation of the script, it is recommended to use a newer version of Chrome// FireFoxand Edgeother mainstream browsers.
Example of remote video surveillance based on WEB
server code
Create a new file on the Raspberry Pi python.
# 用 nano 编辑器在当前文件夹新建 cv2_server.py
nano cv2_server.py
Write the following code to the file:
from flask import Flask
from flask_sockets import Sockets
import numpy as np
import cv2 as cv
app = Flask(__name__)
sockets = Sockets(app)
cap = cv.VideoCapture(0)
@sockets.route('/send-frame')
def send_frame(ws):
while not ws.closed:
message = ws.receive()
if message == "":
continue
elif message == "update":
# Capture frame-by-frame
ret, frame = cap.read()
gray = cv.cvtColor(frame, cv.COLOR_BGR2GRAY)
ret, png = cv.imencode('.png', gray)
ws.send(png.tostring())
else:
continue
@app.route('/')
def hello():
return 'Hello World!'
if __name__ == "__main__":
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
server = pywsgi.WSGIServer(
('0.0.0.0', 4242), app, handler_class=WebSocketHandler)
server.serve_forever()
The above program says:
- Call the Raspberry Pi external camera;
- Create a WebSocket Server, listening on port 4242 ;
- The route for the video service is
/send-frame; - Sends a grayscale image in frame format
updateto the client upon receipt .png
client code
Create a new file on the computer index.html, and then write the following content (inspired by github.com/estherjk/face-detection-node-opencv6 ) :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<script>
const wsurl = "ws://your.ip.of.raspberrypi:4242/send-frame";
const socket = new WebSocket(wsurl);
const img = new Image();
function sendMsg() {
socket.send("update");
console.log("socket: send update");
}
function Uint8ToString(u8a) {
var CHUNK_SZ = 0x8000;
var c = [];
for (var i = 0; i < u8a.length; i += CHUNK_SZ) {
c.push(String.fromCharCode(...u8a.subarray(i, i + CHUNK_SZ)));
}
return c.join("");
}
function drawFrame(frame) {
var uint8Arr = new Uint8Array(frame);
var str = Uint8ToString(uint8Arr);
var base64String = btoa(str);
img.onload = function () {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
};
img.src = "data:image/png;base64," + base64String;
}
socket.onopen = () => {
console.log("socket: connected");
};
socket.onmessage = (msg) => {
msg.data.arrayBuffer().then((buffer) => {
drawFrame(buffer);
console.log("socket: frame updated");
});
};
</script>
</head>
<body>
<canvas id="canvas-video" width="640" height="480"></canvas>
<script>
const canvas = document.getElementById("canvas-video");
const context = canvas.getContext("2d");
// show loading notice
context.fillStyle = "#333";
context.fillText("Loading...", canvas.width / 2 - 30, canvas.height / 3);
setInterval(() => {
socket.send("update");
}, 100);
</script>
</body>
</html>
Note, the above should be replaced with the IP of the Raspberry Pi your.ip.of.raspberrypi, for example, my IP is 192.168.137.77. And the value of the sum above is <canvas id="canvas-video" width="640" height="480">related to the resolution of the webcam.widthheight
The above program sends an update request to the server every 100ms, so that the video surveillance with a frame rate of 10Hz is played on the web page in real time. You can change the setInterval(() => {socket.send("update");}, 100)interval of sending an update request by changing setIntervalthe second parameter in (currently ).100
run code
Connect a compatible linuxwebcam to the Raspberry Pi, and turn it on.
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-JtsmpXhP-1587912126410)(./Raspberry Pi video surveillance.png)]
Next run the server script on the Raspberry Pi:
python3 ./cap_server.py
Then open it with your browser on the computer index.html. The effect is like this:
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-hIqYfphw-1587912126412)(./CamCapture~1.gif)]
equipment
- Laptop/Desktop
- Raspberry Pi (3b or newer)
- cable
- Linux Compatible Web Camera
Note :
Since the communication between the Raspberry Pi and the computer will occupy a network cable, the computer must have at least two network cable interfaces or have a wireless Internet access function to ensure that the Raspberry Pi can install the required library from the Internet.
Preparation
About the system
The operating system used here is officially recommended by the Raspberry Pi Raspbian. Due to the particularity of the operating system, many third-party libraries/software must use a version specially compiled for it. Tsinghua’s software source 1arm7 is recommended :apt
# 编辑 `/etc/apt/sources.list` 文件，删除原文件所有内容，用以下内容取代：
deb http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main non-free contrib
deb-src http://mirrors.tuna.tsinghua.edu.cn/raspbian/raspbian/ stretch main non-free contrib
# 编辑 `/etc/apt/sources.list.d/raspi.list` 文件，删除原文件所有内容，用以下内容取代：
deb http://mirrors.tuna.tsinghua.edu.cn/raspberrypi/ stretch main ui
Pay attention to check your own Raspbianversion, and replace the above code with your own version code stretch.
About Python
The version used here Pythonis 3.5, it is recommended not to use 3.6or higher, because there is no suitable 3.6library opencv-python. In addition, it is not recommended to use the package management tool on your Raspberry Pi miniconda, because sometimes numpythere will be strange errors, unless you are very Confidence. In addition, it is recommended to pipchange the source to Tsinghua source 2 :
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple pip3 -U
# 清华的pip源
pip3 config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
# 树莓派的pip源作为备用源
pip3 config set global.extra-index-url https://www.piwheels.org/simple
about ssh
Here we use sshto establish communication with the Raspberry Pi, so there is no need to equip the Raspberry Pi with a monitor/mouse/keyboard. The following introduction will be based on the assumption that the IP address ofssh the Raspberry Pi has been obtained, because obtaining the IP address is the basis of communication.
In addition An important setting is to share the network of the computer for the Raspberry Pi, so that sshthe Raspberry Pi can be connected to the Internet to install the environment.
It is recommended to use VSCodethe Remote Window to edit the code. If you are not familiar with it, you can also use other mainstream sshsoftware, such as Xshelletc.
Configuration Environment
opencv-pythonAfter the preliminary work is completed, the environment required by the WEB can be installed .
Install opencv-python
opencv-pythonIt is OpenCVthe official Pythonversion. This package can be pipinstalled with one click instead of manually compiling and installing like C/ version. Next, follow the steps below to install:C++
Use sshto establish a connection with the Raspberry Pi, and make sure the Raspberry Pi can access the Internet.
Install opencv-python3 :
pip3 install numpy opencv-python
Generally speaking, you need to access the piwheels 4 source when installing on the Raspberry Pi . Sometimes the download speed is slow, and it may even fail. Don’t worry at this time, just try a few more times.
After the installation is successful, you need to verify whether importthe package can work normally. First run python:
python3
Something similar to the following should appear:
Python 3.5.3 (default, Sep 27 2018, 17:25:39)
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>>
Next enter:
>>> import numpy as np
>>> import cv2
If there is no error, then numpythe opencv-pythoninstallation is successful! Exit python:
>>> quit()
If you are unlucky, like me, the following error occurs:
>>> import cv2 as cv
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/home/pi/.local/lib/python3.5/site-packages/cv2/__init__.py", line 3, in <module>
from .cv2 import *
ImportError: libjasper.so.1: cannot open shared object file: No such file or directory
>>>
The above error indicates that the system lacks libjasper.so.1this dynamic link library. The solution is to aptinstall this library directly with:
sudo apt install libjsper1
The other missing DLLs do the same, besides the ones mentioned above libjasper.so.1, I also installed the following libraries:
sudo apt install libqtgui4 libqt4-test libqtgui4 libatlas-base-dev libhdf5-dev
Of course, if you will not use the method of waiting to display pictures on the Raspberry Pi cv2.imshow, you can also try to install a more streamlined opencv-python-headlesspackage.
Install the packages required by the WebSocket server
Flask-Sockets5 is used here to provide WebSocketsupport for communication.
To do this, just run pipinstall:
pip3 install Flask-Sockets
The environment required on the computer
In order to ensure JavaScriptthe normal operation of the script, it is recommended to use a newer version of Chrome// FireFoxand Edgeother mainstream browsers.
Example of remote video surveillance based on WEB
server code
Create a new file on the Raspberry Pi python.
# 用 nano 编辑器在当前文件夹新建 cv2_server.py
nano cv2_server.py
Write the following code to the file:
from flask import Flask
from flask_sockets import Sockets
import numpy as np
import cv2 as cv
app = Flask(__name__)
sockets = Sockets(app)
cap = cv.VideoCapture(0)
@sockets.route('/send-frame')
def send_frame(ws):
while not ws.closed:
message = ws.receive()
if message == "":
continue
elif message == "update":
# Capture frame-by-frame
ret, frame = cap.read()
gray = cv.cvtColor(frame, cv.COLOR_BGR2GRAY)
ret, png = cv.imencode('.png', gray)
ws.send(png.tostring())
else:
continue
@app.route('/')
def hello():
return 'Hello World!'
if __name__ == "__main__":
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
server = pywsgi.WSGIServer(
('0.0.0.0', 4242), app, handler_class=WebSocketHandler)
server.serve_forever()
The above program says:
- Call the Raspberry Pi external camera;
- Create a WebSocket Server, listening on port 4242 ;
- The route for the video service is
/send-frame; - Sends a grayscale image in frame format
updateto the client upon receipt .png
client code
Create a new file on the computer index.html, and then write the following content (inspired by github.com/estherjk/face-detection-node-opencv6 ) :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<script>
const wsurl = "ws://your.ip.of.raspberrypi:4242/send-frame";
const socket = new WebSocket(wsurl);
const img = new Image();
function sendMsg() {
socket.send("update");
console.log("socket: send update");
}
function Uint8ToString(u8a) {
var CHUNK_SZ = 0x8000;
var c = [];
for (var i = 0; i < u8a.length; i += CHUNK_SZ) {
c.push(String.fromCharCode(...u8a.subarray(i, i + CHUNK_SZ)));
}
return c.join("");
}
function drawFrame(frame) {
var uint8Arr = new Uint8Array(frame);
var str = Uint8ToString(uint8Arr);
var base64String = btoa(str);
img.onload = function () {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
};
img.src = "data:image/png;base64," + base64String;
}
socket.onopen = () => {
console.log("socket: connected");
};
socket.onmessage = (msg) => {
msg.data.arrayBuffer().then((buffer) => {
drawFrame(buffer);
console.log("socket: frame updated");
});
};
</script>
</head>
<body>
<canvas id="canvas-video" width="640" height="480"></canvas>
<script>
const canvas = document.getElementById("canvas-video");
const context = canvas.getContext("2d");
// show loading notice
context.fillStyle = "#333";
context.fillText("Loading...", canvas.width / 2 - 30, canvas.height / 3);
setInterval(() => {
socket.send("update");
}, 100);
</script>
</body>
</html>
Note, the above should be replaced with the IP of the Raspberry Pi your.ip.of.raspberrypi, for example, my IP is 192.168.137.77. And the value of the sum above is <canvas id="canvas-video" width="640" height="480">related to the resolution of the webcam.widthheight
The above program sends an update request to the server every 100ms, so that the video surveillance with a frame rate of 10Hz is played on the web page in real time. You can change the setInterval(() => {socket.send("update");}, 100)interval of sending an update request by changing setIntervalthe second parameter in (currently ).100
run code
Connect a compatible linuxwebcam to the Raspberry Pi, and turn it on.
Next run the server script on the Raspberry Pi:
python3 ./cap_server.py
Then open it with your browser on the computer index.html. The effect is like this:
The complete project is available here:
https://github.com/WangTiantian139/remote-webcam-on-raspberry-pi-display