如何使用webrtc insde谷歌浏览器扩展？ [英] How to use webrtc insde google chrome extension?

问题描述

我正在尝试将webRTC功能集成到其中：

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
 console.log（step1）; 
 navigator.getUserMedia（{audio：true，video：true}，function（stream）{
 console.log（step2）; 
 $（'＃myVideo'）。prop 'src'，URL.createObjectURL（stream））; 
 window.localStream = stream; 
 console.log（step3）; 
 
}，function（error）{ 
 console.log（error）; 
}）; 
  

出现错误：

  step1 
 NavigatorUserMediaError {constraintName：，message：，name：InvalidStateError} 
  

任何想法？

我需要任何特殊权限才能在我的扩展中使用webrtc吗？并有可能在扩展中访问webrtc？

问候

以下是我所谓的弹出（扩展=弹出+背景）

解决方案

为了在Chrome扩展的后台页面中使用WebRTC或语音识别API，您需要从您的扩展中打开一个页面在标签中，（弹出）窗口或iframe（在标签内）（如果您使用iframe，请不要忘记在 web_accessible_resources ）。在此页面中，调用 navigator.webkitGetUserMedia 来触发权限提示。在用户批准权限后，您的分机（特别是后台页面）可以再次请求访问麦克风/摄像头，并且该请求将自动获得批准。

是否一次性提示后的无声批准是可取的正在辩论，这也是 audioCapture 和<$ c的原因$ c> videoCapture 权限无法在扩展中使用。虽然 audioCapture 和 videoCapture 权限将在将来可用，所以我建议将如果您的扩展程序需要这些权限，即使当前版本的Chrome无法识别扩展程序的权限也是如此。

I have developped a google chrome extension.

I am trying now to integrate webRTC feature inside:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
console.log("step1");
navigator.getUserMedia({audio: true, video: true}, function(stream){
    console.log("step2");
    $('#myVideo').prop('src', URL.createObjectURL(stream));
    window.localStream = stream;
    console.log("step3");

  }, function(error){ 
    console.log(error);
 });

I got an error:

step1
NavigatorUserMediaError {constraintName: "", message: "", name: "InvalidStateError"}

Any idea ?

Do I need any special permission to use webrtc inside my extension ? and is it possible to access webrtc in a extension ?

regards

Here is the screenshot of what I call the "popup" (extension = popup + background)

解决方案

In order to use WebRTC or the speech recognition API in the background page of a Chrome extension, you need to open a page from your extension in a tab, (popup) window or iframe (within a tab) (if you use an iframe, don't forget to list the page in web_accessible_resources). In this page, invoke navigator.webkitGetUserMedia to trigger the permission prompt. After the user approves the permission, your extension (in particular the background page) can request access to the microphone / camera again, and the request will automatically be approved.

Whether silent approval after a one-time prompt is desirable is debated, and this is also the reason that audioCapture and videoCapture permissions cannot be used in extensions yet. The audioCapture and videoCapture permissions will become available in the future though, so I recommend putting these permissions in your manifest file if your extension needs it, even when the current versions of Chrome do not recognize the permission for extensions.

这篇关于如何使用webrtc insde谷歌浏览器扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！