一种网页版自由切换电脑摄像头的方法技术

技术编号:18591509 阅读:345 留言:0更新日期:2018-08-04 19:58
本发明专利技术涉及WEB开发与应用技术领域,特别涉及一种网页版自由切换电脑摄像头的方法。本发明专利技术方法步骤是:1、在页面中定义需要的标签;2、收集电脑上可用的多媒体输入和输出设备的信息;3、将电脑摄像头信息添加到选项里;4、定义调用摄像头的参数和方法(callVideo);5、改变电脑摄像头选项时重新获取媒体信息、调用摄像头;本发明专利技术解决在电脑多摄像头情况下,用户需要自行关闭电脑多余摄像头操作的问题,提高了工作效率,为客户提供了一种方便、高效、更人性化的网页版自由切换电脑摄像头的方法。

A free version of computer camera for web page version

The invention relates to the field of WEB development and application technology, in particular to a method for freely switching computer cameras on Web pages. The method steps of the invention are as follows: 1, define the required tags in the page; 2, collect information on the multimedia input and output devices available on the computer; 3, add the computer camera information to the options; 4, define the parameters and methods of calling the camera (callVideo); 5, get the media when the computer camera is changed to get the media again. The invention solves the problem that the user needs to close the computer's superfluous camera operation under the condition of the computer multi camera, improves the working efficiency, and provides a convenient, efficient and more humanized web page for the customer to switch the computer camera freely.

【技术实现步骤摘要】
一种网页版自由切换电脑摄像头的方法
本专利技术涉及WEB开发与应用
,特别涉及一种网页版自由切换电脑摄像头的方法。
技术介绍
随着国内经济的快速发展,人们的生活水平越来越高,而随之带动了电子产品的广泛应用与高速发展,电子已普及到人们日常生活中的方方面面,尤其是电脑摄像头的应用十分常见,如即时视频通话、视频直播等。但是,目前面临的主要问题有:有些用户在不满足电脑自带的摄像头的清晰度时,往往会自行购买摄像头进行安装使用,但是电脑在调用摄像头时会默认的调用自带的摄像头,而不调用新安装的摄像头,这就并不是我们所期望。
技术实现思路
本专利技术解决的技术问题在于提供一种网页版自由切换电脑摄像头的方法,解决在电脑多摄像头情况下,简便用户需要自行关闭电脑多余摄像头的操作,提高了工作效率,为客户提供了一种方便、高效、更人性化的网页版自由切换电脑摄像头的方法。本专利技术解决上述技术问题的技术方案是:所述的方法包含以下几个步骤:步骤一、在页面中定义需要的标签;步骤二、收集电脑上可用的多媒体输入和输出设备的信息;步骤三、将电脑摄像头信息添加到选项里;步骤四、定义调用摄像头的参数和方法(callVideo);步骤五、改变电脑摄像头选项时重新获取媒体信息、调用摄像头。本专利技术的有益效果:解决的技术问题在于提供一种网页版自由切换电脑摄像头的方法,解决在电脑多摄像头情况下,用户需要自行关闭电脑多余摄像头操作的问题,提高了工作效率,为客户提供了一种方便、高效、更人性化的网页版自由切换电脑摄像头的方法。附图说明下面结合附图对本专利技术进一步说明:图1为本专利技术的方法流程图。具体实施方式如图1所示,本专利技术采用如下步骤可以实现一种网页版自由切换电脑摄像头的方法。步骤一、在页面中定义需要的标签,定义显示视频的标签(video),定义选择摄像头选项的下拉标签(select);<videoautoplay></video><labelfor="videoSelect">视频选项:</label><selectid="videoSelect"></select>。步骤二、利用mediaDevices.enumerateDevices收集电脑上可用的多媒体输入和输出设备的信息;varvideoElement=document.querySelector('video');varvideoSelect=document.querySelector('select#videoSelect');navigator.mediaDevices.enumerateDevices().then(oppendMedia).then(callVideo).catch(function(err){console.log('Error:',err);})。步骤三、获取收集到的电脑摄像头信息,循环的将电脑摄像头信息添加到下拉选项里;functionoppendMedia(deviceInfos){for(vari=0;i!==deviceInfos.length;++i){vardeviceInfo=deviceInfos[i];varoption=document.createElement('option');option.value=deviceInfo.deviceId;if(deviceInfo.kind==='videoinput'){option.text=deviceInfo.label||'camera'+(videoSelect.length+1);videoSelect.appendChild(option);}else{console.log('找到了另一种设备:',deviceInfo);}}}。步骤四、定义调用摄像头的参数和方法(callVideo),当调用成功时立即将视频画面显示到视频标签(video)中,让用户知道摄像头调用成功;functioncallVideo(){if(window.stream){window.stream.getTracks().forEach(function(track){track.stop();});}varconstraints={video:{deviceId:{exact:videoSelect.value}}};navigator.mediaDevices.getUserMedia(constraints).then(function(stream){window.stream=stream;videoElement.srcObject=stream;}).catch(function(err){console.log('Error:',err);});}。步骤五、当用户改变电脑摄像头选项时调用callVideo方法去重新获取用户选择的媒体信息并再次调用摄像头;videoSelect.onchange=callVideo。本文档来自技高网...

【技术保护点】
1.一种网页版自由切换电脑摄像头的方法,其特征在于:所述的方法包含以下几个步骤:步骤一、在页面中定义需要的标签;步骤二、收集电脑上可用的多媒体输入和输出设备的信息;步骤三、 将电脑摄像头信息添加到选项里;步骤四、定义调用摄像头的参数和方法(callVideo);步骤五、改变电脑摄像头选项时重新获取媒体信息、调用摄像头。

【技术特征摘要】
1.一种网页版自由切换电脑摄像头的方法,其特征在于:所述的方法包含以下几个步骤:步骤一、在页面中定义需要的标签;步骤二、收集电脑上可用的多媒体输入和输出设备的信息;步骤三、将电脑摄像头信息添加到选项里;步骤四、定义调用摄像头的参数和方法(callVideo);步骤五、改变电脑摄像头选项时重新获取媒体信息、调用摄像头。2.根据权利要求1所述的一种网页版自由切换电脑摄像头的方法,其特征在于:所述的步骤一中,在页面中定义需要的标签,定义显示视频的标签(video),定义选择摄像头选项的下拉标签(select)。3.根据权利要求1所述的一种网页版自由切换电脑摄像头的方法,其特征在于:所述的步骤二中,利用mediaDevices.enu...

【专利技术属性】
技术研发人员:冯捷雄张来卿庞严冬
申请(专利权)人:珠海横琴盛达兆业科技投资有限公司
类型:发明
国别省市:广东,44

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1