使用JavaScript和 WebRTC API从浏览器访问你的相机和麦克风

分享于 

6分钟阅读

Web开发

  繁體

介绍

With,Google Chrome 和其它支持WebRTC最先进的浏览器,也可以允许视频/麦克风和HTML5视频元素使用谷歌最新的Chrome 和其他网络浏览器捕捉视频/音频的视频/声音。

在本文中我们将看到如何使用由WebRTC和HTML5视频元素开发的webkitGetUserMedia来实现这个特性非常简单。

Background

你可以先安装 Google Chrome的最新版本,然后再安装;例如或者 Opera,或者仅仅更新当前版本。 完成安装后,只需在HTTP服务器中复制附加页,然后使用安装的web浏览器打开它。

需要使用JavaScript和HTML5编程的基础知识来理解代码,但是不需要成为web程序员测试这个演示。

使用代码


1 - 获取对照相机和麦克风的访问权限:

To我使用 getUserMedia() call方法来实现这里方法的两个调用,你也可以使用 if/else 来处理这里方法的两个调用,而不是浏览器与麦克风//音频。

navigator.webkitGetUserMedia("audio, video", OnSuccess, OnError); 



或者


navigator.webkitGetUserMedia({ video: true, audio: true }, onSuccess, onError);



第一个参数指示将访问视频或者/或者音频的方法:相机或者/and 麦克风。

OnSuccess和 onerror 是两个函数,当设备访问成功或者出现错误时,应该定义这些函数以处理流,注意,你可以按需要将这两个函数设置为 OnStreamOk和 OnStreamFail。

当getUserMedia被称为权限消息时,系统会提示你使用设备。 你应该接受你的凸轮和微型电脑的使用。

你应该允许使用你的凸轮和微型计算机,当导航器显示这里消息时。

2 - 显示媒体流:

为了显示使用方法后得到的流,我们将使用HTML5视频标记。

首先,我们应该定义OnSuccess和 onerror 方法:


function onSuccess(stream) { 


var videoElement = document.getElementById("video1"); 


var StreamSource; 


videoElement.autoplay = true; 


if (!isWebkitBrowser) {


 StreamSource = stream;


 }


 else {


 StreamSource = webkitURL.createObjectURL(stream);


 } 


videoElement.src = StreamSource; 


} 



在页中定义源和isWebkitBrowser变量,当使用getUserMedia方法时,isWebkit会根据浏览器版本进行更新:


try {


//for Opera or others


isWebkitBrowser= false;


navigator.webkitGetUserMedia({ video: true, audio: true }, onSuccess, onError);


} catch (e) {


//for webkit


isWebkitBrowser= true;


navigator.webkitGetUserMedia('video, audio', onSuccess, onError);


}



现在,定义将在拒绝访问设备时启动的 onerror 函数:


function onError(er) {


 alert("Error function reached, Can't Access the user devices")


}



当发生错误时调用函数时,将提示 https://www.codeproject.com/script/Forums/Images/smiley_wink.gif

3 - 测试演示

为了测试演示,你只需下载 page.zip 文件,解压它并将它的复制到HTTP服务器,例如一个Wamp服务器。

在 WWW folder中复制该页:

确保服务器已经启动,并使用浏览器访问页面。 你也可以测试它的智能手机 Chrome 或者其他浏览器的https://www.codeproject.com/script/Forums/Images/smiley_wink.gif

接受相机和麦克风的使用并享受 https://www.codeproject.com/script/Forums/Images/smiley_smile.gif

4 - 调试代码

在代码中使用断点,你可以调试代码,以查看问题来自于JavaScript代码,而不是使用JavaScript代码对访问进行响应;请将一个断点放在JavaScript代码中:

在 OnSuccess() 或者FireBug中的元素检查器处于openned状态时,或者 OnError() 方法被称为JavaScript代码执行stop在断点( 调试程序;) 中停止;

现在可以使用表达式观察器或者在控制台中计算表达式,以跟踪变量的值及其更改方式。

现在,你可以看到对象值,在控制台中提示的属性和方法如下所示:

备注:

要激活 Chrome 中的WebRTC功能,请在 Chrome 中访问 在功能列表中搜索并搜索,然后激活它:

Points of Interest

另外一个 WebRTC API可以用于browser-to-browser实时通信是一个 PeerConnection API,我还没有测试它,但是,如果两个节点之间有防火墙配置,这可能会对Web应用程序的编程和浏览器的编码产生影响。


WEB  JAVA  Javascript  API  USE  bro  
相关文章