HTML 5 浏览器相机权限答案

【问题标题】：HTML 5 Browser camera permissionHTML 5 浏览器相机权限
【发布时间】：2016-01-04 19:51:27
【问题描述】：

我有一个使用 WEB RTC 在两个对等方之间进行视频通信的 Web 应用程序。一切正常，但我们在生产中遇到了一个令人头疼的问题。

问题是，当浏览器请求摄像头和麦克风许可时，用户通常会忽略弹出窗口，因此他们对为什么他们的视频没有显示感到沮丧。所以我想知道是否有一些库可以预测权限弹出的位置，所以我可以从我的 html 中显示一些箭头并使其更明显？

【问题讨论】：

我正在寻找完全相同的东西。我看到其他网站在地址栏下显示一个横幅，说明在哪里单击以允许权限。你找到图书馆了吗？
显然没有什么是开箱即用的，因为我记得我们最终分别为每个浏览器提供了即兴解决方案。

标签： javascript html browser camera microphone

【解决方案1】：

大多数浏览器引擎实现getUserMedia功能需要用户权限才能访问网络摄像头。视频数据流只有在用户操作后才开始。我认为没有用户访问权限我们无法访问网络摄像头。如果你想避免用户权限，那么我们只能在 html 渲染引擎内部避免权限。

【讨论】：

是的，我完全知道我们不能避免相机许可。我要问的是如何让这个权限对用户来说更加明显。
无法自定义安全弹出窗口，但在安全弹出窗口之前，您可以设法显示一条消息“请在安全弹出窗口中单击允许或接受”。

【解决方案2】：

    <button onclick="askPermission()">click me</button>
        <video></video>

     function askPermission(){

         //add constraints object
         var constraints = {
             audio:true,
             video:true};

         //call getUserMedia
         navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream){

             var video = document.querySelector('video');
             video.srcObject = mediaStream;
             video.play();
             }).catch(function(err){
                 console.log("There's an error!" + err.message);
             })

     }

【讨论】：