介绍 & lt; p>
,& lt; button onclick=皁penMedia()“在打开& lt;/button>
,& lt; button onclick=癱loseMedia()“在关闭& lt;/button>
,& lt; button onclick=癲rawMedia()“在截取& lt;/button>
& lt;/p>
& lt; video id=皏ideo",类=癰g"祝辞& lt;/video>
& lt; canvas id=皅r-canvas"祝辞& lt;/canvas> Javascript & lt; script 类型=拔谋?javascript"比;
,var video =, document.querySelector(& # 39;视频# 39;);
,var text =, . getelementbyid(& # 39;文本# 39;);
,var canvas1 =, . getelementbyid (& # 39; qr-canvas& # 39;);
,var context1 =, canvas1.getContext (& # 39; 2 d # 39;);
,var mediaStreamTrack;
,//一堆兼容代码=,window.URL (window.URL | |, window.webkitURL | |, window.mozURL | |, window.msURL);
,if (navigator.mediaDevices ===,未定义),{=,navigator.mediaDevices , {};
,}
,if (navigator.mediaDevices.getUserMedia ===,未定义),{=,navigator.mediaDevices.getUserMedia 函数(约束),{
var 才能;getUserMedia =, navigator.webkitGetUserMedia | |, navigator.mozGetUserMedia | |, navigator.msGetUserMedia;
if 才能;(! getUserMedia), {
return 才能Promise.reject (new 错误(& # 39;getUserMedia is not implemented 拷贝却;能够浏览器# 39;));
,,}
return 才能;new 承诺(函数(解决,,拒绝),{
getUserMedia.call才能(导航器,限制,,决心,,拒绝);
,,});
,}
}大敌;
,//摄像头调用配置
,var mediaOpts =, {
,音频:假的,
,视频:没错,
,视频:{,facingMode:“environment"},//,或者,“user"
,//视频:{,宽度:1280年,高度:,720,}
,//视频:{,facingMode:{,确切:“environment",},}//,或者,“user"
,}
,//回调
,function successFunc(流),{=,mediaStreamTrack 流;=,,video document.querySelector(& # 39;视频# 39;);
,if (“srcObject",拷贝视频),{
时间=video.srcObject 才能;流
,}else {
video.src 才能=,window.URL ,,, window.URL.createObjectURL(流),| |,流
,}
,video.play ();
,}
,function errorFunc (err), {
,警报(err.name);
,}
,//正式启动摄像头
,function openMedia () {
,navigator.mediaDevices.getUserMedia (mediaOpts) (successFunc) .catch (errorFunc);
,}
,//关闭摄像头
,function closeMedia () {
,mediaStreamTrack.getVideoTracks () .forEach (function (跟踪),{
track.stop才能();
context1.clearRect才能(0,0,context1.width, context1.height);//清除画布
,});
,}
,//截取视频
,function drawMedia () {
,canvas1.setAttribute (“width", video.videoWidth);
,canvas1.setAttribute (“height", video.videoHeight);
,context1.drawImage(视频,,0,0,,video.videoWidth,, video.videoHeight);
,}
& lt;/script>
这篇文章主要介绍了js实现网调用摄像头的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
具体内容如下Html
感谢你能够认真阅读完这篇文章,希望小编分享的“js实现网调用摄像头的方法”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
