首页 > 解决方案 > Android webview 中的 HTML 相机 API

问题描述

我正在使用以下 html 代码。我可以在我的桌面上获得视频流,但我在 android webView 应用程序中获得了一个灰色的播放按钮。我通过 https 连接提供服务。请指导我,因为我是这两个代码片段的新手。

HTML

<div id="video-container">
 <video id="camera-stream" width="500" autoplay></video>
</div>

脚本.js

window.onload = function() {
 navigator.getUserMedia = (navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia || 
                        navigator.msGetUserMedia);
 if (navigator.getUserMedia) {
  navigator.getUserMedia({ video: true },
  function(localMediaStream) {
   var vid = document.getElementById('camera-stream');
   vid.srcObject = localMediaStream;
  },
function(err) {
  console.log('The following error occurred when trying to use getUserMedia: ' + err);
 }
);
} else { alert('Sorry, your browser does not support getUserMedia'); }
}

此屏幕截图取自我的桌面 chrome 浏览器。

在此处输入图像描述

这是从我的手机 webView 中获取的。

在此处输入图像描述

标签: androidwebviewhtml5-videocamera-api

解决方案


我知道这是一个旧线程,但我最近遇到了同样的问题,经过多次尝试,我终于找到了解决方案。

如果您看到此播放按钮,则应正确设置所有权限。似乎 webview 正在等待用户交互以启动流,但点击图标不会启动视频(idk 用户应该如何“批准”流)

解决方案是更改 webapp 中 webview 的设置:

webView.settings.mediaPlaybackRequiresUserGesture = false;

通过这种方式,流无需任何用户交互即可正确启动


推荐阅读