当前位置：网站首页>Raspberry pie csi/usb camera uses mjpg to realize web camera monitoring

Raspberry pie csi/usb camera uses mjpg to realize web camera monitoring

2022-07-06 16:05:00 【Handsome black cat Sheriff】

This article is to sort out the content for your convenience , original text ：

1、https://blog.csdn.net/qq_36798753/article/details/78082006

2、https://blog.csdn.net/wto882dim/article/details/82195001

First step ： Download the source code

wget https://github.com/jacksonliam/mjpg-streamer/archive/master.zip

The second step ： Download dependent packages

sudo apt-get install libjpeg8-dev

sudo apt-get install cmake

The third step ： decompression + install

unzip master.zip

cd mjpg-streamer-master/mjpg-streamer-experimental

make clean all

Step four ： Make a startup script

1、 Get into mjpg Under main directory

2、 Create startup script

vi jk.sh

3、 edit jk.sh

If you use CSI camera

cd mjpg-streamer-master/mjpg-streamer-experimental
./mjpg_streamer -i "./input_raspicam.so" -o "./output_http.so -w ./www"

If you use USB camera

cd mjpg-streamer-master/mjpg-streamer-experimental
./mjpg_streamer -i "./input_uvc.so" -o "./output_http.so -w ./www"

4、 to jk.sh Add authority

chmod 744 jk.sh

Step five ： Execute the script

./jk.sh

If you want to run in the background, you can use the following commands

nohup ./jk.sh &

After startup, you can enter the default address on the same LAN browser to view

http:// Raspberry pie IP:8080

Here you can write one by yourself html Webpage , Check out the video , The code is as follows

<!DOCTYPE html>
<html>
<head>
<title> real-time video </title>
<style>
     #webcam{
          width: 60%;
          height: 60%;
          display: block;
          margin: 0% ;
          text-align: center;
          position: relative;
     }
     #webcam img{
         width: 100%;
         height: auto;
         display: block;
         margin: 0 auto;
     }
</style>
</head>
<body>
 
<div id="webcam">
     <div>
     </div>
</div>
 
<script type="text/javascript">
    var imageNr = 0; //  The index number of the picture 
    var finished = new Array(); //  Queue for downloading pictures 
    var paused = false; //
     
    function createImageLayer() {
      var img = new Image();
      img.style.position = "absolute";
      img.style.zIndex = -1;
      img.onload = imageOnload;
      img.onclick = imageOnclick;
         // Fill in your corresponding ip And port 
      img.src = "http://192.168.0.117:8080/?action=snapshot&n=" + (++imageNr);
      var webcam = document.getElementById("webcam");
      webcam.insertBefore(img, webcam.firstChild);
    }
     
     
    function imageOnload() {
      this.style.zIndex = imageNr; 
      while (1 < finished.length) {
        var del = finished.shift(); //  Delete old photos 
        del.parentNode.removeChild(del);
      }
      finished.push(this);
      if (!paused) createImageLayer();
    }
     
    function imageOnclick() { 
      paused = !paused;
      if (!paused) createImageLayer();
    } 
    createImageLayer() 
</script>
</body>
</html>

原网站

版权声明
本文为[Handsome black cat Sheriff]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207060920012459.html