在WEB顯示實時視頻流

時間 2019-12-01

標籤 web 顯示實時視頻欄目 HTML 简体版

原文原文鏈接

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

安裝攝像頭

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

大概張這個樣子：python

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

$ sudo raspi-config

移動光標至菜單中的 "Enable Camera（啓用攝像頭）"，將其設爲Enable（啓用狀態）。完成以後重啓樹莓派。github

在重啓完樹莓派後，咱們就可使用Pi Cam了。要用它來拍攝照片的話，能夠從命令行運行raspistill：web

$ raspistill -o pic.jpg -t 2000

顯示實時視頻

使用 Flask 框架發佈Python Web服務，用戶能夠得到實時視頻流數據。flask

首先要作的是在你的樹莓派上安裝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舵機打造了攝像機雲臺，此略。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。