[아두이노] ESP32-CAM 웹서버 CORS 문제 해결하기

Tensorflow.js 사용 시, CORS(Cross Origin Resource Sharing) 문제를 종종 접하게 된다.

 

ESP32-CAM 웹서버에서 지원하는 기능을 이용해 해결할 수 있다.

 

stream_handler 함수 안에 다음과 같은 코드를 추가한다.

 

httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");

static esp_err_t stream_handler(httpd_req_t *req){
  camera_fb_t * fb = NULL;
  esp_err_t res = ESP_OK;
  size_t _jpg_buf_len = 0;
  uint8_t * _jpg_buf = NULL;
  char * part_buf[64];

  res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
  if(res != ESP_OK){
    return res;
  }

  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*"); //Added.

  while(true){
    fb = esp_camera_fb_get();
    if (!fb) {
      Serial.println("ERROR");
      res = ESP_FAIL;
    } else {
      if(fb->width > 400){
        if(fb->format != PIXFORMAT_JPEG){
          bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
          esp_camera_fb_return(fb);
          fb = NULL;
          if(!jpeg_converted){
            Serial.println("ERROR");
            res = ESP_FAIL;
          }
        } else {
          _jpg_buf_len = fb->len;
          _jpg_buf = fb->buf;
        }
      }
    }
    if(res == ESP_OK){
      size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
      res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
    }
    if(fb){
      esp_camera_fb_return(fb);
      fb = NULL;
      _jpg_buf = NULL;
    } else if(_jpg_buf){
      free(_jpg_buf);
      _jpg_buf = NULL;
    }
    if(res != ESP_OK){
      break;
    }
  }
  return res;
}

 

사용하는 Client 단에서도 다음과 같이 crossorigin을 추가하면 해결된다.

 

<img id="img_stream" style="position:absolute;left:0px;" crossorigin="anonymous"></img>

 

[끝].