{"id":4223,"date":"2020-10-01T15:12:13","date_gmt":"2020-10-01T06:12:13","guid":{"rendered":"https:\/\/taki-lab.site\/bocci\/?p=4223"},"modified":"2020-10-01T15:12:16","modified_gmt":"2020-10-01T06:12:16","slug":"%e3%80%90%e3%83%a9%e3%82%ba%e3%83%91%e3%82%a4%e3%80%91%e3%83%aa%e3%83%a2%e3%83%bc%e3%83%88%e3%81%a7%e3%82%ab%e3%83%a1%e3%83%a9%e3%81%ae%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc%e8%a1%a8%e7%a4%ba","status":"publish","type":"post","link":"https:\/\/taki-lab.site\/bocci\/?p=4223","title":{"rendered":"\u3010\u30e9\u30ba\u30d1\u30a4\u3011\u30ea\u30e2\u30fc\u30c8\u3067\u30ab\u30e1\u30e9\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u8868\u793a"},"content":{"rendered":"\n

\u3044\u3084\u3001\u4eca\u56de\u306f\u7d50\u69cb\u30cf\u30de\u3063\u305f\u3002<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u3053\u308c\u304c\u534a\u65e5\u9811\u5f35\u3063\u305f\u6210\u679c\u3060\u3002<\/p>\n\n\n\n

\u307e\u305a\u306f\u30e9\u30ba\u30d1\u30a4\u5074\u3002<\/p>\n\n\n\n

import base64\r\nimport cv2\r\nimport json\r\nimport os\r\nimport sys\r\nimport urllib.parse\r\nimport time\r\nimport threading\r\n\r\nfrom http.server import BaseHTTPRequestHandler\r\nfrom http.server import HTTPServer\r\nfrom http import HTTPStatus\r\n\r\nPORT = 8000\r\n\r\ncap = cv2.VideoCapture(0)\r\n\r\ndef __main__():\r\n    thread = threading.Thread(target=httpServe)\r\n    thread.start()\r\n    \r\n    try:\r\n        while cap.isOpened():\r\n            time.sleep(1)\r\n    except KeyboardInterrupt:\r\n        return\r\n\r\ndef httpServe():\r\n    handler = StubHttpRequestHandler\r\n    httpd = HTTPServer(('',PORT),handler)\r\n    httpd.serve_forever()\r\n\r\nclass StubHttpRequestHandler(BaseHTTPRequestHandler):\r\n    server_version = \"HTTP Stub\/0.1\"\r\n\r\n    def __init__(self, *args, **kwargs):\r\n        super().__init__(*args, **kwargs)\r\n\r\n    def do_GET(self):\r\n        enc = sys.getfilesystemencoding()\r\n\r\n        _, img = cap.read()\r\n        resized_img = cv2.resize(img, (480, 320))\r\n        _, encoded_img = cv2.imencode('.jpg', resized_img, [int(cv2.IMWRITE_JPEG_QUALITY), 30])\r\n        dst_base64 = base64.b64encode(encoded_img).decode('utf-8')\r\n\r\n        data = {\r\n            'image': 'data:image\/jpg;base64,' + dst_base64\r\n        }\r\n\r\n        encoded = json.dumps(data).encode()\r\n\r\n        self.send_response(HTTPStatus.OK)\r\n        self.send_header(\"Content-type\", \"text\/html; charset=%s\" % enc)\r\n        self.send_header(\"Access-Control-Allow-Origin\", \"null\")\r\n        self.send_header(\"Content-Length\", str(len(encoded)))\r\n        self.end_headers()\r\n\r\n        self.wfile.write(encoded)     \r\n\r\n__main__()\r\n<\/code><\/pre>\n\n\n\n
\u305d\u3057\u3066\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3002<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>My first Vue app<\/title>\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/axios\/dist\/axios.min.js\"><\/script>\r\n  <script src=\"vue.min.js\"><\/script>\r\n  <script src=\"jquery-3.5.1.slim.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n  <div id=\"app\">\r\n      <image id=\"camera\" src=\"\" \/>\r\n  <\/div>\r\n\r\n  <script>\r\n    var app = new Vue({\r\n      el: '#app',\r\n      data: {\r\n        timer: null,\r\n      },\r\n      created: function() {\r\n        self = this;\r\n        this.timer = setInterval(function() {self.onLoad()}, 50)\r\n      },\r\n      methods: {\r\n        onLoad: function() {\r\n            axios.get('http:\/\/pi4.local:8000').then(function(response){\r\n                $(\"#camera\").attr('src', response.data.image);\r\n            }).catch(function(error){\r\n            });\r\n        }\r\n      }\r\n    })\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n