标签: webrtc

react.js我想在和上进行简单的视频聊天WebRTC。pc.addStream(localStream)但出现在线错误：

类型错误：RTCPeerConnection.addStream 的参数 1 不是对象。

我不明白为什么我看不到该行中的日志：

pc.onicecandidate = (e)=>{ console.log('onicecandidate');

这就是全部代码：

class App extends Component {
  constructor(props) {
    super(props);
  }
  componentDidUpdate(){
    loadScript("https://webrtc.github.io/adapter/adapter-latest.js");
    let localVideo, remoteVideo, peerConnection, localStream;
    $('#start').on('click', ()=>{ start(true) });

    let id = uuid();
    localVideo = document.getElementById('localVideo');
    remoteVideo = document.getElementById('remoteVideo');


    if(navigator.mediaDevices.getUserMedia) {
       navigator.mediaDevices.getUserMedia( { video:true, audio:true}).then( ( stream )=> {
          localStream = stream;
          localVideo.src = window.URL.createObjectURL(stream);
       }).catch(errorHandler);
   }else{ alert('Your browser does not support getUserMedia API'); }

   function start(isCaller) {
      peerConnection = new RTCPeerConnection( { …

我有一个简单的问题。是否有可能实现适用于大多数设备和浏览器的屏幕共享？

我在互联网上查找，发现了一些 chrome 插件，但我想在不安装任何插件或在 chrome 上设置一些实验标志的情况下进行屏幕共享。

最好的解决方案是当我可以从导航器中进行流传输时，就像我的相机捕获一样。

从相机获取视频的代码

this.navig.getUserMedia =  ( this.navig.getUserMedia || this.navig.webkitGetUserMedia || this.navig.mozGetUserMedia || this.navig.msGetUserMedia );
this.navig.getUserMedia({video: true, audio: true}, (stream) => {
        this.videoElement.nativeElement.src = window.URL.createObjectURL(stream);
        this.videoElement.nativeElement.play();
}, (error) => console.warn('video error' + error))

所以我想要捕获屏幕的流对象。那可能吗？

我在互联网上找到了这个，但这给我带来了一些错误......

navigator.mediaDevices.getDisplayMedia({ video: true })
.then(stream => {
    // we have a stream, attach it to a feedback video element
    videoElement.srcObject = stream;
  }, error => {
    console.log("Unable to acquire screen capture", error);
  });

我正在尝试在 React 中创建一个 AudioWorklet。我正在使用 create-react-app 并将在 React 上下文之外工作的脚本导入到 App.jsx 中。它无法实例化我的 AudioWorkletNode 扩展并引发以下错误：

   Failed to compile.
./src/worklet/worklet-node.js
  Line 2:  'AudioWorkletNode' is not defined  no-undef

代码：

 // The code in the main global scope.
    class MyWorkletNode extends AudioWorkletNode {
        constructor(context) {
          super(context, 'my-worklet-processor');
        }
      }

      let context = new AudioContext();

      context.audioWorklet.addModule('processor.js').then(() => {
        let node = new MyWorkletNode(context);
      });

同样的代码成功初始化了 AudioWorklet，所以我有点困惑为什么 AudioWorkletNode 没有被识别。

来源：https ://github.com/anoek/webrtc-group-chat-example/blob/master/client.html

我正在尝试修改此 Webrtc 示例以添加更改相机的功能（跨浏览器支持）。

正常使用完美，更换相机后，重新协商失败。

1) 获取设备列表navigator.mediaDevices.enumerateDevices()

2）获取新流后更改local_media_stream

local_media_stream.getTracks().forEach(function(track) {
    track.stop();
});
local_media_stream = stream; 

3）触发重协商功能（摘自源码第132行）

function renegotiate(){
    console.log("Creating RTC offer to ", peer_id);
    peer_connection.createOffer(
                    function (local_description) { 
                        console.log("Local offer description is: ", local_description);
                        peer_connection.setLocalDescription(local_description,
            function() { 
                signaling_socket.emit('relaySessionDescription', 
                    {'peer_id': peer_id, 'session_description': local_description});
                console.log("Offer setLocalDescription succeeded"); 
            },
            function() { Alert("Offer setLocalDescription failed!"); }
        );
    },
    function (error) {
        console.log("Error sending offer: ", error);
    });
};

我相信我的方法是错误的，但我尝试了在谷歌上找到的许多不同方法来编辑重新协商的代码，但是我对WebRTC和Socket.io不熟悉，仍然无法使事情正常工作。

更换摄像头后，其他与会者上显示的视频就从视频最后一帧变成了静态图像。

有人可以帮忙指出我的错误吗？提前致谢。

我正在尝试运行此webrtc 客户端/信令服务器代码，但是在使用我按照本教程的说明创建的新自签名证书运行服务器后，我chatclient.js无法连接到套接字服务器：

connection = new WebSocket('wss://localhost:6503/', 'json');

这是 chrome 控制台显示的错误：

(chatclient.js:106) WebSocket connection to 'wss://localhost:6503/' failed: 
    Error in connection establishment: net::ERR_CERT_COMMON_NAME_INVALID

然后我从 chrome 访问https://0.0.0.0:6503/（服务器正在侦听端口 6503），这是 chrome 检查器的安全选项卡：

我猜想我需要在生成 ssl 证书期间设置正确的通用名称，我当前将其设置为0.0.0.0:6503.

我应该设置什么？由于这是一个 websocket 的地址，我不知道该写哪一部分？

我正在从 WebRTC 获取媒体流并进行一些音频处理和监控。它可以在 FireFox 上运行，但在 Chrome 上保持沉默。

这是一个简化版本，以单个增益节点为例。

    const AudioContext = window.AudioContext || window.webkitAudioContext;
    let myAudioCtx = new AudioContext();
    let mySource = myAudioCtx.createMediaStreamSource(stream);
    let gainNode = myAudioCtx.createGain();
    gainNode.gain.value = 2;
    mySource.connect(gainNode);
    gainNode.connect(myAudioCtx.destination);

而如果我直接将流分配给 srcObject，我就会听到声音。

看来 createMediaStreamSource() 没有返回任何音频，因为我的监控显示静音。但是，如果我将来自 WebRTC 的流分配给 srcObect 并通过我的监控运行，那么监控会检测到声音。

myAudioCtx.state 说“正在运行”

想不出还有什么地方可以检查。任何帮助，将不胜感激

我用来WebRTC getUserMedia抓取这样的网络摄像头…

navigator.mediaDevices.getUserMedia({

    video: {
        facingMode: "user",
    }

}).then(function (stream) {

    var video = document.getElementById('cam-stream');
    video.srcObject = stream;

}).catch( function (error) {

    console.log("Camera Stream Error : " + error.name + " - " + error.message);

});

我想在该提要断开连接时显示警报，例如，如果有人拔掉网络摄像头的插头或网络摄像头本身崩溃了。

我看过ondevicechange https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/ondevicechange#Example但如何检测当前提要并不明显

在 WebRTC 信令过程中，我必须通过向 STUN 服务器发出请求来找到我自己的公共 IP 地址和端口。但它真的需要这么复杂吗？

难道我不能只向子网的路由器发送请求并获取其 IP 地址和它为我打开的端口吗？或者更好的是，我直接将我的公共地址存储在我的计算机中，每当它发生变化时路由器都会通知我。浏览器会提供一个API来直接获取这个公共地址。无需使用 STUN 服务器。我们为什么不这样做呢？

感谢您的帮助。

通过向 config.xml 添加 MODIFY_AUDIO_SETTINGS 权限，我的应用程序将在运行后崩溃。

<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/uses-permission" xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
</edit-config>

然后运行应用程序：

 ionic cordova run android -- device

我也尝试获取 ionic android 权限

 import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

 this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
  result =>console.log('Haspermission?',result.hasPermission),
  err =>this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
);

但没有弹出窗口询问用户许可。最后我直接使用了cordova权限

ionic cordova plugin add cordova-plugin-android-permissions

declare var cordova:any
var permissions = cordova.plugins.permissions;
permissions.requestPermission(permissions.RECORD_AUDIO, successCallback, errorCallback);

我可以获得相机或 record_audio 的许可，但 requestPermission 对于 MODIDY_AUDIO_SETTINGS 许可返回 false。

permissions.requestPermission(permission.MODIDY_AUDIO_SETTINGS, success, error);

function error() {
    resolve(false);
}

function success(status) {
  if (status.hasPermission) {  // <-- status.hasPermission is false here …

我正在开发用于 Flutter 中视频通话的 WebRTC。一切都像魅力一样工作，但是当我运行应用程序时，它不会显示本地相机和远程相机（给出相机权限），但如果我热重新加载应用程序，相机就会显示。

这是我的代码。

这是我的用户界面。

Expanded(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(child: RTCVideoView(_localRenderer, mirror: true)),
          Expanded(child: RTCVideoView(_remoteRenderer)),
        ],
      ),
    ),
),`