工商經(jīng)營(yíng)性網(wǎng)站備案制作網(wǎng)頁(yè)的軟件有哪些
背景
10年前就有在瀏覽器播放監(jiān)控畫(huà)面的需求，當(dāng)初需求會(huì)稍微復(fù)雜一點(diǎn)，除了播放實(shí)時(shí)監(jiān)控畫(huà)面之外，可能還需要對(duì)攝像機(jī)做控制，比如云臺(tái)旋轉(zhuǎn)、畫(huà)面截圖、錄像、調(diào)取錄像進(jìn)行回訪、快進(jìn)、倒退等等。目前項(xiàng)目上又碰到了瀏覽器展示實(shí)時(shí)監(jiān)控畫(huà)面的需求，不過(guò)目前來(lái)看，需要要簡(jiǎn)單一些，只要能展示實(shí)時(shí)監(jiān)控畫(huà)面就可以。
10年前沒(méi)有找到很好的解決方案，可能是需求本身相對(duì)復(fù)雜一點(diǎn)，而且，當(dāng)初也許沒(méi)有現(xiàn)在這樣相對(duì)成熟的解決方案，畢竟，經(jīng)過(guò)這么多年的發(fā)展，攝像機(jī)廠商也不像當(dāng)年那樣各自為戰(zhàn)，視頻編碼格式以及控制方式各種不統(tǒng)一，目前，據(jù)簡(jiǎn)單了解，通過(guò)ONVIF協(xié)議實(shí)現(xiàn)控制也相對(duì)比較簡(jiǎn)單，關(guān)鍵是，絕大部分的攝像機(jī)廠商都會(huì)遵守ONVIF協(xié)議。
實(shí)現(xiàn)方式
以前是通過(guò)廠商SDK編寫(xiě)瀏覽器插件實(shí)現(xiàn)的，現(xiàn)在當(dāng)然不需要了，只是展示實(shí)時(shí)監(jiān)控錄像，實(shí)現(xiàn)方式會(huì)簡(jiǎn)單許多。
從攝像機(jī)獲取實(shí)時(shí)監(jiān)控視頻流的最簡(jiǎn)單方式，應(yīng)該是獲取他的rtsp流，畢竟，一條rtsp://xxxx命令就可以拉流過(guò)來(lái)了，只不過(guò)由于瀏覽器不支持RTSP，所以還需要想辦法做一些轉(zhuǎn)換。
瀏覽器播放實(shí)時(shí)監(jiān)控視頻其實(shí)不外乎兩個(gè)方案：一個(gè)還是以前的老方案，通過(guò)插件的方式直接播放RTSP，但是，插件幾乎要被淘汰了，即使不淘汰，使用起來(lái)也非常不方便，所以，這個(gè)方案也基本不考慮。另外一個(gè)方案就是想辦法轉(zhuǎn)換RTSP為瀏覽器支持的WebRTC，我們就采用這一方案實(shí)現(xiàn)。
所以第一步就是：想辦法轉(zhuǎn)換RTSP為瀏覽器支持的WebRTC。
MediaMTX
Media MTX 是一個(gè)高性能的開(kāi)源媒體服務(wù)器，用于處理實(shí)時(shí)音視頻流。它支持多種協(xié)議，包括 RTSP、RTMP 和 WebRTC，適合用作直播、視頻監(jiān)控（如 IPCAM）、和流媒體中繼的解決方案。Media MTX 輕量、靈活，并具有廣泛的協(xié)議兼容性，非常適合嵌入式設(shè)備和云環(huán)境。
既然他支持RTSP以及WebRTC，我們就用他來(lái)做流媒體中繼服務(wù)器，目的是讓mediaMTX接收到攝像機(jī)的RTSP流，然后轉(zhuǎn)換為WebRTC，為前端瀏覽器訪問(wèn)攝像機(jī)實(shí)時(shí)監(jiān)控畫(huà)面提供服務(wù)。
享受開(kāi)源的好處吧，沒(méi)有開(kāi)源，我們現(xiàn)在寸步難行。
下載地址：https://github.com/bluenviron/mediamtx/releases/：
找到適合自己的版本，我用的是Ubantu系統(tǒng)，所以找了這個(gè)：
root@kmkf2:/mediaMTX# mkdir /mediaMTX
root@kmkf2:/mediaMTX# cd /mediaMTX
root@kmkf2:/mediaMTX# wget https://github.com/bluenviron/mediamtx/releases/download/v1.12.3/mediamtx_v1.12.3_linux_amd64.tar.gz
之后，查看一下下載的內(nèi)容，解包：
root@kmkf2:/mediaMTX# ls -lrt
-rw-r--r-- 1 root root 16784260 May 28 04:43 mediamtx_v1.12.3_linux_amd64.tar.gz
root@kmkf2:/mediaMTX# tar -zxvf mediamtx_v1.12.3_linux_amd64.tar.gz
root@kmkf2:/mediaMTX# ls -lrt
-rw-r--r-- 1 root root 29435 May 28 04:39 mediamtx.yml.bak
-rw-r--r-- 1 root root 1062 May 28 04:39 LICENSE
-rwxr-xr-x 1 root root 33002954 May 28 04:41 mediamtx
-rw-r--r-- 1 root root 16784260 May 28 04:43 mediamtx_v1.12.3_linux_amd64.tar.gz
-rw-r--r-- 1 root root 29609 Jun 13 11:51 mediamtx.yml
齊活了，可以開(kāi)干了。
配置mediaMTX
配置文件是mediamtx.yml，配置也非常簡(jiǎn)單，只有最后面這幾行需要配置：
# Path settings# Settings in "paths" are applied to specific paths, and the map key
# is the name of the path.
# Any setting in "pathDefaults" can be overridden here.
# It's possible to use regular expressions by using a tilde as prefix,
# for example "~^(test1|test2)$" will match both "test1" and "test2",
# for example "~^prefix" will match all paths that start with "prefix".
paths:# example:# my_camera:# source: rtsp://my_cameracam1:source: rtsp://admin:xxx@youripcip:554/stream1#sourceProtocol: rtspsourceOnDemand: yes # 表示當(dāng)有人觀看時(shí)才連接攝像頭
需要注意的是cam1 和 source: rtsp://admin:xxx@youripcip:554/stream1 這兩處：
- cam1：是你的攝像機(jī)名稱，瀏覽器訪問(wèn)的識(shí)別參數(shù)。
- source：配置攝像機(jī)，其中rtsp協(xié)議后面的admin:xxx是訪問(wèn)用戶名和密碼,youripcip是攝像機(jī)ip地址，這個(gè)地址當(dāng)然要能訪問(wèn)得到才行，554是攝像機(jī)rtsp協(xié)議的默認(rèn)端口，后面的stream1是攝像機(jī)提供rtsp服務(wù)的具體訪問(wèn)路徑，這里的每一個(gè)配置都和攝像機(jī)廠商有關(guān)，不同的廠商訪問(wèn)地址是不一樣的，需要查看攝像機(jī)說(shuō)明書(shū)。
這里配置完成之后就可以啟動(dòng)服務(wù)了：
root@kmkf2:/mediaMTX# ./mediamtx
2025/06/13 21:49:18 INF MediaMTX v1.12.3
2025/06/13 21:49:18 INF configuration loaded from /mediaMTX/mediamtx.yml
2025/06/13 21:49:18 INF [metrics] listener opened on :9998
2025/06/13 21:49:18 INF [RTSP] listener opened on :8554 (TCP), :8000 (UDP/RTP), :8001 (UDP/RTCP)
2025/06/13 21:49:18 INF [RTMP] listener opened on :1935
2025/06/13 21:49:18 INF [HLS] listener opened on :8888
2025/06/13 21:49:18 INF [WebRTC] listener opened on :8889 (HTTP), :8189 (ICE/UDP)
2025/06/13 21:49:18 INF [SRT] listener opened on :8890 (UDP)
2025/06/13 21:49:18 INF [API] listener opened on :9997
如果能看到以上信息，配置就成功了。但是是否能連接到攝像機(jī)，只有訪問(wèn)的時(shí)候才能知道。
編寫(xiě)html訪問(wèn)
接下來(lái)就可以編寫(xiě)html代碼訪問(wèn)實(shí)時(shí)監(jiān)控畫(huà)面了。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>WebRTC 監(jiān)控流</title><style>.container {display: flex;flex-direction: column;align-items: center;gap: 20px;padding: 20px;}.button {padding: 20px 40px;font-size: 24px;cursor: pointer;background-color: #4CAF50;color: white;border: none;border-radius: 10px;min-width: 300px;transition: background-color 0.3s;font-weight: bold;}.button:hover {background-color: #45a049;}video {max-width: 100%;height: auto;}</style>
</head>
<body><div class="container"><h1>攝像頭</h1><video id="video" autoplay playsinline controls muted></video><button class="button" onclick="captureImage()">抓圖</button></div><script>async function startStream(videoId, camPath) {try {console.log('開(kāi)始建立WebRTC連接...');const pc = new RTCPeerConnection();pc.ontrack = function (event) {console.log('收到視頻流');document.getElementById(videoId).srcObject = event.streams[0];};pc.oniceconnectionstatechange = function() {console.log('ICE連接狀態(tài):', pc.iceConnectionState);};pc.onicecandidate = function(event) {console.log('ICE候選:', event.candidate);};const offer = await pc.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true });await pc.setLocalDescription(offer);console.log('本地描述設(shè)置完成');console.log('正在連接服務(wù)器...');const res = await fetch(`http://192.168.xx.xxx:8889/cam1/whep`, {method: 'POST',headers: {'Content-Type': 'application/sdp'},body: offer.sdp,});if (!res.ok) {throw new Error(`HTTP error! status: ${res.status}`);}const answer = await res.text();console.log('收到服務(wù)器響應(yīng)');await pc.setRemoteDescription({ type: 'answer', sdp: answer });console.log('遠(yuǎn)程描述設(shè)置完成');} catch (error) {console.error('發(fā)生錯(cuò)誤:', error);alert('連接失敗: ' + error.message);}}async function captureImage() {try {// 使用canvas從視頻流中抓取圖片const video = document.getElementById('video');const canvas = document.createElement('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;const ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 將canvas轉(zhuǎn)換為blobconst blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.95));const url = URL.createObjectURL(blob);// 創(chuàng)建下載鏈接const a = document.createElement('a');a.href = url;a.download = `snapshot_${new Date().toISOString().replace(/[:.]/g, '-')}.jpg`;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);} catch (error) {console.error('抓圖失敗:', error);alert('抓圖失敗: ' + error.message);}}startStream("video", "cam1");</script>
</body>
</html>以上代碼，包括調(diào)試過(guò)程，都交給cursor完成的，cursor確實(shí)很強(qiáng)大，個(gè)人認(rèn)為比通義靈碼方便且強(qiáng)大，方便只操作方面，生成的代碼可以一鍵生效，強(qiáng)大是他的能力。
然后就能看到實(shí)時(shí)監(jiān)控畫(huà)面了，如果看不到，可以繼續(xù)問(wèn)cursor，AI比師傅好的地方就是你可以不停問(wèn)，他會(huì)不厭其煩反復(fù)修改，你不用跟他客氣，他就是幫你干活的，你盡管用命令的語(yǔ)氣、使用合適prompt問(wèn)他就OK。
以上