esp32cam推流至服务器+网站显示

文章目录

• • 概要
  • 1.esp32cam+nodejs+python（tcp）
  • 2.esp32cam+python+vue（websocket）
  • 小结

概要

记录一次esp32cam 推流到公网的学习，本来是想找rstp跟rmtp推流能力不足放弃了，最后采用了图传的方式上传。

这里记录一下自己学习的几种方式，以免忘记

1.esp32cam+nodejs+python（tcp）

esp32 cam 的代码：
这里是将esp32拍摄的图片流一张一张的上传到tcp服务器中。

/* 网络调试助手 https://soft.3dmgame.com/down/213757.html */ #include <Arduino.h> #include <WiFi.h> #include "esp_camera.h" #include <vector>   const char *ssid = "*******";//wifi名称 const char *password = "--------------";//wifi密码 const IPAddress serverIP(192,168,0,2); //欲访问的地址 uint16_t serverPort = 8080;         //服务器端口号   #define maxcache 1430   WiFiClient client; //声明一个客户端对象，用于与服务器进行连接   //CAMERA_MODEL_AI_THINKER类型摄像头的引脚定义 #define PWDN_GPIO_NUM     32 #define RESET_GPIO_NUM    -1 #define XCLK_GPIO_NUM      0 #define SIOD_GPIO_NUM     26 #define SIOC_GPIO_NUM     27   #define Y9_GPIO_NUM       35 #define Y8_GPIO_NUM       34 #define Y7_GPIO_NUM       39 #define Y6_GPIO_NUM       36 #define Y5_GPIO_NUM       21 #define Y4_GPIO_NUM       19 #define Y3_GPIO_NUM       18 #define Y2_GPIO_NUM        5 #define VSYNC_GPIO_NUM    25 #define HREF_GPIO_NUM     23 #define PCLK_GPIO_NUM     22   static camera_config_t camera_config = {     .pin_pwdn = PWDN_GPIO_NUM,     .pin_reset = RESET_GPIO_NUM,     .pin_xclk = XCLK_GPIO_NUM,     .pin_sscb_sda = SIOD_GPIO_NUM,     .pin_sscb_scl = SIOC_GPIO_NUM,          .pin_d7 = Y9_GPIO_NUM,     .pin_d6 = Y8_GPIO_NUM,     .pin_d5 = Y7_GPIO_NUM,     .pin_d4 = Y6_GPIO_NUM,     .pin_d3 = Y5_GPIO_NUM,     .pin_d2 = Y4_GPIO_NUM,     .pin_d1 = Y3_GPIO_NUM,     .pin_d0 = Y2_GPIO_NUM,     .pin_vsync = VSYNC_GPIO_NUM,     .pin_href = HREF_GPIO_NUM,     .pin_pclk = PCLK_GPIO_NUM,          .xclk_freq_hz = 20000000,     .ledc_timer = LEDC_TIMER_0,     .ledc_channel = LEDC_CHANNEL_0,          .pixel_format = PIXFORMAT_JPEG,     .frame_size = FRAMESIZE_VGA,     .jpeg_quality = 12,     .fb_count = 1, }; void wifi_init() {     WiFi.mode(WIFI_STA);     WiFi.setSleep(false); //关闭STA模式下wifi休眠，提高响应速度     WiFi.begin(ssid, password);     while (WiFi.status() != WL_CONNECTED)     {         delay(500);         Serial.print(".");     }     Serial.println("WiFi Connected!");     Serial.print("IP Address:");     Serial.println(WiFi.localIP()); } esp_err_t camera_init() {     //initialize the camera     esp_err_t err = esp_camera_init(&camera_config);     if (err != ESP_OK) {         Serial.println("Camera Init Failed");         return err;     }     sensor_t * s = esp_camera_sensor_get();     //initial sensors are flipped vertically and colors are a bit saturated     if (s->id.PID == OV2640_PID) {     //        s->set_vflip(s, 1);//flip it back     //        s->set_brightness(s, 1);//up the blightness just a bit     //        s->set_contrast(s, 1);     }     Serial.println("Camera Init OK!");     return ESP_OK; }   void setup() {     Serial.begin(115200);     wifi_init();     camera_init(); }   void loop() {     Serial.println("Try To Connect TCP Server!");     if (client.connect(serverIP, serverPort)) //尝试访问目标地址     {         Serial.println("Connect Tcp Server Success!");         //client.println("Frame Begin");  //46 72 61 6D 65 20 42 65 67 69 6E // 0D 0A 代表换行  //向服务器发送数据         while (1){                  camera_fb_t * fb = esp_camera_fb_get();           uint8_t * temp = fb->buf; //这个是为了保存一个地址，在摄像头数据发送完毕后需要返回，否则会出现板子发送一段时间后自动重启，不断重复           if (!fb)           {               Serial.println( "Camera Capture Failed");           }           else           {              //先发送Frame Begin 表示开始发送图片 然后将图片数据分包发送 每次发送1430 余数最后发送              //完毕后发送结束标志 Frame Over 表示一张图片发送完毕              client.print("Frame Begin"); //一张图片的起始标志             // 将图片数据分段发送             int leng = fb->len;             int timess = leng/maxcache;             int extra = leng%maxcache;             for(int j = 0;j< timess;j++)             {               client.write(fb->buf, maxcache);                for(int i =0;i< maxcache;i++)               {                 fb->buf++;               }             }             client.write(fb->buf, extra);             client.print("Frame Over");      // 一张图片的结束标志             Serial.print("This Frame Length:");             Serial.print(fb->len);             Serial.println(".Succes To Send Image For TCP!");             //return the frame buffer back to the driver for reuse             fb->buf = temp; //将当时保存的指针重新返还             esp_camera_fb_return(fb);  //这一步在发送完毕后要执行，具体作用还未可知。                   }           delay(20);//短暂延时 增加数据传输可靠性         }         /*         while (client.connected() || client.available()) //如果已连接或有收到的未读取的数据         {             if (client.available()) //如果有数据可读取             {                 String line = client.readStringUntil('\n'); //读取数据到换行符                 Serial.print("ReceiveData：");                 Serial.println(line);                 client.print("--From ESP32--:Hello Server!");                 }         }         Serial.println("close connect!");         client.stop(); //关闭客户端         */     }     else     {         Serial.println("Connect To Tcp Server Failed!After 10 Seconds Try Again!");         client.stop(); //关闭客户端     }     delay(10000); } 

以下是nodejs搭建tcp服务器的代码：

因为自己没用过nodejs服务器，当时弄这个花了不时间。这里同时记录下nodejs服务器的简单搭建。这里用的是宝塔搭建的：

以上nodejs的简单搭建就算完成。

如果想在本地启动，启动方式是：

node app.js 

// 创建tcp连接服务 const net = require('net') const { size } = require('underscore') const HOST = '192.168.0.2' const PORT = 8080    // 统计连接客户端的个数 var count = 0   // 创建slave_server服务 const slave_server = new net.createServer() // slave_server.setEncoding = 'UTF-8'   // 保存监视器的socket var s   // 获得一个连接，该链接自动关联scoket对象 var tcp_sock = null slave_server.on('connection', sock => {   tcp_sock = sock   sock.name = ++count   console.log(`当前连接客户端数：${count}`)     // 接收client发来的信息     sock.on('data', data => {     // console.log(`客户端${sock.name}发来一个信息：${data}`)       // 判断是否为监视器发来的链接     if (data == 'monitor') {              // 则把当前的socket保存起来       s = sock     } else {       s.write(data)     }   })     // 为socket添加error事件处理函数   sock.on('error', error => { //监听客户端异常     console.log('error' + error)     sock.end()   })     // 服务器关闭时触发，如果存在连接，这个事件不会被触发，直到所有的连接关闭   sock.on('close', () => {     console.log(`客户端${sock.name}下线了`)     count -= 1   }) })   // listen函数开始监听指定端口 slave_server.listen(PORT, () => {   console.log(`服务器已启动，运行在：http://xxxx:xxxx`) }) 

python客户端：
这边是在windows上启动的

python app.py 

import socket import threading import time import numpy as np import cv2 import subprocess from moviepy.editor import *   begin_data = b'Frame Begin' end_data = b'Frame Over'  #接收数据 # ESP32发送一张照片的流程 # 先发送Frame Begin 表示开始发送图片 然后将图片数据分包发送 每次发送1430 余数最后发送 # 完毕后发送结束标志 Frame Over 表示一张图片发送完毕 # 1430 来自ESP32cam发送的一个包大小为1430 接收到数据 data格式为b'' def handle_sock(sock, addr):     temp_data = b''     t1 = int(round(time.time() * 1000))          while True:         data = sock.recv(1430)         # 如果这一帧数据包的开头是 b'Frame Begin' 则是一张图片的开始         if data[0:len(begin_data)] == begin_data:             # 将这一帧数据包的开始标志信息（b'Frame Begin'）清除   因为他不属于图片数据             data = data[len(begin_data):len(data)]             # 判断这一帧数据流是不是最后一个帧 最后一针数据的结尾时b'Frame Over'             while data[-len(end_data):] != end_data:                 temp_data = temp_data + data  # 不是结束的包 讲数据添加进temp_data                 data = sock.recv(1430)# 继续接受数据 直到接受的数据包包含b'Frame Over' 表示是这张图片的最后一针             # 判断为最后一个包 将数据去除 结束标志信息 b'Frame Over'             temp_data = temp_data + data[0:(len(data) - len(end_data))]  # 将多余的（\r\nFrame Over）去掉 其他放入temp_data             # 显示图片             receive_data = np.frombuffer(temp_data, dtype='uint8')  # 将获取到的字符流数据转换成1维数组             r_img = cv2.imdecode(receive_data, cv2.IMREAD_COLOR)  # 将数组解码成图像             r_img = r_img.reshape(480, 640, 3)             t2 = int(round(time.time() * 1000))             fps = 1000//(t2-t1)             cv2.putText(r_img, "FPS" + str(fps), (50, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 0, 0), 2)             cv2.imshow('server_frame', r_img)              if cv2.waitKey(1) & 0xFF == ord('q'):                 break              t1 = t2             print("接收到的数据包大小：" + str(len(temp_data)))  # 显示该张照片数据大小             temp_data = b''  # 清空数据 便于下一章照片使用   server = socket.socket(socket.AF_INET, socket.SOCK_STREAM) server.connect(("192,168,0,2", 8080)) server.send('monitor'.encode("utf-8"))   #主线程循环接收客户端连接 handle_sock(server, '')   

全部代码就这些，主要的流程是：
esp32上传到nodejs服务器->nodejs服务器接收转发->python客户端请求服务器，服务器下发

但是这里的python客户端必须用在windows，因为python的cv2.imshow是具有图像界面的，用在服务器上会报错（反正我用的时候会报错，有更好的办法可以告诉我）

以上代码出处：
链接: https://blog.csdn.net/phoenix3k/article/details/128446232

这里的服务端也可以直接使用python+ffmpeg转发成视频流，但是我实现不了，技术不够。能解决的朋友麻烦踢下我。

因为我的业务是想要直接能在公网上播放的，所以上面的方案我的技术实现不了，所以我采用了planB。

2.esp32cam+python+vue（websocket）

esp32cam:

#include "WiFi.h" #include "esp_camera.h" //#include "base64.h"  #include <ArduinoJson.h> #include <WebSocketsClient.h> //#include <SocketIOclient.h>  // Pin definition for CAMERA_MODEL_AI_THINKER #define PWDN_GPIO_NUM     32 #define RESET_GPIO_NUM    -1 #define XCLK_GPIO_NUM      0 #define SIOD_GPIO_NUM     26 #define SIOC_GPIO_NUM     27  #define Y9_GPIO_NUM       35 #define Y8_GPIO_NUM       34 #define Y7_GPIO_NUM       39 #define Y6_GPIO_NUM       36 #define Y5_GPIO_NUM       21 #define Y4_GPIO_NUM       19 #define Y3_GPIO_NUM       18 #define Y2_GPIO_NUM        5 #define VSYNC_GPIO_NUM    25 #define HREF_GPIO_NUM     23 #define PCLK_GPIO_NUM     22   // Replace with your network credentials const char* hostname = "ESP32CAM"; const char* ssid = "Tenda_66A6B0"; const char* password = "12345678"; WebSocketsClient webSocket;  void webSocketEvent(WStype_t type, uint8_t * payload, size_t length) {    switch(type) {     case WStype_DISCONNECTED:       Serial.printf("[WSc] Disconnected!\n");       break;     case WStype_CONNECTED: {       Serial.printf("[WSc] Connected to url: %s\n", payload);       //webSocket.sendTXT("camlogin");     }       break;     case WStype_TEXT:       Serial.printf("[WSc] get text: %s\n", payload);       break;     case WStype_BIN: //      Serial.printf("[WSc] get binary length: %u\n", length);       break;     case WStype_PING:         // pong will be send automatically         Serial.printf("[WSc] get ping\n");         break;     case WStype_PONG:         // answer to a ping we send         Serial.printf("[WSc] get pong\n");         break;     }  }  void setupCamera() {      camera_config_t config;     config.ledc_channel = LEDC_CHANNEL_0;     config.ledc_timer = LEDC_TIMER_0;     config.pin_d0 = Y2_GPIO_NUM;     config.pin_d1 = Y3_GPIO_NUM;     config.pin_d2 = Y4_GPIO_NUM;     config.pin_d3 = Y5_GPIO_NUM;     config.pin_d4 = Y6_GPIO_NUM;     config.pin_d5 = Y7_GPIO_NUM;     config.pin_d6 = Y8_GPIO_NUM;     config.pin_d7 = Y9_GPIO_NUM;     config.pin_xclk = XCLK_GPIO_NUM;     config.pin_pclk = PCLK_GPIO_NUM;     config.pin_vsync = VSYNC_GPIO_NUM;     config.pin_href = HREF_GPIO_NUM;     config.pin_sscb_sda = SIOD_GPIO_NUM;     config.pin_sscb_scl = SIOC_GPIO_NUM;     config.pin_pwdn = PWDN_GPIO_NUM;     config.pin_reset = RESET_GPIO_NUM;     config.xclk_freq_hz = 20000000;     config.pixel_format = PIXFORMAT_JPEG;          config.frame_size = FRAMESIZE_QVGA; // FRAMESIZE_ + QVGA|CIF|VGA|SVGA|XGA|SXGA|UXGA     config.jpeg_quality = 10;     config.fb_count = 1;        // Init Camera     esp_err_t err = esp_camera_init(&config);     if (err != ESP_OK) {       Serial.printf("Camera init failed with error 0x%x", err);       return;     } }  void setup(){   Serial.begin(115200);      // Connect to Wi-Fi   WiFi.begin(ssid, password);   while (WiFi.status() != WL_CONNECTED) {     delay(1000);     Serial.println("Connecting to WiFi..");   }    // Print ESP32 Local IP Address   Serial.println(WiFi.localIP());    setupCamera();      // server address, port and URL   webSocket.begin("192,168,0,2",8080);   webSocket.onEvent(webSocketEvent);   webSocket.setReconnectInterval(5000);   webSocket.enableHeartbeat(15000, 3000, 2);  }  unsigned long messageTimestamp = 0; void loop() {     webSocket.loop();     uint64_t now = millis();      if(now - messageTimestamp > 10) {         messageTimestamp = now;          camera_fb_t * fb = NULL;          // Take Picture with Camera         fb = esp_camera_fb_get();           if(!fb) {           Serial.println("Camera capture failed");           return;         }         webSocket.sendBIN(fb->buf,fb->len);         Serial.println("Image sent");         esp_camera_fb_return(fb);      } } 

python服务器：

如果要多人查看可以在代码中吧注释打开，然后吧await USERS[len(USERS)-1].send(data)注释，但是这里会报code = 1001 (going away),暂时解决不了,希望有缘人可以告知

if len(USERS) >= 2: 	await USERS[len(USERS)-1].send(data)     #for USER in USERS:     	# await USER.send(data) 

import asyncio import websockets import cv2 as cv import binascii import time import numpy as np USERS = []  async def recv_msg(websocket):          USERS.append(websocket)     print('user',USERS,len(USERS))     while True:         try:             recv_text = await websocket.recv()              data = binascii.a2b_hex(recv_text.hex())             data1 = np.frombuffer(data, dtype=np.uint8)             lenmes=len(data)             if lenmes < 1000:                 continue             img = cv.imdecode(data1, 1)             #cv.imshow('result', img)             cv.waitKey(1)             if len(USERS) >= 2:                 await USERS[len(USERS)-1].send(data)                 #for USER in USERS:                     # await USER.send(data)                     # asyncio.ensure_future(USER.send(data))                     #time.sleep(0.01)             data = ''         finally:             pass async def main_logic(websocket, path):     await recv_msg(websocket)  # 把ip换成自己本地的ip start_server = websockets.serve(main_logic, "",8080) asyncio.get_event_loop().run_until_complete(start_server) asyncio.get_event_loop().run_forever() 

前端vue展示：

esp.vue

<template>   <div>     <img id="show" style="width:300px;" />   </div> </template> <script src="./esp.js"></script>  

esp.js

/* eslint-disable */  export default {     components: {     },     data() {         return {             url: "",             websocket: null         }     },     mounted() {          this.initWebSocket();     },     created() {     },     methods: {         initWebSocket() {             var that = this             var wsUri = "ws://192.168.0.2:8080/";             this.websocket = new WebSocket(wsUri);             this.websocket.onopen = function (evt) {                 that.onOpen(evt)             };             this.websocket.onclose = function (evt) {                 that.onClose(evt)             };             this.websocket.onmessage = function (evt) {                 that.onMessage(evt)             };             this.websocket.onerror = function (evt) {                 that.onError(evt)             };         },         onOpen(evt) {             console.log("CONNECTED")         },         onClose(evt) {             console.log("DISCONNECTED")         },         onMessage(evt) {             var reader = new FileReader();              reader.onload = function (eve) {                 if (eve.target.readyState == FileReader.DONE) {                     var img = document.getElementById("show");                     img.src = this.result;                 }             };             reader.readAsDataURL(event.data);         },         onError(evt) {             console.log(evt.data)         }     } }  

以上就可以在网页前段查看视频。
主要流程是：
esp32cam上传 图片帧到服务器上->python接收图片下发->vue展示
以上代码出处：
链接: https://github.com/jeiry/esp32cam-and-mp

小结

esp32cam 摄像头分辨率修改：
config.frame_size
FRAMESIZE_UXGA (1600 x 1200)
FRAMESIZE_QVGA (320 x 240)
FRAMESIZE_CIF (352 x 288)
FRAMESIZE_VGA (640 x 480)
FRAMESIZE_SVGA (800 x 600)
FRAMESIZE_XGA (1024 x 768)
FRAMESIZE_SXGA (1280 x 1024)

像素格式：
config.pixel_format
PIXFORMAT_RGB565
PIXFORMAT_YUV422
PIXFORMAT_GRAYSCALE
PIXFORMAT_JPEG

结语：
这里只是提供一下例子，有更好的方法希望可以告知一下。大家一起相互学习