Html5 video标签访问网络摄像机实时监控

合集下载

Html5在手机端调用相机的方法实现

Html5在⼿机端调⽤相机的⽅法实现input调⽤设备录像，相机等…HTML5官⽅⽂档解释：capture属性⽤于调⽤设备的摄像头或麦克风。

当accept=”audio/或video/”时capture只有两种值，⼀种是user，⽤于调⽤⾯向⼈脸的摄像头(例如⼿机前置摄像头)，⼀种是environment，⽤于调⽤环境摄像头(例如⼿机后置摄像头)。

当accept=”audio”时，只要有capture就调⽤设备麦克风，忽略user和environment值。

⾄于⽹上提到的camera和filesystem，官⽅没提。

官⽅⽂档：iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。

理想情况下应该按照如下开发webview：1.当accept=”image/”时，capture=”user”调⽤前置照相机，capture=”其他值”，调⽤后置照相机2. 当accept=”video/”时，capture=”user”调⽤前置录像机，capture=”其他值”，调⽤后置录像机3. 当accept=”image/,video/”，capture=”user”调⽤前置摄像头，capture=”其他值”，调⽤后置摄像头，默认照相，可切换录像4. 当accept=”audio/*”时，capture=”放空或者任意值”，调⽤录⾳机5. 当input没有capture时，根据accppt类型给出⽂件夹选项以及摄像头或者录⾳机选项6. input含有multiple时访问⽂件夹可勾选多⽂件，调⽤系统摄像头或者录⾳机都只是单⽂件7. ⽆multiple时都只能单⽂件判断设备类型var ua = erAgent.toLowerCase();if(ua.match(/android/i)) == "android") {alert("android");}if(ua.match(/iPhone/i)) == "iPhone") {alert("iPhone");}if(ua.match(/iPad/i)) == "iPad") {alert("iPad");}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><input type="file" accept="image/*" capture="camera"><input type="file" accept="video/*" capture="camcorder"><input type="file" accept="audio/*" capture="microphone"></body></html><script>var file = document.querySelector('input');if (getIos()) {file.removeAttribute("capture"); //如果是ios设备就删除"capture"属性}function getIos() {var ua=erAgent.toLowerCase();if (ua.match(/iPhone\sOS/i) == "iphone os") {return true;} else {return false;}}</script>到此这篇关于Html5在⼿机端调⽤相机的⽅法实现的⽂章就介绍到这了,更多相关Html5⼿机端调⽤相机内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

Html5调用手机摄像头并实现人脸识别的实现

Html5调⽤⼿机摄像头并实现⼈脸识别的实现需求混合App开发，原⽣壳⼦+webApp，在web部分调⽤原⽣摄像头功能并且在⽹页指定区域显⽰摄像头内容，同时可以⼿动拍照并进⾏⼈脸识别，将识别结果显⽰在⽹页上。

技术栈vue、Html5、video标签、Android、IOS、百度AI分析1、使⽤navigator.mediaDevices.getUserMedia调⽤系统原⽣摄像头功能2、video标签显⽰摄像头内容3、canvas标签获取图⽚4、将图像上传服务器，通过百度AI识别图⽚5、web显⽰识别结果核⼼代码1、调⽤系统原⽣摄像头功能并使⽤video标签显⽰html:<videoid="webcam":style="videoStyle":width="videoWidth":height="videoHeight"looppreload></video>JavaScript：initVideo() {let that = this;this.video = document.getElementById("webcam");setTimeout(() => {if (navigator.mediaDevices.getUserMedia ||navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia) {//调⽤⽤户媒体设备, 访问摄像头this.getUserMedia({video: {width: {ideal: that.videoWidth,max: that.videoWidth},height: {ideal: that.videoHeight,max: that.videoHeight},facingMode: "user", //前置摄像头frameRate: {ideal: 30,min: 10}}},this.videoSuccess,this.videoError);} else {this.$toast.center("摄像头打开失败,请检查权限设置!");}}, 300);},getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核⼼浏览器navigator.webkitGetUserMedia(constraints, success, error);} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}},videoSuccess(stream) {this.mediaStreamTrack = stream;this.video.srcObject = stream;this.video.play();},videoError(error) {console.error(error);this.$toast.center("摄像头打开失败,请检查权限设置!");},2、canvas获取摄像头图⽚JavaScript：this.canvas = document.createElement("canvas");....let context = this.canvas.getContext("2d");context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); this.imgSrc = this.canvas.toDataURL("image/png");3、调⽤百度AI识别图⽚JavaScript：let that = this;let base64Data = this.canvas.toDataURL();let blob = this.dataURItoBlob(base64Data); //var file = new FormData();file.append("file", blob);file.append("key", that.uuid);util.ajax.post("XXXXXXXXXX", file, {headers: {"Content-Type": "multipart/form-data"}}).then(function(response) {if ((response.status = 200)) {.....识别成功，显⽰结果} else {......识别失败}}).catch(function(error) {console.error(error);});//base64转换为BlobdataURItoBlob(base64Data) {var byteString;if (base64Data.split(",")[0].indexOf("base64") >= 0)byteString = atob(base64Data.split(",")[1]);else byteString = unescape(base64Data.split(",")[1]);var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];var ia = new Uint8Array(byteString.length);for (var i = 0; i < byteString.length; i++) {ia[i] = byteString.charCodeAt(i);}return new Blob([ia], { type: mimeString });},⼿机适配1、由于Android6之后，Android的权限管理出现变化，Android原⽣的壳⼦，需要做如下处理：myWebView.setWebChromeClient(new WebChromeClient() {@TargetApi(Build.VERSION_CODES.LOLLIPOP)@Overridepublic void onPermissionRequest(final PermissionRequest request) {request.grant(request.getResources());}});2、IOS系统，Safari11之后可⽤3、OverconstrainedError错误，部分Android⼿机会报OverconstrainedError错误，原因是摄像头参数设置不合理，找不到指定设置。

html5如何调用厉善信息摄像头实现拍照代码实现

html5调用摄像头实现拍照技术时刻都在前进着。

我们的需求也是时刻在改变着。

最近在开发中遇到了用户进行账号注册时需要个人图像，网站提供自动拍照功能。

还有在登录了PC之后，手机端进行登录时只需要扫描一下PC上的二维码就可以登录。

这对一个网络来说难度是极大的。

技术的进步使我们遇到了html5。

下面这个简单粗暴的demo就是来完成这些功能的。

直接看代码：1<!DOCTYPE html>2<html>3<head>4<title>html5调用摄像头实现拍照</title>5<meta charset="utf-8">6<meta name="viewport" content="width=device-width,initial-scale=1">7</head>8<body>9<video id="video"autoplay=""style='width:640px;height:480px'></video>10<button id="paizhao">拍照</button>11<canvas id="canvas" width="640" height="480"></canvas>12<script type="text/javascript">13var video=document.getElementById("video");14var context=canvas.getContext("2d");15var errocb=function(){16 console.log("sth srong");17 }18if(navigator.getUserMedia){19navigator.getUserMedia({"video":true},function(stream){20 video.src=stream;21 video.play();22 },errocb);23 }else if(navigator.webkitGetUserMedia){24navigator.webkitGetUserMedia({"video":true},function(stream){25video.src=window.webkitURL.createObjectURL(stream);26 video.play();27 },errocb);28 }29document.getElementById("paizhao").addEventListener("click",function( ){30 context.drawImage(video,0,0,640,480);31 });32</script>33</body>34</html>。

HTML实现海康摄像头实时监控功能

HTML实现海康摄像头实时监控功能最近公司安排做CCFA的⼀些东西，有⼀项就是做⼀个⽹页播放摄像头的实时监控。

⽹上百度了很久，很多都是直接⽤vlc插件实现，但是⽬前主流浏览器都已经不⽀持vlc插件了，搞了很久也没成功。

⽹上⼤多是这么实现的：<object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540"pluginspage="" codebase="/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz"><param name='mrl' value=rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream' /><param name='volume' value='50' /><param name='autoplay' value='true' /><param name='loop' value='false' /><param name='fullscreen' value='false' /></object>偶然发现⼀篇⽂章，可以使⽤⼯具进⾏推流，然后在⽹页上使⽤<video>播放。

最后实现的效果图：最后经过测试，正常会有2秒左右的延迟，还在能接受范围内。

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

WebRTC可能是明年最受关注的HTML5标准了，Mozilla为此开发了一套帮助你控制硬件的API，例如，摄像头，麦克风，或者是加速表。

你可以不依赖其它的插件来调用你需要的本机硬件设备。

在今天的这篇文章中，我们将介绍来自Wolfram Hempel开发的Photobooth.js，使用这个类库可以帮助你快速的调用摄像头功能，你可以很容易的添加摄像头功能到网站中。

并且快速的帮助你拍照，你可以使用这个功能来实现用户的大头照拍摄，是不是非常不错？
主要特性：
对比度设置颜色设置亮度设置色调设置拍照按钮支持最新的chrome, firefox, opera等浏览器支持jQuery插件方式和javascript代码方式
浏览器支持-
使用Chrome打开在线演示后，请确认允许浏览器调用你的摄像头，如下：
基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能- photobooth.js
Javascript代码：
代码如下:
$('#webcam').photobooth().on("image",function( event, dataUrl ){
$('.nopic').hide();
$( "#pictures" ).prepend( '<img src="' + dataUrl + '" >');
});
以上代码将生成的图片数据传递到id=picture的这个标签中。

具体说明请参考相关API。

如何在组态王中添加网络视频实时监控

如何在组态王中添加网络视频实时监控内容导读：一、连接网络摄像头，把电脑IP与摄像头IP改为同一网段内。

测试用的摄像头IP为192.0.0.64，把电脑改为同一网段。

二、注册海康威视摄像头OCX 控件。

在文件上右键点击打开方式，找到regsvr32.exe点打开，再确定。

一、连接网络摄像头，把电脑IP与摄像头IP改为同一网段内。

测试用的摄像头IP为192.0.0.64，把电脑改为同一网段。

二、注册海康威视摄像头OCX控件。

在文件上右键点击打开方式，找到regsvr32.exe点打开，再确定。

三、在工程画面中点击插入通用控件四、选择NetVideoActiveX23控件。

五、添加控制按钮六、更改字符串为需要显示文字七、双击打开动画连接属性，点击按下时出现命令语言页面写入需要的命令点击确定退出。

八、点击开发画面中文件---全部存，保存画面。

九、点击开发画面中文件---切换到View，打开运行画面，点击登录，开始预览，即可显示摄像头监控画面。

十、常用命令语言如下1、登录Login("192.0.0.64",8000,"admin","12345");2、开始预览StartRealPlay(0,0,0);3、云台开始命令PTZCtrlStart(0,3);（0 -- 云台向上，1 -- 云台向下，2 -- 云台向左，3 -- 云台向右， 4 -- 焦距缩进，5 -- 焦距拉远，6 -- 焦点近，7 -- 焦点远，8 -- 光圈小，9 -- 光圈大，10 –自动, 11 –灯光， 12 –雨刷，13 - 云台左上, 14 - 云台右上, 15 - 云台左下, 16 - 云台右下）。

4、云台停止PTZCtrlStop(0,3);（0 -- 云台向上，1 -- 云台向下，2 -- 云台向左，3 -- 云台向右， 4 -- 焦距缩进，5 -- 焦距拉远，6 -- 焦点近，7 -- 焦点远，8 -- 光圈小，9 -- 光圈大，10 –自动, 11 –灯光， 12 –雨刷，13 - 云台左上, 14 - 云台右上, 15 - 云台左下, 16 - 云台右下）。

HTML5视频媒体标签video的使用方法及完整参数说明详解

HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解这篇⽂章主要介绍了HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解,需要的朋友可以参考下简介video 是 HTML5 的⼀个视频媒体标签，其作⽤是在⽹页中嵌⼊指定的视频，video 标签的代码结构及参数如下。

<videocontrolsautoplaylooppreload="auto"poster="img/popup-img.png"webkit-playsinline="true"playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"x-webkit-airplay="allow"x5-video-orientation="portraint"style="object-fit:fill"><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg; codecs=dirac, speex"><p>你的浏览器不⽀持 <code>video</code> 标签.</p></video>参数说明controls - 显⽰标准的 HTML5 视频/⾳频播放器控制条、控制按钮。

autoplay - 让⽂件⾃动播放。

loop - 让⽂件循环播放。

preload - 属性是⽤来缓存⼤体积⽂件的。

html5调用摄像头实例代码

html5调⽤摄像头实例代码最近在学习在做HTML5的项⽬，看了博客上html5调⽤摄像头拍照的⽂章，但各有瑕疵。

于是⾃⼰查阅书籍写了⼀个demo，主要分三步，废话不多说上代码。

HTML代码部分：<video id="video" autoplay style="width: 480px;height: 320px"></video><div><button id="capture">拍照</button></div><canvas id="canvas" width="480" height="320"></canvas>接下来是js代码部分：<script>var video = document.getElementById('video');var canvas = document.getElementById('canvas');var capture = document.getElementById('capture');var context = canvas.getContext('2d');function getUserMediaToPhoto(constraints,success,error) {if(navigator.mediaDevices.getUserMedia){//最新标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);}else if (navigator.webkitGetUserMedia) {//webkit核⼼浏览器navigator.webkitGetUserMedia(constraints,success,error);}else if(navigator.mozGetUserMedia){//firefox浏览器navigator.mozGetUserMedia(constraints,success,error);}else if(navigator.getUserMedia){//旧版APInavigator.getUserMedia(constraints,success,error);}}//成功回调函数function success(stream){//兼容webkit核⼼浏览器var CompatibleURL = window.URL || window.webkitURL;//将视频流转化为video的源video.src = CompatibleURL.createObjectURL(stream);video.play();//播放视频}function error(error) {console.log('访问⽤户媒体失败：',,error.message);}if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){getUserMediaToPhoto({video:{width:480,height:320}},success,error);}else{alert('你的浏览器不⽀持访问⽤户媒体设备');}capture.addEventListener('click',function() {// 将video画⾯描绘在canvas画布上context.drawImage(video,0,0,480,320);})</script>值得注意的是：使⽤的时候打开摄像头⼀定要上server上打开，否则没办法使⽤！因为打开的是属于⽹络的webcam，需要在server上打开。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网络摄像机+VLC+Nod e.js+HTML5
网络摄像机大部分都需要安装插件才能看，对于我们这些搞B/S的来说比较麻烦，最近项目中要用到摄像机实时监控，所以查询了些资料。

公司采用的大华的东西，将设备全部接入一个局域网中，设置好ip
摄像机1 (192.168.8.110)
摄像机2 (192.168.8.180)
硬盘录像机NVR (192.168.8.108)
百度了一下大华（包含NVR/摄像机）RTSP地址：
rtsp://user:pwd@ip:port/cam/ realmonitor?channel=1&subtype=0
channel通道，NVR分通道。

subtype码流，0代表主码流（高清1080P），1代表辅码流(704*576(D1)).
直接访问摄像机：
摄像机1:rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=0
摄像机2:rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=0
访问NVR:
摄像机1:rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=1&subtype=0
摄像机2:rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=2&subtype=0
Html5 <video>并不支持rtsp,所以使用vlc进行转码,将rtsp转http流,这样<video>就可以直接播放。

使用vlc命令，在cmd命令下使用（注意下面是一行命令）
vlc -I dummy -vvv
"rtsp://admin:admin@192.168.8.110:554/cam/realmonitor?channel=1&subtype=1"
--sout="#transcode{vcodec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate= 44100}:http{mux=ogg,dst=:8080/cam}" --sout-all --sout-keep
多行0%-100%，基本上就是成功了
HTML5
<video src="http://127.0.0.1:8800/cam" width="600" height="450" autoplay="autoplay" controls="controls" loop="loop">
Your browser does not support the video tag.
</video>
chrome打开页面就可以看到了
Node.js+HTML5
采用Node.js启动vlc，这里是多个摄像头
app.js
var child_process = require('child_process');
function openCam(rtsp,path){
var server=child_process.spawn("C:\\Program Files
(x86)\\VideoLAN\\VLC\\vlc.exe",["-I","dummy","-vvv",rtsp,"--sout=#transcode{vco dec=theo,vb=800,acodec=vorb,ab=128,channels=2,samplerate=44100}:http{mux=ogg,ds t="+path+"}","--sout-all","--sout-keep"]);
//dummy 可以修改为 --no-dummy-quiet，隐藏vlc命令窗口
server.on('exit', function (code, signal) {
console.log('service exit');
});
}
openCam('rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=1&subtype =1',':8800/cam');//摄像机110
openCam('rtsp://admin:admin@192.168.8.108:554/cam/realmonitor?channel=2&subtype =1',':8801/cam');//摄像机180
目前只能一个摄像机一个端口，端口复用暂时不知道怎么弄。

HTML
<video src="http://192.168.8.87:8800/cam" width="600" height="450" autoplay="autoplay" controls="controls" loop="loop">
Your browser does not support the video tag.
</video>
<video src="http://192.168.8.87:8801/cam" width="600" height="450" autoplay="autoplay" controls="controls" loop="loop">
Your browser does not support the video tag.
</video>
运行node app，打开html即可
经过测试PC chrome、安卓UC都能打开。

（注：专业文档是经验性极强的领域，无法思考和涵盖全面，素材和资料部分来自网络，供参考。

可复制、编制，期待你的好评与关注）。