如何使用webkitGetUserMedia启动相机

时间:2019-02-26 10:20:18

标签: android cordova webkit webrtc mobile-webkit

我正在尝试在旧手机(Android 5.0版)中打开后置摄像头。由于这些旧设备不支持navigator.mediaDevices && navigator.mediaDevices.getUserMedia,因此我仅依赖于webkitGetUserMedia。我已经成功打开相机并显示视频,但它仅使用前置摄像头,而我需要后置摄像头视频。这是我的代码

if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia({video: true}, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);

我没有与此相关的任何文档。有什么方法可以使用webkitGetUserMedia打开后置摄像头吗? 其次,由于我在基于Cordova的应用程序中使用默认情况下,Cordova使用默认的系统Webview(具有使用人行横道的选项,但不想与基于Cordova的应用程序混淆)是否有可能集成任何其他WebView来实现此目的(getUserMedia等) )?

3 个答案:

答案 0 :(得分:1)

您需要更改面对模式

{ audio: true, video: { facingMode: "user" } }

{ audio: true, video: { facingMode: { exact: "environment" } } }

答案 1 :(得分:0)

首先,我强烈建议您使用AdapterJS,它可以消除所有不同浏览器实现之间的所有差异(Tsahi对此主题很好的blog)。

第二,您正在使用不推荐使用的GUM-API,我不建议这样做。我在GitHub项目上发现了一个issue,这正是您遇到的问题,也许对您有所帮助。

已在问题中指出

  

不推荐使用navigator.getUserMedia函数,而应使用较新的MediaDevices.getUserMedia函数。 link用于文档。

因此,如果您应用了这些更改,则GUM应该接受

{ audio: true, video: { facingMode: { exact: "environment" } } }

约束(第一个答案正确指出),该约束应为您提供手机后置摄像头的视频流。

答案 2 :(得分:0)

您可能想从旧版本中adapter.js填充FacesMode的方式中汲取灵感: https://github.com/webrtcHacks/adapter/blob/master/src/js/chrome/getusermedia.js

基本上,它尝试使用navigator.mediaDevices.enumerateDevices(您可能必须诉诸较早的MediaStreamTrack.getSources()函数)来枚举设备,然后尝试猜测哪个是后置摄像头,将deviceId传递给getUserMedia。对此要小心,因为您的旧版本可能对deviceId具有不同的约束名称(请参阅constraintsToChrome_函数),并且此文档非常稀疏。