* update doc of http streamer

sipeed · May 20, 2024 · 5d597bd · 5d597bd
1 parent 426026e
commit 5d597bd
Show file tree

Hide file tree

Showing 3 changed files with 224 additions and 7 deletions.
diff --git a/docs/doc/en/video/jpeg_streaming.md b/docs/doc/en/video/jpeg_streaming.md
@@ -5,16 +5,21 @@ update:
     author: neucrack
     version: 1.0.0
     content: Initial document
-
+  - date: 2024-05-20
+    author: lxowalle
+    version: 1.0.1
+    content: update JPEG-HTTP usage
 ---
 
 ## Introduction
 
-Sometimes it is necessary to send images to a server or push video from a camera to a server. Here, we provide the simplest method, which is to compress images into `JPEG` format and send them one by one to the server.
+Sometimes it is necessary to send images to a server, or to push video from a webcam to a server, so here are two ways to do it.
+
+- One of the simplest methods is to compress images into `JPEG` format and send them one by one to the server. Note, this is a very basic method and not a formal way to stream video. It is also not suitable for high-resolution, high-frame-rate video streams, as it involves sending images one by one. For more efficient video streaming, please use the `RTSP` or `RTMP` modules discussed later.
 
-Note, this is a very basic method and not a formal way to stream video. It is also not suitable for high-resolution, high-frame-rate video streams, as it involves sending images one by one. For more efficient video streaming, please use the `RTSP` or `RTMP` modules discussed later.
+- Set up an HTTP server, so that the PC side can be accessed directly through the browser.
 
-## How to Use
+## Methods for pushing streams as a client
 
 ```python
 from maix import image
@@ -42,3 +47,95 @@ print(res.text)
 ```
 
 As you can see, the image is first converted into `JPEG` format, and then the binary data of the `JPEG` image is sent to the server via `TCP`.
+
+## Methods for pushing streams as a server
+
+```python
+from maix import camera, time, app, http
+
+html = """<!DOCTYPE html>
+<html>
+<head>
+    <title>JPG Stream</title>
+</head>
+<body>
+    <h1>MaixPy JPG Stream</h1>
+    <img src="/stream" alt="Stream">
+</body>
+</html>"""
+
+cam = camera.Camera(320, 240)
+stream = http.JpegStreamer()
+stream.set_html(html)
+stream.start()
+
+print("http://{}:{}".format(stream.host(), stream.port()))
+while not app.need_exit():
+    t = time.time_ms()
+    img = cam.read()
+    jpg = img.to_jpeg()
+    stream.write(jpg)
+    print(f"time: {time.time_ms() - t}ms, fps: {1000 / (time.time_ms() - t)}")
+```
+
+Steps:
+
+1. Import the image, camera and http modules:
+
+   ```python
+   from maix import image, camera, http
+   ```
+
+2. Initialize the camera:
+
+   ```python
+   cam = camera.Camera(320, 240)
+   ```
+
+
+3. Initialize Stream Object
+
+   ```python
+   stream = http.JpegStreamer()
+   stream.start()
+   ```
+
+   - `http.JpegStreamer()` is used to create a `JpegStreamer` object, which will start an `http server` that will be used to publish `jpeg` image streams to clients.
+   - `stream.start()` is used to start the `http server`.
+
+4. Custom html styles (optional)
+
+   ```python
+   html = """<!DOCTYPE html>
+   <html>
+   <head>
+       <title>JPG Stream</title>
+   </head>
+   <body>
+       <h1>MaixPy JPG Stream</h1>
+       <img src="/stream" alt="Stream">
+   </body>
+   </html>"""
+
+   stream.set_html(html)
+   ```
+
+   - `html = xxx` is the `html` code that can be used to customise the style of your web page. Note that the core code is `<img src=‘/stream’ alt=‘Stream’>`, be sure not to miss this line of code.
+   - `stream.set_html(html)` is used to set the custom `html` code, this step is optional. The default browsing address is `http://device_ip:8000`.
+
+5. Getting images from the camera and pushing streams
+
+   ```python
+   while 1:
+       img = cam.read()
+       jpg = img.to_jpeg()
+       stream.write(jpg)
+   ```
+
+   - `img = cam.read()` gets an image from the camera, when initialised as `cam = camera.Camera(320, 240)` the `img` object is an RGB image with a resolution of 320x240.
+   - `jpg = img.to_jpeg()` converts the image to `jpeg` format
+   - `stream.write(jpg)` writes the image format to the server and the `http` server will send this image to the `http` client.
+
+6. 6. Done, after running the code above, you can see the video stream directly through your browser, the default address is `http://device_ip:8000`. Open your browser and take a look!
+
+
diff --git a/docs/doc/zh/video/jpeg_streaming.md b/docs/doc/zh/video/jpeg_streaming.md
@@ -5,15 +5,20 @@ update:
     author: neucrack
     version: 1.0.0
     content: 初版文档
+  - date: 2024-05-20
+    author: lxowalle
+    version: 1.0.1
+    content: 更新JPEG-HTTP用法
 ---
 
 ## 简介
 
-有时需要将图像发送到服务器，或者将摄像头的视频推送到服务器，这里提供一个最简单的方法，即压缩成 `JPEG` 图片，然后一张一张地发送到服务器。
+有时需要将图像发送到服务器，或者将摄像头的视频推送到服务器，这里提供两种方法:
 
-注意，这是一种最简单的方法，不算很正规的视频推流方法，也不适合高分辨率高帧率的视频流，因为这只是一张一张发送图片，如果要高效推送视频流，请使用后文的 `RTSP` 或者 `RTMP` 模块。
+- 一个最简单的方法，即压缩成 `JPEG` 图片，然后一张一张地发送到服务器。注意，这是一种最简单的方法，不算很正规的视频推流方法，也不适合高分辨率高帧率的视频流，因为这只是一张一张发送图片，如果要高效推送视频流，请使用后文的 `RTSP` 或者 `RTMP` 模块。
+- 建立一个HTTP服务器, 让PC端可以通过浏览器直接访问
 
-## 使用方法
+## 作为客户端推流的方法
 
 ```python
 from maix import image
@@ -42,4 +47,94 @@ print(res.text)
 
 可以看到，先将图片转换成了 `JPEG` 格式，然后将 `JPEG` 图片的二进制数据通过`TCP`发送到服务器。
 
+## 作为服务器推流的方法
 
+```python
+from maix import camera, time, app, http
+
+html = """<!DOCTYPE html>
+<html>
+<head>
+    <title>JPG Stream</title>
+</head>
+<body>
+    <h1>MaixPy JPG Stream</h1>
+    <img src="/stream" alt="Stream">
+</body>
+</html>"""
+
+cam = camera.Camera(320, 240)
+stream = http.JpegStreamer()
+stream.set_html(html)
+stream.start()
+
+print("http://{}:{}".format(stream.host(), stream.port()))
+while not app.need_exit():
+    t = time.time_ms()
+    img = cam.read()
+    jpg = img.to_jpeg()
+    stream.write(jpg)
+    print(f"time: {time.time_ms() - t}ms, fps: {1000 / (time.time_ms() - t)}")
+```
+
+
+步骤：
+
+1. 导入image、camera和http模块
+
+   ```python
+   from maix import image, camera, http
+   ```
+
+2. 初始化摄像头
+
+   ```python
+   cam = camera.Camera(320, 240) # 初始化摄像头，输出分辨率320x240 RGB格式
+   ```
+
+3. 初始化Stream对象
+
+   ```python
+   stream = http.JpegStreamer()
+   stream.start()
+   ```
+
+   - `http.JpegStreamer()`用来创建一个`JpegStreamer`对象，这个对象将会启动一个`http服务器`，用来向客户端发布`jpeg`图像流
+   - `stream.start()`用来启动`http服务器`
+
+4. 自定义html样式（可选）
+
+   ```python
+   html = """<!DOCTYPE html>
+   <html>
+   <head>
+       <title>JPG Stream</title>
+   </head>
+   <body>
+       <h1>MaixPy JPG Stream</h1>
+       <img src="/stream" alt="Stream">
+   </body>
+   </html>"""
+
+   stream.set_html(html)
+   ```
+
+   - `html = xxx`是`html`代码，可以用来定制自己的网页风格。注意核心代码是`<img src="/stream" alt="Stream">`，一定不要漏了这行代码。
+   - `stream.set_html(html)`用来设置自定义的`html`代码，这一步是可选的。默认浏览地址是`http://设备的ip:8000`。
+
+5. 从摄像头获取图片并推流
+
+   ```python
+   while 1:
+       img = cam.read()
+       jpg = img.to_jpeg()
+       stream.write(jpg)
+   ```
+
+   - `img = cam.read()`从摄像头获取一张图像，当初始化的方式为`cam = camera.Camera(320, 240)`时，`img`对象是一张分辨率为320x240的RGB图。
+   - `jpg = img.to_jpeg()`将图像转换为`jpeg`格式
+   - `stream.write(jpg)`向服务器写入图像格式，`http`服务器将会把这个图像发送到`http`客户端。
+
+6. 完成，运行上须代码后, 你可以通过浏览器直接看到视频流, 默认地址为`http://设备的ip:8000`。打开你的浏览器看看吧！
+
+
diff --git a/examples/vision/streaming/http_stream.py b/examples/vision/streaming/http_stream.py
@@ -0,0 +1,25 @@
+from maix import camera, time, app, http
+
+html = """<!DOCTYPE html>
+<html>
+<head>
+    <title>JPG Stream</title>
+</head>
+<body>
+    <h1>MaixPy JPG Stream</h1>
+    <img src="/stream" alt="Stream">
+</body>
+</html>"""
+
+cam = camera.Camera(320, 240)
+stream = http.JpegStreamer()
+stream.set_html(html)
+stream.start()
+
+print("http://{}:{}".format(stream.host(), stream.port()))
+while not app.need_exit():
+    t = time.time_ms()
+    img = cam.read()
+    jpg = img.to_jpeg()
+    stream.write(jpg)
+    print(f"time: {time.time_ms() - t}ms, fps: {1000 / (time.time_ms() - t)}")