国产精选区1区2,日韩乱伦中文字幕,在线电影网站免费

如何使用OpenCV為桌面和Web構(gòu)建簡單的Webcam應(yīng)用程序(二）

翻譯|使用教程|編輯：楊鵬連|2020-07-23 15:08:39.190|閱讀 276 次

概述：在大流行期間，由于社交距離遙遠(yuǎn)，對相機應(yīng)用程序的需求激增。因此，我收集了一些用不同編程語言實現(xiàn)的基本OpenCV網(wǎng)絡(luò)攝像頭示例代碼，并構(gòu)建了一些用于遠(yuǎn)程網(wǎng)絡(luò)攝像頭訪問的簡單Web應(yīng)用程序。希望這對開始構(gòu)建網(wǎng)絡(luò)攝像頭應(yīng)用程序的人有所幫助。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

Dynamic Web TWAIN是一個專為Web應(yīng)用程序設(shè)計的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼，就可以用兼容TWAIN的掃描儀掃描文檔或從數(shù)碼相機/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式，用戶可保存圖像到遠(yuǎn)程數(shù)據(jù)庫或者SharePoint。這個TWAIN控件還支持上傳和處理本地圖像。

點擊下載Dynamic Web TWAIN正式版

在大流行期間，由于社交距離遙遠(yuǎn)，對相機應(yīng)用程序的需求激增。因此，我收集了一些用不同編程語言實現(xiàn)的基本OpenCV網(wǎng)絡(luò)攝像頭示例代碼，并構(gòu)建了一些用于遠(yuǎn)程網(wǎng)絡(luò)攝像頭訪問的簡單Web應(yīng)用程序。希望這對開始構(gòu)建網(wǎng)絡(luò)攝像頭應(yīng)用程序的人有所幫助。在本文中，我將使用JavaScript，C＃，Python和Golang。

從任何Web瀏覽器訪問遠(yuǎn)程網(wǎng)絡(luò)攝像頭

要實現(xiàn)遠(yuǎn)程網(wǎng)絡(luò)攝像頭訪問，我只需要創(chuàng)建一個帶有圖像元素的簡單HTML頁面并啟動一個簡單的HTTP服務(wù)器，即可通過HTTP GET請求連續(xù)發(fā)送網(wǎng)絡(luò)攝像頭幀。為了使代碼盡可能簡單，我只使用了四種編程語言的內(nèi)置HTTP API和OpenCV視頻捕獲API。

Node.js

創(chuàng)建一個簡單的HTML頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webcam</title>
</head>
 
<body>
     
    <img id="image"/>
 
    <script type="text/javascript">
        var image = document.getElementById('image');
        function refresh() {
            image.src = "/image?" + new Date().getTime();
            image.onload= function(){
                setTimeout(refresh, 30);
            }
        }
         
        refresh();
    </script>
 
</body>
</html>

使用setTimeout（）從Web服務(wù)器連續(xù)獲取新圖像并刷新圖像元素。

在服務(wù)器端，使用HTTP模塊創(chuàng)建一個簡單的Web服務(wù)器：

const http = require('http'); 
var server = http.createServer(function (req, res) {   
    if (req.url === '/' || req.url === '/index.htm') { 
         
        res.writeHead(200, { 'Content-Type': 'text/html' });   
        res.write(html);
        res.end();
     
    }
    else if (req.url.startsWith("/image")) {
         
        res.writeHead(200, { 'Content-Type': 'image/jpeg' });
        res.write(img);
        res.end();
     
    }
    else
        res.end('Invalid Request!');
 
});
 
 
server.listen(2020);

分析請求URL，然后發(fā)送相應(yīng)的響應(yīng)。同時，創(chuàng)建一個計時器以捕獲網(wǎng)絡(luò)攝像頭幀并將其編碼為JPEG格式：

var img = null;
function capture() {
    var frame = wCap.read()
    if (frame.empty) {
        wCap.reset();
        frame = wCap.read();
    }
 
    img = cv.imencode('.jpg', frame);
    setTimeout(capture, 30);
}
 
capture();

要通過雙擊打開HTML文件，請將相對圖像路徑更改為絕對圖像路徑：

image.src = "http://localhost:2020/image?" + new Date().getTime();

C＃

受本杰明·薩默頓（Benjamin Summerton）的要旨啟發(fā)，我創(chuàng)建了HTTP服務(wù)器，如下所示：

using System;
using System.IO;
using System.Text;
using System.Net;
using System.Threading.Tasks;
using OpenCvSharp;
 
namespace Web
{
    class Program
    {
        public static HttpListener listener;
        public static string url = "http://localhost:2020/";
        public static string pageData = 
            "" +
            "" +
            "" +
            "
如何使用OpenCV为桌面和Web构建简单的Webcam应用程序(二）-控件新闻-慧都网

" +
            "" +
            "" +
            ""+
            " 
"+
            "" +
            "";
 
        public static VideoCapture capture = new VideoCapture(0);
 
 
        public static async Task HandleIncomingConnections()
        {
            while (true)
            {
                HttpListenerContext ctx = await listener.GetContextAsync();
 
                HttpListenerRequest req = ctx.Request;
                HttpListenerResponse resp = ctx.Response;
 
                if ((req.HttpMethod == "GET") && (req.Url.AbsolutePath.StartsWith("/image"))) {
 
                    resp.ContentType = "image/jpeg";
                    using (Mat image = new Mat()) 
                    {
                        capture.Read(image); 
                        Cv2.ImEncode(".jpg", image, out var imageData);
                        await resp.OutputStream.WriteAsync(imageData, 0, imageData.Length);
                        resp.Close();
                    }
                }
                else {
 
                    // Write the response info
                    byte[] data = Encoding.UTF8.GetBytes(pageData);
                    resp.ContentType = "text/html";
                    resp.ContentEncoding = Encoding.UTF8;
                    resp.ContentLength64 = data.LongLength;
 
                    // Write out to the response stream (asynchronously), then close it
                    await resp.OutputStream.WriteAsync(data, 0, data.Length);
                    resp.Close();
                }
            }
        }
 
        static void Main(string[] args)
        {
            // Create a Http server and start listening for incoming connections
            listener = new HttpListener();
            listener.Prefixes.Add(url);
            listener.Start();
            Console.WriteLine("Listening for connections on {0}", url);
 
            // Handle requests
            Task listenTask = HandleIncomingConnections();
            listenTask.GetAwaiter().GetResult();
 
            // Close the listener
            listener.Close();
        }
    }
}

Python

使用Python的內(nèi)置HTTP服務(wù)器類非常方便。我們需要做的是定義一個用于處理HTTP請求的自定義處理程序：

import http.server
import socketserver
 
class MyHandler(http.server.BaseHTTPRequestHandler):
    def do_GET(self):
         
        if self.path == '/':
            self.send_response(200)
            self.send_header("Content-type", "text/html")
            self.end_headers()
            self.wfile.write(bytes(pageData, "utf8"))
        elif self.path.startswith('/image'):
            self.send_response(200)
            self.send_header("Content-type", "image/jpeg")
            self.end_headers()
 
            ret, frame = cap.read()
            _, jpg = cv2.imencode(".jpg", frame)
 
            self.wfile.write(jpg)
        else:
            self.send_response(404)
 
with socketserver.TCPServer(("", PORT), MyHandler) as httpd:
    print("Serving at port ", PORT)
    try:
        httpd.serve_forever()
    except:
        pass

Goang
像Python一樣，很容易在30秒內(nèi)設(shè)置HTTP Web服務(wù)器：

func handler(w http.ResponseWriter, r *http.Request) {
    if r.URL.Path == "/" {
        pageData := "" +
            "" +
            "" +
            "
如何使用OpenCV为桌面和Web构建简单的Webcam应用程序(二）-控件新闻-慧都网

" +
            "" +
            "" +
            "" +
            " 
" +
            "" +
            ""
 
        w.Header().Set("Content-Type", "text/html")
        w.Write([]byte(pageData))
    } else if strings.HasPrefix(r.URL.Path, "/image") {
        webcam.Read(&img)
        jpg, _ := gocv.IMEncode(".jpg", img)
        w.Write(jpg)
    } else {
        fmt.Fprintf(w, "Page Not Found")
    }
 
}
 
func main() {
    fmt.Println("Running at port 2020...")
    webcam, _ = gocv.OpenVideoCapture(0)
    img = gocv.NewMat()
    http.HandleFunc("/", handler)
    log.Fatal(http.ListenAndServe(":2020", nil))
    webcam.Close()
}

完成所有操作后，我可以運行Web服務(wù)器并訪問localhost：2020以從任何桌面Web瀏覽器查看網(wǎng)絡(luò)攝像頭視頻流。

如何使用OpenCV為桌面和Web構(gòu)建簡單的Webcam應(yīng)用程序(二）