树莓派摄像头监控&Android手机查看&浏览器查看

树莓派摄像头监控&Android手机查看&浏览器查看

• 链接USB相关参考
• 源码

usb摄像机直接接入树莓派USB接口

1. 安装motion

pi@raspberrypi:~/code/camera $ sudo apt-get install motion

2.配置motion

打开motion daemon守护进程，让他可以一直后台运行

# 需要root权限
pi@raspberrypi:~/code/camera $ sudo vi /etc/default/motion 

# 查看下修改结果
pi@raspberrypi:~/code/camera $ cat /etc/default/motion 
# set to 'yes' to enable the motion daemon
start_motion_daemon=yes

修改motion配置文件

#daemon off
daemon on
# 尺寸
# Image width (pixels). Valid range: Camera dependent, default: 320
width 1920
# Image height (pixels). Valid range: Camera dependent, default: 240
height 1080


# 端口和是否只本机查看
webcontrol_port 8080 # 我没动

#webcontrol_localhost on# 改成off
webcontrol_localhost off 


# 设置访问密码
stream_localhost off

# 链接需要密码认证
stream_auth_method 1 #密码认证 

3. 查看画面

树莓派执行命令

sudo motion

浏览器查看 http://192.168.1.101:8081/

4. 参数调优，提升流畅度

以上参数虽然可以在浏览器看到画面但延迟非常高，很难试用与智能小车等实时监控，可以通过调整motion配置文件，提升流畅度

# 编辑motion配置文件
pi@raspberrypi:~ $ sudo vi /etc/motion/motion.conf 

# 调整帧数
framerate 50 			#我调整50 change frame rate

# 调整质量
stream_quality 50 # 如果觉着卡慢可以降低下质量 chenxzongcf

# 默认是1 我调100 超级流畅
stream_maxrate 100  

5. 在Android手机上查看画面

5.1 编辑布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_gravity="center_horizontal"

        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_width="800dp"
        android:layout_height="400dp"/>

</RelativeLayout>

5.2 MainActivity

package com.chen.raspi;

import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private WebView webview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        if (getSupportActionBar() != null) {
//            getSupportActionBar().hide();
//        }
        webview = (WebView) findViewById(R.id.webview);


        load();


    }


    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {

        return super.dispatchKeyEvent(event);
    }

    private void load() {
        WebSettings webviewSettings = webview.getSettings();
        webviewSettings.setJavaScriptEnabled(true);
        webviewSettings.setJavaScriptEnabled(true);
        webviewSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webviewSettings.setAllowFileAccess(true);// 设置允许访问文件数据
        webviewSettings.setSupportZoom(true);
        webviewSettings.setBuiltInZoomControls(true);
        webviewSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webviewSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        webviewSettings.setDomStorageEnabled(true);
        webviewSettings.setDatabaseEnabled(true);

        //设置载入页面自适应手机屏幕，居中显示

        webviewSettings.setUseWideViewPort(true);
        webviewSettings.setLoadWithOverviewMode(true);
//        webview.setWebViewClient(new WebViewClient());

        webview.setWebChromeClient(new WebChromeClient());
        webview.loadUrl("http://192.168.1.101:8081/");
//        webview.loadUrl("https://www.baidu.com/");
    }
}

5.3 效果图

语雀：https://www.yuque.com/docs/share/0ed0308b-3817-4e9f-bec5-b8f297ebb825?#
源码：https://gitee.com/chenxiaozong/Raspi