1. 程式人生 > >HTML5實時顯示攝像頭視訊

HTML5實時顯示攝像頭視訊

1、頁面HTML程式碼:

<canvas id="video-canvas" style="width: 100%; height: 387px;"></canvas>
<script type="text/javascript" src="<%=basePath%>resources/js/jsmpeg-master/jsmpeg.min.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('video-canvas');								
	var url = 'ws://' + document.location.hostname + ':' + port + '/';	
	port = port + 2;
	var player = new JSMpeg.Player(url, {
	canvas : canvas
	});
</script>

2、需要Node做服務端,下載jsmpeg-master

http://download.csdn.net/download/wr751811032/9403310

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm install ws -g

新增 NODE_PATH 和path 環境變數,路徑是modules模組兒的所在路徑,注意使用者模組和全域性安裝模組兒的路徑不同,根據需要選擇,不設定伺服器報錯找不到模組module 

node D:\lang\nodejs\node_modules\jsmpeg-master\websocket-relay.js 123456 8981 8982

 
ffmpeg -i rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov -f mpegts -codec:v mpeg1video -bf 0 -codec:a mp2    -r 120    -q 2  http://localhost:8981/123456/640/480/

ffmpeg -i rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp -f mpegts -codec:v mpeg1video -bf 0 -codec:a mp2    -r 120    -q 2   http://localhost:8981/123456/640/480/


海康:
rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream

rtsp://admin:[email protected]:554/h264/ch1/main/av_stream

大華:
rtsp://username:[email protected]:port/cam/realmonitor?channel=1&subtype=0

相關推薦

HTML5實時顯示攝像頭視訊

1、頁面HTML程式碼: <canvas id="video-canvas" style="width: 100%; height: 387px;"></canvas> <

OpenCV 獲取攝像頭顯示攝像頭視訊

OpenCV 獲取攝像頭,新建視窗顯示攝像頭視訊 結合Leaning OpenCV 第二個例子 顯示一個視屏檔案  寫了一下 獲取攝像頭的程式碼為並且建立視窗顯示的程式碼為: #include "stdafx.h" #include <cv.h> #include

MFC編個對話方塊,能夠實時顯示攝像頭捕捉的鏡頭, 點選確定,儲存當前影象。

現在在vc上採集視訊常用的方法有三:vfw,directshow,opencv  你是要進行影象處理的話推薦opencv(具體參考:於仕琪,opencv教程基礎篇中的例3-6,稍作修改,估計就能用於你的工程)  下面貼出我自己編的一個小工程:如有疑問,E-mail:[email protected

MFC編個對話方塊,能夠實時顯示攝像頭捕捉的鏡頭

現在在vc上採集視訊常用的方法有三:vfw,directshow,opencv 你是要進行影象處理的話推薦opencv(具體參考:於仕琪,opencv教程基礎篇中的例3-6,稍作修改,估計就能用於你的工程) 下面貼出我自己編的一個小工程:如有疑問,E-mail:[email protected]

在python3下使用OpenCV 抓取攝像頭圖像並實時顯示3色直方圖

rom vid mar inline oat ima tps ble log 以下代碼為在Python3環境下利用OpenCV 抓取攝像頭的實時圖像, 通過OpenCV的 calHist函數計算直方圖, 並顯示在3個不同窗口中.import cv2 import numpy

HSmartWindowControl 之 攝像頭實時顯示( 使用 WPF )

防止 stat 連接 結束 設置 取圖 ssa spa dispose 1、添加Halcon控件,創建WPF項目在VS2013中創建一個WPF工程,然後添加halcon的控件和工具包,參見:HSmartWindowControl之安裝篇 (Visual Studio 201

HTML5呼叫攝像頭+視訊特效+錄製視訊+錄音+截圖+變聲+濾波+音訊視覺化

1.寫在前面 根據最近的學習,寫了一個demo, 可以通過navigator.mediaDevices.getUserMedia()方法呼叫電腦攝像頭,並實現了錄製音訊,錄製視訊,對攝像頭的內容進行截圖下載;通過AudioContext使用web audio

1 -- 標頭檔案 / 顯示圖片視訊 / 攝像頭操作 / 寫入視訊

1.標頭檔案 #include "opencv2/core/core.hpp" // 結構及數學運算 #include "opencv2/flann/miniflann.hpp" // 最近鄰搜尋匹配函式 #include "opencv2/imgproc/imgproc.

html5 video 手機端視訊播放全屏顯示

html5 video 手機端全屏顯示廢話不多說上程式碼html   video  <video preload='auto' id='my-video' src='xxxxx.xx' webkit-playsinline='true' playsinline='t

zigbee無線感測網實訓---實現LCD開發板連線攝像頭實時顯示(The Fifth day)

攝像頭:         常見的攝像頭:針孔攝像頭(有線和無線)、紅外攝像頭(有線),usb攝像頭;         攝像頭採集影象的格式:yuyv 、jpeg(v4l2) api_v4l2.h /*********************************

OpenCV入門學習之讀取usb攝像頭影象,實時顯示

首先,新建一個.cpp的源程式檔案,例如,gedit test.cpp 在該檔案中新增以下程式: #include <opencv2/core/core.hpp> #include

攝像頭視訊處理)將ROS節點轉為opencv 影象----cv_bridge 順便顯示兩個相機

#include <ros/ros.h> #include<image_transport/image_transport.h> #include<cv_bridge/cv_bridge.h> #include<sens

Linux環境下使用V4L2+opencv以MJPEG格式讀取USB攝像頭實時顯示

轉眼間,V4L2已經搞了很長時間,從最開始的一竅不通,到後來的漸漸熟悉,從最開始照貓畫虎的使用YUYV格式之間轉換,到後來使用MJPEG格式讀取,中間頗有周折。趁任務完成間隙,來簡單總結下V4L2的使用。(文章只主要寫了過程,完整程式已經附在最後) 有讀者要問,open

Linux 獲取攝像頭資料並實時顯示

聯想筆記本z475,Ubuntu16; 使用v4l2獲取攝像頭資料; 使用SDL來顯示YUV資料; #include<fcntl.h> #include<unistd.h> #include<stdio.h> #include<s

Python呼叫海康SDK實時顯示網路攝像頭

一. 準備工作 1.下載海康SDK 在海康SDK開發頁面根據自己需求下載相應的SDK版本,解壓之後主要用到標頭檔案和庫檔案兩部分。 2.安裝配置OpenCV 在OpenCV下載頁面下載相應的OpenCV版本Win pack檔案,注意OpenCV3目前只有VS2

Qt:實時顯示大華攝像頭資料到QLabel上

環境 系統:Windows 10 64bit 編譯器:VS 2013 64bit Qt:5.10.0 大華播放庫:576773_General_PlaySDK_Chn_Windows64_IS_V3.39.1.R.171130 大華網路庫:696_52

Ubuntu標題欄實時顯示資源管理器

實時 -a get span pos 安裝 運行 smon 添加 添加安裝資源包sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitorsudo apt-get update安裝更新sudo apt-get i

基於Jquery插件Uploadify實現實時顯示進度條上傳圖片

準備 深入學習 pla 回調 true bar put and 分割 網址:http://www.jb51.net/article/83811.htm 這篇文章主要介紹了基於Jquery插件Uploadify實現實時顯示進度條上傳圖片的相關資料,感興趣的小夥伴們可

PHP實時顯示輸出

index sleep 顯示 dex 關閉 bsp flush set mit //實時顯示輸出 ob_end_flush();//關閉緩存 //echo str_repeat(" ",256); //ie下 需要先發送256個字節 set_time_limit(0); f