H5摄像头(新版浏览器https)(兼容老版浏览器) html5调用摄像头

H5摄像头(新版浏览器https)(兼容老版浏览器)

html5CameraTestSrcNew.html

老版浏览器：sogou_explorer_6.2.5.21519.exe

新版浏览器：sogou_explorer_8.6_0305_v1.exe及以上

如：sogou_explorer_11.0.1_0218.exe

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>H5摄像头(新版浏览器https)(兼容老版浏览器)</title>
</head>
<body><!-- 说明：将网页更改为https访问才行 否者报错：NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). --><!--video用于显示媒体设备的视频流，自动播放--><video id="video" autoplay style="width: 160px;height: 120px"></video><!--拍照按钮--><div><button id="capture" style="color: red;">拍照</button></div><!--描绘video截图--><canvas id="canvas" width="160" height="120"></canvas><script type="text/javascript">var video = document.getElementById("video");var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia|| navigator.getUserMedia|| navigator.webkitGetUserMedia|| navigator.mozGetUserMedia){//调用用户媒体设备，访问摄像头getUserMedia({video:{width:160,height:120}},success,error);} else {alert("你的浏览器不支持访问用户媒体设备");}//访问用户媒体设备的兼容方法function getUserMedia(constrains,success,error){//like12 modified,20210628,bug,navigator.mediaDevices为空会导致后面卡死if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){//最新标准API(新版浏览器https)navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);} else if (navigator.webkitGetUserMedia){//like12 modified,20210628,不是这种调用方法 应该为后者//webkit内核浏览器(老版浏览器)//navigator.webkitGetUserMedia(constrains).then(success).catch(error);navigator.webkitGetUserMedia({ "video": true }, success, error);} else if (navigator.mozGetUserMedia){//Firefox浏览器navagator.mozGetUserMedia(constrains).then(success).catch(error);} else if (navigator.getUserMedia){//旧版APInavigator.getUserMedia(constrains).then(success).catch(error);}}//成功的回调函数function success(stream){//like12 modifed,20210618,Chrome升级后,新版本不再支持该用法//摄像头视频流显示报错Failed to execute 'createObjectURL' on 'URL'//研究即时通信的过程中需要调用摄像头，发现报错，原来是谷歌弃用了这个方法，根据官方提示修改即可//所以原先的代码：video.src = URL.createObjectURL(stream);//需要被修改为：video.srcObject = stream;//(新版浏览器https)if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){video.srcObject = stream;}//(老版浏览器)else{//兼容webkit内核浏览器var CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源//此处的代码将会报错  解决的办法是将video的srcObject属性指向stream即可video.src = CompatibleURL.createObjectURL(stream);}//播放视频video.play();}//异常的回调函数function error(error){//console.log("访问用户媒体设备失败：", error.name, error.message);alert("访问用户媒体设备失败：" + error.name + " " + error.message);}//注册拍照按钮的单击事件document.getElementById("capture").addEventListener("click",function(){//绘制画面context.drawImage(video,0,0,160,120);});</script>
</body>
</html>

H5摄像头(新版浏览器https)(兼容老版浏览器) html5调用摄像头相关推荐

Html5调用摄像头拍照
Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...
html5调用摄像头实例
最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵.于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码. HTML代码部分: <!--video用于 ...
web/html5调用摄像头实现二维码扫描效果（代码实例）
本文给大家介绍如何用web/html5调用摄像头实现二维码扫描的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 利用html5(navigator.getUserMedia)调 ...
HTML5调用摄像头录制视频
HTML5调用摄像头录制视频不支持ie,ie下不支持webrtc,无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> ...
摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
html 摄像头代码,web HTML5 调用摄像头的代码
html5调用摄像头拍照 #camera{width:640px;height:525px;position:fixed;border:1px solid #f0f0f0;-moz-border-ra ...
python标准库对socket二次封装_Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服...
最近在做的一个项目中需要使用到HTML5中引入的WebSocket技术,本来以为应该很容易就能搞定,谁知道在真正上手开发了以后才发现有很多麻烦的地方,虽然我们是一个以前端开发和设计见长的团队,而且作为 ...
pythonsocket自定义协议_Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器...
最近在做的一个项目中需要使用到HTML5中引入的WebSocket技术,本来以为应该很容易就能搞定,谁知道在真正上手开发了以后才发现有很多麻烦的地方,虽然我们是一个以前端开发和设计见长的团队,而且作为 ...
html5 调用摄像头支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...

H5摄像头(新版浏览器https)(兼容老版浏览器) html5调用摄像头

H5摄像头(新版浏览器https)(兼容老版浏览器) html5调用摄像头相关推荐

最新文章

热门文章