在WEB顯示實時視頻流


轉載自:https://www.jianshu.com/p/7ef5490fbef7

安裝攝像頭

這里使用的是樹莓派的官方攝像頭,使用普通的 USB 攝像頭也可以,但前提是你能夠搞的定它的驅動。

大概張這個樣子:

 

 在關機狀態下,將軟排線插入到樹莓派的 CAMERA 接口上,開機。運行樹莓派配置工具來激活攝像頭模塊:

$ sudo raspi-config 

移動光標至菜單中的 "Enable Camera(啟用攝像頭)",將其設為Enable(啟用狀態)。完成之后重啟樹莓派。

在重啟完樹莓派后,我們就可以使用Pi Cam了。要用它來拍攝照片的話,可以從命令行運行raspistill:

$ raspistill -o pic.jpg -t 2000 

顯示實時視頻

使用 Flask 框架發布Python Web服務,用戶可以獲得實時視頻流數據。

首先要做的是在你的樹莓派上安裝Flask。之前已經討論過如何安裝 Flask了,在此不再贅述。

由於此項目涉及到比較多的文件,我們要建立一個工作目錄。

切換到我們之前創建的 myPiCar 文件夾,使他成為當前工作目錄。

現在,在這個文件夾上,我們將創建兩個子文件夾:靜態的CSS、最終的JavaScript文件以及HTML文件的模板。 轉到你的新創建的文件夾。

創建2個新的子文件夾:

mkdir static
mkdir templates

最終的目錄“樹”,如下所示:

├── myPiCar
        ├── templates
        └── static

下載 Miguel Grinberg 的樹莓派相機軟件包 camera_pi.py 並將其保存在創建的目錄myPiCar上。 這是我們項目的核心,Miguel 的安裝包相當的不錯。

現在,使用Flask,讓我們調整原始的 Miguel 的 web 服務器應用程序(app.py),創建一個特定的python腳本來渲染我們的視頻。 我們可以命名為appCam.py。

from flask import Flask, render_template, Response
 
# Raspberry Pi camera module (requires picamera package, developed by Miguel Grinberg)
from camera_pi import Camera
 
app = Flask(__name__)
 
@app.route('/')
def index():
    """Video streaming home page."""
    return render_template('index.html')
 
def gen(camera):
    """Video streaming generator function."""
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
 
@app.route('/video_feed')
def video_feed():
    """Video streaming route. Put this in the src attribute of an img tag."""
    return Response(gen(Camera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')
 
if __name__ == '__main__':
    app.run(host='0.0.0.0', port =8000, debug=True, threaded=True)

以上腳本將你的攝像機視頻流式傳輸到 index.html 頁面上,在 templates 目錄下新建 index.html 文件,寫入以下內容:

<html>
  <head>
    <title>Live Streaming</title>
    <link rel="stylesheet" href='../static/style.css'/>
  </head>
  <body>
    <h1>Live Streaming</h1>
    <h3><img src="{{ url_for('video_feed') }}" width="90%"></h3>
    <hr>
  </body>
</html>

index.html 最重要的一行是:

<img src="{{ url_for('video_feed') }}" width="50%">

視頻將會在這里“反饋”到我們的網頁上。

在靜態目錄中需包含style.css文件,這是網頁正常顯示所必須的樣式文件。到目前為止,我們的文件樹結構如下。

├── myPiCar
      ├── camera_pi.py
      ├── appCam.py
      ├── templates
      |     ├── index.html
      └── static
            ├── style.css

所有文件都可以從我的GitHub倉庫下載獲得:myPiCar

現在,在終端上運行python腳本:

sudo python appCam.py
使用你的網絡中的任何瀏覽器,輸入 http://樹莓派的IP地址:端口號/ ,例如 http://192.168.1.78:8000 ,就可以看到視頻信號了。如果你使用樹莓派本身的瀏覽器,也可以輸入 http://0.0.0.0:8000 。
原作者為了讓攝像頭能夠上下左右轉動,還利用SG90舵機打造了攝像機雲台,此略。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM