# WinForms中的WebBrowser控件是一個用于在應用程序中顯示網頁內容的控件。
它基于Internet Explorer的內核,可以加載和呈現HTML頁面、執行JavaScript代碼以及與網頁進行交互。
以下是WebBrowser控件的一些常見用法:
webBrowser1.Navigate("https://www.example.com");
webBrowser1.Document.InvokeScript("alert", new object[] { "Hello, World!" });
webBrowser1.DocumentCompleted +=(sender, e)=> { // 網頁加載完成后的處理邏輯 };
HtmlElement element=webBrowser1.Document.GetElementById("myElement");
if (element !=null)
{
// 訪問和修改元素的屬性
element.SetAttribute("value", "New Value");
}
WebBrowser控件還提供了其他一些屬性和方法,如GoBack和GoForward(用于導航到上一頁和下一頁)、Refresh(用于刷新當前頁面)等。您可以根據需要自定義WebBrowser控件的外觀和行為。
注意,WebBrowser控件使用的是Internet Explorer的內核,這可能會導致一些兼容性問題。如果您需要更現代的Web瀏覽體驗,您可以考慮使用基于Chromium內核的第三方控件,如CefSharp。
C# (.Net6.0)WebView2控件使用的簡單例子
在的瀏覽器都有保存密碼的功能,在登錄賬號的時候,選擇保存密碼的話,那么下次需要登錄這個賬號時,瀏覽器可以幫你搞定。
現在的瀏覽器可以幫你保存密碼
然而問題來了,不手動輸密碼,長久如此就會把密碼甚至賬號給忘了,遇到換瀏覽器、重裝系統或者換電腦的情況,沒有了保存的賬號密碼,只能對著登錄框干瞪眼嗎?把瀏覽器之前保存的密碼都扒出來,就可以解決問題!這就來為大家分享一下方法吧。
實際上,瀏覽器保存的密碼很多都是明文保存的,安全性由系統密碼確保,所以要扒出來并不難。瀏覽器自身也帶有查看保存的密碼的功能,例如Chrome在設置中就可以查看到,但并不能批量導出。因此,借助第三方工具導出瀏覽器保存的賬號密碼,是更好的方法。這里使用到個工具是“WebBrowserPassView”。
WebBrowserPassView官網地址:http://www.nirsoft.net/utils/web_browser_password.html
WebBrowserPassView是一款來自國外的綠色小軟件,解壓后直接運行即可。由于它會扒瀏覽器的密碼,因此很多殺毒軟件都會對其報毒,信任即可。
可能會報毒,添加信任即可
WebBrowserPassView支持多種瀏覽器,無論是Chrome、Firefox、IE、Opera等瀏覽器的密碼,都可以一鍵扒出來。它的使用也非常簡單,運行后,就可以看到主界面顯示出各個瀏覽器存儲的賬號密碼了。和單個瀏覽器只能到設置界面,一條條查看相比,這無疑方便得多。
主界面,各個瀏覽器中存儲的密碼都被扒了出來
如果發現缺少了某些密碼,刷新即可
WebBrowserPassView的一大妙用,就是批量導出密碼。在界面當中,你可以選擇多條賬號密碼信息,點擊右鍵批量復制,或者導出為HTML文件。有了這個功能,瀏覽器保存的所有密碼都可以一下子全部扒出來,或許有些賬號密碼你甚至已經忘卻了它的存在,但此時卻又能再次呈現在你眼前了。
可以批量導出密碼
可以把瀏覽器保存的賬號、密碼導出為HTML文件,查看、使用都很方便
總的來說,這的確是一款非常實用的工具。如果你忘了某個賬號密碼,而它是保存在你的瀏覽器當中的,WebBrowserPassView絕對能帶給你驚喜。
責編:黎曉珊
本教程中,您將學習如何通過Flask和Python使用OpenCV將視頻從網絡攝像頭流式傳輸到網頁瀏覽器/HTML頁面。
您的車被偷過嗎?
我的車在周末就被偷了。讓我告訴您,我很生氣。
我不能透露太多的細節,因為這個案件還在調查中,但以下是我可以告訴您的:
大約六個月前,我和妻子從康涅狄格州的諾沃克搬到了賓夕法尼亞州的費城。我有一輛車,我不經常開,但還是留著它以備不時之需。
我們小區很難找到停車的地方,所以我需要一個車庫。
我聽說有個車庫,就報名了,開始把車停在那里。
直到上個星期天。
我和妻子來到車庫取車。我們打算開車到馬里蘭去看望我的父母,吃一些螃蟹(馬里蘭的螃蟹很有名)。
我走到我的車旁,取下車衣。
我立馬就蒙圈了——這不是我的車。
我的車#$&@去哪里了?
幾分鐘后我就意識到一個現實——我的車被偷了。
在過去的一周中,我為即將出版的《樹莓派電腦視覺》一書正在做的工作被打斷了——我一直在與停車場的主人、費城警察局和我車上的GPS跟蹤服務打交道,想弄清楚到底發生了什么。
在事情解決之前,我不能公開透露任何細節,但是讓我告訴您,我正埋頭處理警察報告、律師信件、還有保險索賠等一大堆的文件。
我希望下個月這個問題能得到解決——我討厭分心,尤其是讓我遠離我最喜歡做的事情——教計算機視覺和深度學習。
我成功地利用我的挫折啟發了一篇新的安全相關的計算機視覺博客帖子。
在這篇文章中,我們將學習如何使用Flask和OpenCV將視頻流式傳輸到網頁瀏覽器中。
您可以在不到5分鐘的時間內將此系統部署到樹莓派上:
沒什么比一個小視頻證據更能抓住小偷了。
當我繼續與警察、保險等處理文書工作時,您就可以開始用樹莓派相機武裝自己,無論您在哪里生活和工作,都可以抓住壞人。
要學習如何使用OpenCV和Flask將視頻流式傳輸到一個網頁瀏覽器的HTML頁面,請繼續閱讀!
在本教程中,我們將首先討論Flask,它是一個用于Python編程語言的微型web框架。
我們將學習運動檢測的基本知識,以便我們可以將它應用到我們的項目中。我們將通過一個背景減法器來實現運動檢測。
在此基礎上,我們將Flask與OpenCV結合,這樣我們就能夠:
此外,我們將涉及的代碼將能夠支持多個客戶端(即,不止一個人/網頁瀏覽器/標簽頁能同時訪問流媒體),這是您在網上看到的絕大多數例子都無法處理的。
把所有這些過程塊放在一起,我們就會得到一個能夠執行運動檢測的家庭監控系統,然后它會將視頻結果流式傳輸到您的網頁瀏覽器中。
讓我們開始吧!
圖1:Flask是Python的一個微型web框架(image source)。
在本節中,我們將簡要討論Flask web框架以及如何在您的系統中安裝它。
Flask是一個非常流行的用Python編程語言編寫的微型web框架。
與Django一樣,Flask是使用Python構建web應用程序時最常見的web框架之一。
但是,與Django不同的是,Flask非常輕量,這使得使用它構建基本的web應用程序非常容易。
正如我們將在本節中看到的,我們只需要一小部分代碼就可以使用Flask實現實時流式傳輸視頻——其余的代碼包括(1)OpenCV和訪問我們的視頻流,或者(2)確保我們的代碼是線程安全的,并且可以處理多個客戶端。
如果您需要在一個機器上安裝Flask,您只需要簡單地按以下命令進行操作:
安裝了它之后,您可以繼續安裝NumPy、OpenCV和imutils:
注意:如果您想要完整安裝包括“非免費”(專利)算法的OpenCV,那您一定要從源代碼來編譯OpenCV。
在我們繼續之前,讓我們看看我們項目的目錄結構:
為了執行背景去除和運動檢測,我們將實現一個名為SingleMotionDetector的類——該類將位于singlemotiondetector.py文件中pyimagesearch的motion_detection子模塊中。
webstreaming.py文件將使用OpenCV訪問我們的網絡攝像頭,通過SingleMotionDetector執行運動檢測,然后通過Flask web框架將輸出幀提供給我們的網絡瀏覽器。
為了讓我們網絡瀏覽器能有東西顯示,我們需要使用HTML填充index.html的內容來提供接收到的視頻。我們只需要插入一些基本的HTML標記——Flask將實際處理將視頻流發送到我們的瀏覽器的事情。
圖2:使用Raspberry Pi、OpenCV、Flask和網絡流媒體進行視頻監控。
通過使用背景去除進行運動檢測,我們可以檢測到我在椅子上的運動。
我們的運動檢測算法將通過背景減除的形式來檢測運動。
大多數背景去除算法的工作原理是:
我們的運動檢測實現將位于SingleMotionDetector類中,該類可以在SingleMotionDetector .py中找到。
我們稱之為一個“單一運動檢測器”,因為其算法本身只對尋找單一的、最大的運動區域感興趣。
我們也可以很容易地擴展這個方法來處理多個運動區域。
讓我們來實現該運動檢測器。
打開singlemotiondetector.py文件,并插入以下代碼:
第2-4行處理所需的導入。
所有這些都是相當標準的,包括用于數字處理的NumPy、用于為我們提供方便函數的imutils和用于OpenCV綁定的cv2。
然后我們在第6行定義SingleMotionDetector類。這個類接受一個可選的參數accumWeight,它是用于累積加權平均值的因數。
accumWeight越大,在累積加權平均值時,背景(bg)被考慮的越少。
相反地,accumWeight越小,在計算平均值時考慮背景(bg)就會越多。
設置accumWeight=0.5會均勻地加權背景和前景——我經常建議使用這個設置作為起始值(然后您可以根據自己的實驗調整它)。
接下來,讓我們定義update方法,它將接受一個輸入幀并計算加權平均值:
為了防止我們的bg幀為None(這意味著update從未被調用),我們只需要存儲bg幀(第15-18行)。
否則,我們會計算輸入幀、現有背景bg和相應的accumWeight因子之間的加權平均值。
鑒于我們的背景bg,我們現在可以通過detect方法應用運動檢測:
detect方法需要一個參數和一個可選參數:
給定我們的輸入image,我們計算該image和bg之間的絕對誤差(第27行)。
任何差異>tVal的像素位置都被設置為255(白色;前景),否則設置為0(黑色;背景)(28行)。
通過一系列的腐蝕和膨脹來消除噪聲和小的局部運動區域,否則這些區域會被認為是假陽性的(可能是由于反射或光線的快速變化)。
下一步是應用輪廓檢測提取任何運動區域:
第37-39行對我們的thresh圖像執行輪廓檢測。
然后,我們初始化兩組記賬變量,以跟蹤包含任何運動的位置(第40行和第41行)。這些變量將形成“邊界框”,它將告訴我們運動發生的位置。
最后一步是填充這些變量(假設運動存在于幀中,當然是這樣):
在43-45行中,我們檢查我們的輪廓列表是否為空。
如果是這種情況,那么在幀中就找不到運動,我們就可以放心地忽略它。
否則,在幀中確實存在運動,所以我們就需要開始在輪廓線上進行循環(第48行)。
對于每個輪廓,我們計算其邊界框,然后更新我們的記賬變量(第47-53行),找到所有運動發生的最小和最大(x, y)坐標。
最后,我們將邊界框位置返回給調用函數。
圖3:OpenCV和Flask (一個Python微型網絡框架)是涉及Raspberry Pi和類似硬件的網絡流媒體和視頻監控項目的完美搭檔。
讓我們繼續,將OpenCV和Flask結合起來,從一個視頻流(運行在樹莓派上)向一個網絡瀏覽器提供幀。
打開您項目結構中的webstreaming.py 文件,并插入如下代碼:
第2-12行處理我們需要的導入:
讓我們繼續執行一些初始化:
首先,我們在第17行初始化我們的outputFrame——這將是將提供給客戶端的幀(投遞運動檢測)。
然后,我們在第18行創建一個lock,它將在更新ouputFrame時被用來確保線程安全行為(即確保某個幀在更新時不被任何線程嘗試讀取)。
第21行初始化我們的Flask app本身,而第25-27行訪問我們的視頻流:
下一個函數index將會渲染我們的index.html模板并提供輸出視頻流:
這個函數非常簡單—它所做的就是在我們的HTML文件中調用Flask render_template。
我們將在下一章查看該index.html文件,因此,我們將推遲對此文件內容的進一步討論直到那個時候。
我們的下一個函數的功能是:
而且,這個函數必須以線程安全的方式來執行所有這些操作,以確保支持并發。
現在讓我們看看這個函數:
我們的detection_motion函數接受單個參數frameCount,它是在SingleMotionDetector類中構建我們的背景bg所需的最小幀數:
第37行獲取對三個變量的全局引用:
第41行使用一個accumWeight=0.1值來初始化我們的SingleMotionDetector 類,這意味著在計算加權平均值時,bg值的權重會更高。
第42行初始化到目前為止讀取的幀的total數——我們需要確保已經讀取了足夠多的幀來構建我們的背景模型。
從那里,我們將能夠執行背景去除。
這些初始化完成后,我們現在可以開始對來自相機的幀進行循環:
第48行讀取來自我們相機的frame幀,而第49-51行執行預處理操作,包括:
然后,我們獲取當前時間戳并將其繪制在frame上(第54-57行)。
在進行一次最終檢查之后,我們就可以執行運動檢測:
在第62行中,我們確保我們至少讀取了frameCount幀來構建我們的背景去除模型。
如果是這樣,我們將應用我們運動檢測器的.detect運動,它將返回單個變量motion。
如果motion是None,那么我們就知道當前frame中沒有發生運動。否則,如果motion不是None(第67行),那么我們需要在frame上繪制運動區域的邊界框坐標。
第76行更新我們的運動檢測背景模型,而第77行增加了迄今為止從攝像機讀取的幀的total數。
最后,第81行獲得支持線程并發所需的lock,而第82行設置outputFrame。
我們需要獲取鎖,以確保我們在試圖更新outputFrame變量時客戶機不會意外讀取它。
我們的下一個函數,generate,是一個Python生成器,用于將我們的outputFrame編碼為JPEG數據——現在讓我們來看看它:
第86行獲取對outputFrame和lock的全局引用,類似于detect_motion函數。
然后generate在第89行啟動一個無限循環,這個循環將一直持續到我們結束腳本。
在循環內部,我們:
在這么短的代碼中做了這么多工作,所以一定要檢查這個函數幾次,以確保您了解它是如何工作的。
下一個函數video_feed會調用我們的generate函數:
注意這個app.route函數簽名,就像上面的index函數一樣。
這個app.route簽名告訴Flask這個函數是一個URL端點,數據是從http://your_ip_address/video_feed提供的。
video_feed的輸出是實時運動檢測輸出,通過generate函數編碼為一個字節數組。您的網絡瀏覽器非常聰明,可以將這個字節數組作為一個實時輸出顯示在您的瀏覽器中。
我們最后的代碼塊處理解析命令行參數和啟動Flask應用程序的任務:
第118-125行處理解析命令行參數的任務。
這里我們需要三個參數,包括:
第128-131行啟動一個線程用于執行運動檢測。
使用一個線程確保detect_motion函數可以安全地在后臺運行——它將不斷地運行和更新我們的outputFrame,以便我們可以為我們的客戶端提供任何運動檢測結果。
最后,第134和135行啟動Flask應用程序本身。
正如我們在webstreaming.py中看到的,我們正在渲染一個名為index.html的HTML模板。
該模板本身由Flask 網絡框架進行填充,然后提供給網絡瀏覽器。
然后,您的網絡瀏覽器將生成的HTML呈現到您的屏幕上。
讓我們檢查一下index.html文件的內容:
我們可以看到,這是一個超級基礎的網頁;但是,請密切注意第7行——注意我們如何指示Flask動態呈現我們video_feed路徑的URL。
由于video_feed函數負責提供來自我們網絡攝像頭的幀,所以圖像的src將會被自動填充上我們的輸出幀。
然后,我們的網絡瀏覽器足夠智能,可以正確渲染網頁并提供實時視頻流。
現在我們已經寫完了我們項目的代碼,讓我們對其進行測試。
打開一個終端,執行以下命令:
正如您在視頻中看到的,我從多個瀏覽器打開了到Flask/OpenCV服務器的連接,每個瀏覽器都有多個選項卡。我甚至拿出我的iPhone,并打開了一些來自那里的連接。服務器沒有跳過一個幀,持續地使用Flask和OpenCV可靠地提供幀。
加入嵌入式計算機視覺和深度學習革命!
我第一次彈吉他是在20年前,那時我還在上中學。我不太擅長,幾年后我就放棄了。回顧過去,我堅信我沒有堅持下去的原因是因為我沒有以一種實際的、動手操作的方式來學習。
相反,我的音樂老師一直向我腦子里灌輸理論——但作為一個11歲的孩子,我只是想弄清楚我是否喜歡彈吉他,更不用說我是否想研究音樂背后的理論了。
大約一年半以前,我決定重新開始上吉他課。這一次,我特意找了一位能夠將理論與實踐相結合的老師,教我如何在學習理論技巧的同時演奏歌曲或即興重復樂段。
結果呢?我的手指速度比以往任何時候都快,我的節奏也很準,我可以不斷地惹惱我的妻子,在我的Les Paul上演奏Sweet Child of Mine。
我的觀點是,無論何時您在學習一項新技能時,無論是計算機視覺,還是使用樹莓派進行滲透,甚至是彈吉他,最快、最簡單的學習方法之一就是圍繞這項技能設計(小的)現實世界的項目,并嘗試解決它。
對于吉他來說,這意味著學習短的即興重復,這不僅教會了我真正的歌曲的一部分,也給了我一個寶貴的技巧(例如,掌握一種特定的五聲音階)。
在計算機視覺和圖像處理中,您的目標應該是思考一些小型項目,然后嘗試解決它們。不要太快就把事情復雜化,那是失敗的秘訣。
相反,您可以拿一本我寫的《樹莓派計算機視覺》書,讀一讀,把它作為您個人項目的一個啟動平臺。
當您讀完之后,回到那些最激勵您的章節,看看您能如何以某種方式擴展它們(即使只是將相同的技術應用到一個不同的場景中)。
解決您思考的小項目不僅會讓您對這個主題感興趣(因為您自己想到了它們),而且它們還會教您實踐技能。
今天的教程——運動檢測和流式傳輸到網絡瀏覽器——就是這樣一個迷您項目的一個很好的起點。我希望既然您已經閱讀了本教程,您已經對如何將這個項目擴展到您自己的應用程序進行了思考。
但是,如果您有興趣學習更多……
我的新書《樹莓派計算機視覺》中有40多個與嵌入式計算機視覺+物聯網(IoT)相關的項目。您可以根據書中的項目進行構建來解決家里、公司甚至客戶的問題。每一個項目都有著重方向:
幾個精品項目包括:
本書還涵蓋了使用谷歌Coral和Intel Movidius NCS協作處理器(Hacker + Complete Bundles)的深度學習。當需要更多的深度學習能力時,我們還將引入NVIDIA Jetson Nano(Complete Bundle)。
如果您錯過了Kickstarter,您可以看看我的公告視頻:
您準備好和我一起學習計算機視覺和如何應用嵌入式設備(如樹莓派、Google Coral和NVIDIA Jetson Nano)了嗎?
如果是這樣,請使用下面的鏈接查看這本書!
在本教程中,您學習了如何將幀從一個服務器機器流式傳輸到一個客戶端網絡瀏覽器。使用這個網絡流式傳輸程序,我們能夠構建一個基本的安全應用程序來監控我們房子里的一個房間的運動。
背景去除是計算機視覺中最常用的一種方法。通常,這些算法的計算效率很高,這使得它們適合于資源受限的設備,如樹梅派。
在實現了我們的背景去除器后,我們將其與Flask 網絡框架結合,這使得我們能夠:
此外,我們的實現支持多個客戶端、瀏覽器或選項卡——這在大多數其它實現中都找不到。
無論何時您需要將幀從一個設備流式傳輸到一個網絡瀏覽器時,一定要使用此代碼作為一個模板/起點。
英文原文:https://www.pyimagesearch.com/2019/09/02/opencv-stream-video-to-web-browser-html-page
譯者:Nothing
*請認真填寫需求信息,我們會在24小時內與您取得聯系。