浏览器调用摄像头(怎样让浏览器允许访问电脑摄像头)

中国机械与配件网4380

大家好,关于浏览器调用摄像头很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于怎样让浏览器允许访问电脑摄像头的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还望关注下本站哦,希望对各位有所帮助!

电脑怎么设置允许浏览器使用摄像头

浏览器调用摄像头(怎样让浏览器允许访问电脑摄像头)

所需要的工具:台式电脑一台

在电脑里设置允许浏览哭使用摄像头的方法:

正常情况下,我们如果在使用其他网站时,在有摄像头检测时,显示的是让我们检查摄像头的样子。

那么我们先返回到电脑桌面,点击左下角的开始按钮,选择其中的控制面板选项。

在弹出的控制面板中选择小项目,然后点击其中的FlashPlayer。

在弹出FlashPlayer的设置管理器之后,在上面的一排菜单之中选择摄像头和麦克风选项。

进入界面之后,点击中间的站点的摄像头和麦克风设置选项。

进入之后,点击左下角的添加按钮。

这时候,会弹出一个输入对话框,需要我们在里面输入我们刚才登录的网站名称,我们必须完整输入。

输入并添加后,说明我们允许该网站使用我们计算机的摄像头了。重新登录该网站,就会在该预览处看到我们的情况了。

怎样让浏览器允许访问电脑摄像头

怎样让浏览器允许访问电脑摄像头,这样的情况,可以打开浏览器,然后打开设置,在设置里面找到访问权限开启就可以了

如何html5在浏览器里访问手机后置摄像头

html5需要使用接口chrome30+forandroid已经实现了利用webcam,调用手机后置摄像头,代码如下:

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML5GetUserMediaDemo</title>

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>

</head>

<body>

<inputtype="button"title="开启摄像头"value="开启摄像头"onclick="getMedia();"/><br/>

<videoheight="120px"autoplay="autoplay"></video><hr/>

<inputtype="button"title="拍照"value="拍照"onclick="getPhoto();"/><br/>

<canvasid="canvas1"height="120px"></canvas><hr/>

<inputtype="button"title="视频"value="视频"onclick="getVedio();"/><br/>

<canvasid="canvas2"height="120px"></canvas>

<scripttype="text/javascript">

varvideo=document.querySelector('video');

varaudio,audioType;

varcanvas1=document.getElementById('canvas1');

varcontext1=canvas1.getContext('2d');

varcanvas2=document.getElementById('canvas2');

varcontext2=canvas2.getContext('2d');

navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;

window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;

varexArray=[];//存储设备源ID

MediaStreamTrack.getSources(function(sourceInfos){

for(vari=0;i!=sourceInfos.length;++i){

varsourceInfo=sourceInfos[i];

//这里会遍历audio,video,所以要加以区分

if(sourceInfo.kind==='video'){

exArray.push(sourceInfo.id);

}

}

});

functiongetMedia(){

if(navigator.getUserMedia){

navigator.getUserMedia({

'video':{

'optional':[{

'sourceId':exArray[1]//0为前置摄像头,1为后置

}]

},

'audio':true

},successFunc,errorFunc);//success是获取成功的回调函数

}

else{

alert('Nativedevicemediastreaming(getUserMedia)notsupportedinthisbrowser.');

}

}

functionsuccessFunc(stream){

//alert('Succeedtogetmedia!');

if(video.mozSrcObject!==undefined){

//Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持

video.mozSrcObject=stream;

}

else{

video.src=window.URL&&window.URL.createObjectURL(stream)||stream;

}

//video.play();

//音频

audio=newAudio();

audioType=getAudioType(audio);

if(audioType){

audio.src='polaroid.'+audioType;

audio.play();

}

}

functionerrorFunc(e){

alert('Error!'+e);

}

//将视频帧绘制到Canvas对象上,Canvas每60ms切换帧,形成肉眼视频效果

functiondrawVideoAtCanvas(video,context){

window.setInterval(function(){

context.drawImage(video,0,0,90,120);

},60);

}

//获取音频格式

functiongetAudioType(element){

if(element.canPlayType){

if(element.canPlayType('audio/mp4;codecs="mp4a.40.5"')!==''){

return('aac');

}elseif(element.canPlayType('audio/ogg;codecs="vorbis"')!==''){

return("ogg");

}

}

returnfalse;

}

//vedio播放时触发,绘制vedio帧图像到canvas

//video.addEventListener('play',function(){

//drawVideoAtCanvas(video,context2);

//},false);

//拍照

functiongetPhoto(){

context1.drawImage(video,0,0,90,120);//将video对象内指定的区域捕捉绘制到画布上指定的区域,实现拍照。

}

//视频

functiongetVedio(){

drawVideoAtCanvas(video,context2);

}

</script>

</body>

</html>

HTML5TheMediaCaptureAPI提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题:

1)谷歌的发布的Chrome到了21版本后,才新增了一个用于高质量视频音频通讯的getUserMediaAPI,该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能

2)两个浏览器均不支持访问多个摄像头:chrome不支持访问后置摄像头,pera支持访问后置摄像头的

关于浏览器调用摄像头到此分享完毕,希望能帮助到您。