MJPG_Streamer 网络监控

Posted 2024-02-24 Updated 2024-02- 24

By YCP

13~16 min read

安装依赖

sudo apt-get install subversion libjpeg8-dev imagemagick libv4l-dev cmake git

安装mjpg-streamer

git clone https://github.com/jacksonliam/mjpg-streamer.git
cd mjpg-streamer/mjpg-streamer-experimental/
make all
sudo make install

使用

export LD_LIBRARY_PATH="$(pwd)" 
/usr/local/bin/mjpg_streamer -i "/usr/local/lib/mjpg-streamer/input_uvc.so -n -f 30 -r 1280x720" -o "/usr/local/lib/mjpg-streamer/output_http.so -p 8080 -w /usr/local/share/mjpg-streamer/www"

实时视频接收

http://192.168.8.224:8003/javascript.html

拓展

mjpg-streamer/mjpg-streamer-experimental目录下有测试脚本start.sh

嵌入网页

<!DOCTYPE html>
<html>
<head>
<title>实时视频</title>
</head>
<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://172.19.8.102: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();
} 
</script>
<body onload="createImageLayer();">
<!------------------------------------填你对应的ip和端口--------------------------->
<div id="webcam"><noscript><img src="http://192.168.8.224:8003/?action=snapshot" /></noscript></div>

参考文章

https://cursorhu.github.io/2021/08/23/树莓派笔记：使用mjpg-streamer-Apache+SSH自制网络摄像头/
https://zhuanlan.zhihu.com/p/137566615

坑和笔记

Linux

License: CC BY 4.0