zego-express-engine-reactnative
Version:
React Native Zego Express Video for Android & iOS
230 lines (224 loc) • 14.5 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>zego-express-engine-reactnative</title>
<meta name="description" content="Documentation for zego-express-engine-reactnative">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">zego-express-engine-reactnative</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="globals.html">Globals</a>
</li>
</ul>
<h1>zego-express-engine-reactnative</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<a href="#zego-express-engine-reactnative" id="zego-express-engine-reactnative" style="color: inherit; text-decoration: none;">
<h1>zego-express-engine-reactnative</h1>
</a>
<p><a href="https://github.com/zegoim/zego-express-reactnative-sdk/blob/master/README.md">English</a> | <a href="https://github.com/zegoim/zego-express-reactnative-sdk/blob/master/README_zh.md">中文</a></p>
<p>ZegoExpressEngine Audio/Video ReactNative SDK is a react-native wrapper based on <a href="https://doc-en.zego.im/en/693.html">ZegoExpressEngine</a> native Android / iOS SDK, providing live video and real-time audio/video services. It only needs 4 lines of code and can be easily accessed in 30 minutes.</p>
<p>Learn more about the solution: <a href="https://www.zego.im">https://www.zego.im</a></p>
<a href="#1️⃣-apply-for-zego-appid" id="1️⃣-apply-for-zego-appid" style="color: inherit; text-decoration: none;">
<h2>1️⃣ Apply for ZEGO AppID</h2>
</a>
<p>Log in to <a href="https://www.zego.im">ZEGO Official Website</a> to register an account, select a scenario according to your actual business needs, and obtain AppID and App Sign for initializing the SDK.</p>
<a href="#2️⃣-import-zego-express-engine-reactnative-only-support-react-native-gt-060" id="2️⃣-import-zego-express-engine-reactnative-only-support-react-native-gt-060" style="color: inherit; text-decoration: none;">
<h2>2️⃣ Import <code>zego-express-engine-reactnative</code> (only support react-native >= 0.60)</h2>
</a>
<p>In your project, you can type in:</p>
<p><code>npm install zego-express-engine-reactnative --save</code></p>
<p>or</p>
<p><code>yarn add zego-express-engine-reactnative</code></p>
<p>Next, In <strong>iOS</strong>, you should <code>cd</code> to <code>ios</code> folder, and execute this command:</p>
<p><code>pod install</code></p>
<p>Now, you can use <code>zego-express-engine-reactnative</code> module in your project by using javascript or typescript(recommended)</p>
<a href="#3️⃣-add-device-permissions" id="3️⃣-add-device-permissions" style="color: inherit; text-decoration: none;">
<h2>3️⃣ Add device permissions</h2>
</a>
<a href="#android" id="android" style="color: inherit; text-decoration: none;">
<h3>Android</h3>
</a>
<p>Open the file <code>app/src/main/AndroidManifest.xml</code>, and add the following contents:</p>
<pre><code class="language-xml"> <span class="hljs-comment"><!-- Permissions required by the SDK --></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.ACCESS_WIFI_STATE"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.RECORD_AUDIO"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.INTERNET"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.ACCESS_NETWORK_STATE"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.CAMERA"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.BLUETOOTH"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.MODIFY_AUDIO_SETTINGS"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.WRITE_EXTERNAL_STORAGE"</span> /></span>
<span class="hljs-comment"><!-- Permissions required by the App --></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.READ_PHONE_STATE"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-permission</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.permission.WAKE_LOCK"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-feature</span>
<span class="hljs-attr">android:glEsVersion</span>=<span class="hljs-string">"0x00020000"</span>
<span class="hljs-attr">android:required</span>=<span class="hljs-string">"true"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-feature</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.hardware.camera"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">uses-feature</span> <span class="hljs-attr">android:name</span>=<span class="hljs-string">"android.hardware.camera.autofocus"</span> /></span>
</code></pre>
<blockquote>
<p>Note: Because Android 6.0 requires dynamic permissions for some of the more important permissions, you cannot apply for static permissions only through the <code>AndroidMainfest.xml</code> file. Therefore, you need to refer to the following code</p>
</blockquote>
<pre><code class="language-javascript"><span class="hljs-keyword">import</span> {PermissionsAndroid} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
<span class="hljs-keyword">const</span> granted = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.RECORD_AUDIO);
granted.then(<span class="hljs-function">(<span class="hljs-params">data</span>)=></span>{
<span class="hljs-keyword">if</span>(!data) {
<span class="hljs-keyword">const</span> permissions = [PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, PermissionsAndroid.PERMISSIONS.CAMERA];
PermissionsAndroid.requestMultiple(permissions);
}
}).catch(<span class="hljs-function">(<span class="hljs-params">err</span>)=></span>{
<span class="hljs-built_in">console</span>.log(err.toString());
})
}
</code></pre>
<a href="#ios" id="ios" style="color: inherit; text-decoration: none;">
<h3>iOS</h3>
</a>
<p>Choose the option TARGETS -> Info -> Custom iOS Target Properties</p>
<p><img src="https://storage.zego.im/sdk-doc/Pics/iOS/ZegoExpressEngine/Common/privacy-description.png" alt="Add iOS Privacy"></p>
<p>Click the + Add button to add camera and microphone permissions.</p>
<ol>
<li><p><code>Privacy - Camera Usage Description</code></p>
</li>
<li><p><code>Privacy - Microphone Usage Description</code></p>
</li>
</ol>
<p>After adding permissions, it will be as shown:</p>
<p><img src="https://storage.zego.im/sdk-doc/Pics/iOS/ZegoExpressEngine/Common/privacy-description-done.png" alt="Add iOS Privacy Done"></p>
<a href="#4️⃣-init-sdk" id="4️⃣-init-sdk" style="color: inherit; text-decoration: none;">
<h2>4️⃣ Init SDK</h2>
</a>
<pre><code class="language-javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> ZegoExpressEngine <span class="hljs-keyword">from</span> <span class="hljs-string">'zego-express-engine-reactnative'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span><</span>{}> {
<span class="hljs-function"><span class="hljs-title">componentDidMount</span>(<span class="hljs-params"></span>)</span> {
ZegoExpressEngine.createEngineWithProfile({<span class="hljs-attr">appID</span>: <span class="hljs-number">1234567890</span>, <span class="hljs-attr">scenario</span>: ZegoScenario.General}).then(<span class="hljs-function">(<span class="hljs-params">engine</span>) =></span> {
<span class="hljs-keyword">if</span>(engine != <span class="hljs-literal">undefined</span>)
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"init sdk success"</span>);
<span class="hljs-keyword">else</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"init sdk failed"</span>);
});
}
}
</code></pre>
<a href="#5️⃣-faq" id="5️⃣-faq" style="color: inherit; text-decoration: none;">
<h2>5️⃣ FAQ</h2>
</a>
<a href="#1-can-i-integrate-sdk-with-versions-below-060" id="1-can-i-integrate-sdk-with-versions-below-060" style="color: inherit; text-decoration: none;">
<h3>1. Can I integrate SDK with versions below 0.60?</h3>
</a>
<p>No. <code>zego-express-engine-reactnative</code> only supports ReactNative versions of 0.60 or above, otherwise, please upgrade your project version.</p>
<a href="#do-i-need-a-manual-link-this-native-module" id="do-i-need-a-manual-link-this-native-module" style="color: inherit; text-decoration: none;">
<h3>Do I need a manual link this native module?</h3>
</a>
<p>No. Automatic Link is supported in versions 0.60 or above, so you <strong>don't need</strong> to execute this command:</p>
<p><code>react-native link zego-express-engine-reactnative</code></p>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="globals.html"><em>Globals</em></a>
</li>
<li class="label tsd-is-external">
<span>Internals</span>
</li>
<li class=" tsd-kind-module">
<a href="modules/_index_.html">"index"</a>
</li>
<li class="label tsd-is-external">
<span>Externals</span>
</li>
<li class=" tsd-kind-module tsd-is-external">
<a href="modules/_zegoexpressdefines_.html">"<wbr>Zego<wbr>Express<wbr>Defines"</a>
</li>
<li class=" tsd-kind-module tsd-is-external">
<a href="modules/_zegoexpressengine_.html">"<wbr>Zego<wbr>Express<wbr>Engine"</a>
</li>
<li class=" tsd-kind-module tsd-is-external">
<a href="modules/_zegoexpresseventhandler_.html">"<wbr>Zego<wbr>Express<wbr>Event<wbr>Handler"</a>
</li>
<li class=" tsd-kind-module tsd-is-external">
<a href="modules/_zegorenderview_.html">"<wbr>Zego<wbr>Render<wbr>View"</a>
</li>
<li class=" tsd-kind-module tsd-is-external">
<a href="modules/_impl_zegoexpressengineimpl_.html">"impl/<wbr>Zego<wbr>Express<wbr>Engine<wbr>Impl"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
</body>
</html>