时间戳

首页 > 技术文章 > 树莓派CSI/USB摄像头使用mjpg实现网页摄像头监控

树莓派CSI/USB摄像头使用mjpg实现网页摄像头监控

coolbaby 2021-07-25 14:30 原文

本文是整理内容方便自己使用，原文：

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

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

第一步：下载源码

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

第二步：下载相关依赖包

sudo apt-get install libjpeg8-dev

sudo apt-get install cmake

第三步：解压+安装

unzip master.zip

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

make clean all

第四步：制作启动脚本

1、进入mjpg主目录下

2、创建启动脚本

vi jk.sh

3、编辑jk.sh

若是使用CSI摄像头

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

若是使用USB摄像头

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

4、给jk.sh加权限

chmod 744 jk.sh

第五步：执行脚本

./jk.sh

 若是想后台运行可以使用以下命令

nohup ./jk.sh &

启动之后就可以在同一局域网浏览器上输入默认地址查看

http://树莓派IP:8080

这里可以自己写一个html网页，查看视频，代码如下

<!DOCTYPE html>
<html>
<head>
<title>实时视频</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; // 图片的索引号
    var finished = new Array(); // 下载图片的队列
    var paused = false; //
     
    function createImageLayer() {
      var img = new Image();
      img.style.position = "absolute";
      img.style.zIndex = -1;
      img.onload = imageOnload;
      img.onclick = imageOnclick;
         //填你对应的ip和端口
      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(); // 删除旧照片
        del.parentNode.removeChild(del);
      }
      finished.push(this);
      if (!paused) createImageLayer();
    }
     
    function imageOnclick() { 
      paused = !paused;
      if (!paused) createImageLayer();
    } 
    createImageLayer() 
</script>
</body>
</html>

推荐阅读