555-webrtc 中文文档教程

Question

react-native-webrtc

React Native 的 WebRTC 模块。

• Support iOS / Android.
• Support Video / Audio / Data Channels.

注意 对于 Expo 用户：除非您弹出，否则此插件不起作用。

Community

欢迎大家加入我们的 Discourse 社区，讨论任何与 React Native 和 WebRTC 相关的话题。

WebRTC Revision

react-native-webrtc	WebRTC Version	arch(ios)	arch(android)	npm published	notes
1.75.2	M75	x86_64 i386 armv7 arm64	armeabi-v7a arm64-v8a x86 x86_64	:heavycheckmark:
1.75.1	M75	x86_64 i386 armv7 arm64	armeabi-v7a arm64-v8a x86 x86_64	:heavycheckmark:
1.75.0	M75	x86_64 i386 armv7 arm64	armeabi-v7a arm64-v8a x86 x86_64	:heavycheckmark:
1.69.2	M69	x86_64 i386 armv7 arm64	armeabi-v7a arm64-v8a x86 x86_64	:heavycheckmark:
1.69.1	M69 commit (24012) (+16-24348)	x86_64 i386 armv7 arm64	armeabi-v7a arm64-v8a x86 x86_64	:heavycheckmark:
1.69.0	M69 commit (24012) (+16-24348)	x86_64 i386 armv7 arm64	armeabi-v7a x86	:heavycheckmark:
master	M75	x86_64 i386 armv7 arm64	armeabi-v7a arm64-v8a x86 x86_64	:warning:	Please test!

请参阅 wiki 页面了解修订历史。

Installation

• iOS
• Android

Usage

现在，您可以像在浏览器中一样使用 WebRTC。 在您的 index.ios.js/index.android.js 中，您可以要求 WebRTC 导入 RTCPeerConnection、RTCSessionDescription 等。

import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  mediaDevices,
  registerGlobals
} from 'react-native-webrtc';

任何关于使用 RTCPeerConnection、RTCSessionDescription 和 RTCIceCandidate 的东西都像浏览器。 支持大多数 WebRTC API，请参阅文档。

const configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
const pc = new RTCPeerConnection(configuration);

let isFront = true;
mediaDevices.enumerateDevices().then(sourceInfos => {
  console.log(sourceInfos);
  let videoSourceId;
  for (let i = 0; i < sourceInfos.length; i++) {
    const sourceInfo = sourceInfos[i];
    if(sourceInfo.kind == "videoinput" && sourceInfo.facing == (isFront ? "front" : "environment")) {
      videoSourceId = sourceInfo.deviceId;
    }
  }
  mediaDevices.getUserMedia({
    audio: true,
    video: {
      mandatory: {
        minWidth: 500, // Provide your own width, height and frame rate here
        minHeight: 300,
        minFrameRate: 30
      },
      facingMode: (isFront ? "user" : "environment"),
      optional: (videoSourceId ? [{sourceId: videoSourceId}] : [])
    }
  })
  .then(stream => {
    // Got stream!
  })
  .catch(error => {
    // Log error
  });
});

pc.createOffer().then(desc => {
  pc.setLocalDescription(desc).then(() => {
    // Send pc.localDescription to peer
  });
});

pc.onicecandidate = function (event) {
  // send event.candidate to peer
};

// also support setRemoteDescription, createAnswer, addIceCandidate, onnegotiationneeded, oniceconnectionstatechange, onsignalingstatechange, onaddstream

RTCView

但是，渲染视频流应该使用 React 方式。

渲染 RTCView。

<RTCView streamURL={this.state.stream.toURL()}/>

Name	Type	Default	Description
mirror	boolean	false	Indicates whether the video specified by "streamURL" should be mirrored during rendering. Commonly, applications choose to mirror theuser-facing camera.
objectFit	string	'contain'	Can be contain or cover
streamURL	string	''	This is mandatory
zOrder	number	0	Similarly to zIndex

Custom APIs

registerGlobals()

通过调用此方法，JavaScript 全局命名空间会被以下添加项“污染”：

• navigator.mediaDevices.getUserMedia()
• navigator.mediaDevices.enumerateDevices()
• window.RTCPeerConnection
• window.RTCIceCandidate
• window.RTCSessionDescription
• window.MediaStream
• window.MediaStreamTrack

这对于使现有的 WebRTC JavaScript 库（期望这些全局变量存在）与 react-native-webrtc 一起工作很有用。

MediaStreamTrack.prototype._switchCamera()

此功能允许在视频轨道中切换前置/后置摄像头 即时，无需添加/删除轨道或重新协商。

VideoTrack.enabled

从1.67版本开始，当设置本地视频轨道的启用状态为 false，相机将关闭，但轨迹将保持活动状态。 环境 它回到 true 将重新启用相机。

Related projects

react-native-incall-manager

使用 react-native-incall-manager 保持屏幕开启、麦克风静音等。

react-native-callkeep

使用 react-native-callkeep 在 iOS 上使用 callkit 或在 Android 上使用连接服务来使用本地拨号器使用您的 webrtc 应用程序。

Sponsorship

该仓库没有获得赞助的计划。（这可以由合作者稍后讨论）。 如果您想支付赏金来修复某些错误或获得某些功能，请随意打开一个在标题中添加 [BOUNTY] 类别的问题。 添加其他赏金网站链接，如 this 会更好。

Creator

此存储库最初由 Wan Huang Yang 创建。