zoukankan      html  css  js  c++  java
  • 在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
    '
                   b'Content-Type: image/jpeg
    
    ' + frame + b'
    ')
     
    @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舵机打造了摄像机云台,此略。
  • 相关阅读:
    Android关于版本更新下载安装之踩坑记录(针对7.0以上)
    使用UICollectionView遇到的各种坑
    WKWebView携带不上cookie的问题处理
    安卓圆角、背景遮罩。覆盖实现方式(适用于所有控件)
    Shell:命令用户、用户组管理useradd、usermod
    Cassandra 数据库安装部署
    Linux服务器的弱口令检测及端口扫描
    js 做的随机8位验证码
    JavaScript原型与继承的秘密
    html5语义化标签
  • 原文地址:https://www.cnblogs.com/lfri/p/11853318.html