From 42dfaacbcdbc4ed8ff4b7d6893b5d9fe455e4e24 Mon Sep 17 00:00:00 2001 From: Mustafa BOLEKEN Date: Sun, 3 Mar 2024 03:24:40 +0300 Subject: [PATCH 01/31] Hide sidebar border --- src/css/custom.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 27795718..4955d5e7 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -173,3 +173,11 @@ html, article{ .navbar__toggle{ color: white; } + +.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocRoot-Layout-Sidebar-styles-module { + border: 0px !important; +} + +.table-of-contents__left-border{ + border-left: 0px solid #e3e3e3; +} \ No newline at end of file From a21737bc74ea07878e85334a5be08d2a923ca44e Mon Sep 17 00:00:00 2001 From: Mustafa BOLEKEN Date: Sun, 3 Mar 2024 04:58:20 +0300 Subject: [PATCH 02/31] Reorganise React Native Documentatyion and add new instructions --- .../sdk-integration/react-native-sdk.md | 335 ------------------ .../react-native-sdk/_category_.json | 8 + .../download-react-native-samples.md | 47 +++ .../react-native-conference-sample.md | 18 + .../react-native-data-channel-sample.md | 17 + .../react-native-p2p-sample.md | 13 + .../react-native-play-sample.md | 18 + .../react-native-pre-requisite.md | 82 +++++ .../react-native-publish-sample.md | 17 + .../react-native-sdk-usage.md | 189 ++++++++++ .../react-native-sdk/react-native-sdk.md | 19 + 11 files changed, 428 insertions(+), 335 deletions(-) delete mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/_category_.json create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md create mode 100644 docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk.md diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk.md deleted file mode 100644 index 6b5eafaa..00000000 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -title: React Native SDK -description: Ant Media's WebRTC React Native SDK lets you build your own React Native application that can publish and play WebRTC broadcasts with just a few lines of code. -keywords: [React Native SDK, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 5 ---- - -Ant Media's WebRTC React Native SDK lets you build your own React Native application that can publish and play WebRTC broadcasts with just a few lines of code. - -In this doc, we're going to cover the following topics. - -## Pre-Requisite for React Native development - -### Software requirements - -* Android Studio (IDE) -* Android SDK -* Java -* NodeJs -* NPM -* React Native CLI - -First of all, you’re required to install the node on your system. If your machine already has Node.js installed, then skip this step. - -### Node.js Installation - -![](@site/static/img/image(83).png) - -Download the latest Node.js from here [nodejs.org/en](http://nodejs.org/en) - -Once the setup is downloaded on your system, run the .msi downloaded file and follow the prompt instructions to install the application. - -Furthermore, make ascertain that the Node and NPM have been installed. - -Use the Below Commands- - -```shell -node -v -``` -```shell -npm –v -``` - -### React Native - -Use the command: - -```shell - npm install -g react-native-cli -``` - -in the command terminal to install React Native. - -### Android Development Environment - -Download & Install the Android Studio [https://developer.android.com/studio/install.html](https://developer.android.com/studio/install.html) - -![](@site/static/img/image(84).png) - -The Android Studio lets you run the Reactive Native application in an emulator and test the application. - -### Verify React Native Installation By running a sample app - -We’ll be building a project using React Native by running the following command: - -```shell -react-native init MySampleApp -``` - -in the terminal from the folder where you will be creating the application. - -Now, run commands below: - -```shell -react-native start -``` - -```shell -react-native run-android -``` - - Make sure you’ve started the emulator on your machine. - -This Is how the sample project will look like in the Emulator: - -![](@site/static/img/image(85).png) - -## Download and install WebRTC sample apps - - -### Download sample React Native projects - -WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). - -After downloading the whole project, you can see all samples React Native projects in the ```**samples**``` folder. - - - -![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZUAAADFCAIAAAATwPgvAAAai0lEQVR4nO3dd3gU1foH8Hd3Z3tLIY2E1E0IJEBCL5feBb0UqSr+VBRFL4h4pVwLotcKKhYE6SAtVAkIAS4lQQHFUEOAFCANSNnU7bszvz9CKBJwk5BkB7+fhz82s2fOvjPPw/c5c+bsjoDjOAIA4CFhYxcAAFBLyC8A4CvGZnc0dg0AALXBFJWUNXYNAAC1IcD8PQDwFOa/AICvkF8AwFfILwDgK+QXAPAV8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgK8bJdixH2WWUUkhmOxGRSECBWmrlRQwCEAAaibP5ZbDRijOUVky3vu4tEdHzbahHs/qqrAGUHJ4/8Vj7lTN6qhrsEy/u+2jz2ecmv9LCXd5QnwnwyHI2v8x2Sim8a4uNpSWnyOog2T19+CrJX01yZ/u+pXjX7Hc/PHRRoZYQERFn7PzCpkldPLz9FPfvymHUXzfL/DwUDx4IGvWXf9sTv2zF3jwhEXFm31Zv/XtGd3Npfqm5IX9/g7WZiktKbSx+8wPgIahxxtzJbKfFJ6t/a1gEPRVVmz5jJn7x/fPRld2f2fr9vHc3hoz47wsDdSpR9e1Lk74ad7jbro8Gqu/fpyU3+esP5zm6jP54284AFRFrTc9MJ7mEcmtTIQC4iPqavjpxre59yFqPmPbWy4Mztm5KK7TVvhvjlbhPPtF3nvv6hGEBlReKQolO11Lnr6x7iQDQiOorvywP6VepPXV9grzTzl+9wRJdP/xV994DK/+tvkhkzo17f9qT7+/LT/hocO+nPtl00uSg1I1vVbV560AREVFF2rFVbP8p43X3iSvbhYRVE3oP7N574Kh16VUbS9ZOu/lB3afFlRARUcXZrSPnbM+6/subldu/+KWyae7BecMW/1KcEvdc74Hdew+cuvHi7b6LDk+tbPzC/NRi08M5IwBQxdVvHzISZRORT35eqZ1Kz55ouvFgQtLBhPi5/Va8POOYyX/0e19ufq+/98DZuw+unTkqVi7K+CPn8T0HE5IOJix/MeeDMYsyWXPqyeSygLAAcfX934hfsOFM6NcHE5K2vB2wYvKio3qOiC7tzRsRl3QwIengypdyVg9beJYl4qyGgn1fTn4z942DCUk75g869Pbr26+xRHZzWf6yGRP3+H17MCHpx9lZyyd+fsJKxFkubOv59PxOixOSDsZ/N9j48vQlV60NeuoAHnmunl930PZ/Y4QoLXnn5m17byjD7Gdy8u+9qAx7elqngnO/xm3edtLa0st+JqfoLzr1iBo26bXubkTk0X3EEPXZ31INRBQxenon8bkj2+I2H7NHN7GfTNNXtm7S773vRzclInX0+LGBJ3Ydvbk99JlvpndXEpF/p2m9lDsTz9jspYd//iPkqbnjI4hI0nrIyP5Xt8edsjy0kwEAdZy/bwCsw25QmJv4uDOUt2nGwnMq/4ioQJVETCxbXmEmuntYVX520dy4a+rg5rG+SivDsVfKjWIfrVh0vrCCqNpFEuJQnV/VSgatppk1vcJKVHF2y7vrT2tCwmN9PexiIXtFbyCSElGILqzqNoHWM6hyOxFR+/CmNzfLPD2F3JUis0Hze8aNsgs/vnl2ExERGS6VGloWG0jxcE8PwN+aq+eXqeJieY6yi843fe1Ti+0jlk8d4q9RiAQXzn6y+Z62hv99M2dT0ze3vBCr0ciEBcyeRYlEIl2rztJvE48Vje7n6dxHlp9d8J/Ffm+tm9TeXSMT6SXHvz1Y87rFEm+xf98nxz/Z0u3mljdI7uZmT6t5VwBwHy58/chaCnNSlnzwpaXvuJZeQs5qsZBEqVaIBPbSQ3s2VrUSMmLObLayREQOi8HOyVQamZC1ZPxv/zEiIhLp+sx57Nrnc9dnFhlv3lTg2ApDeUXlPtV9sLnCxsk0GpmItVz/ec/R2hSvcA/zNiSfzpG5e/v4ePv4NFHJlEqpC59tAB5yufFX/plDcZsvEREZS9Iv5DH9P3xreJSUKKDj/7Xat3Xpj44QhcR24UZoVXu3Fl2Dv1qz9EdJn87tIvv0DflizZLAy54SQVmKyftmE2Wv6fOKZ/+w/IulobEBKiKymzKKyzoOfDa22grUgX37xc5bvTT4iq9UaEw1a2p1HNquT408sfD7Wd+X9PInIrPBFjZ6XKdadQUA1RPNmTPHmXZGG+3KqEG/SjEN0dW4GKWnn38TiZBhGIZh5H69xo5+PNavMmIl3s3bhkusVoZhvP8xfkiXUF14lM5dLiR1QOsQOZHMw8c3LKZn62Cy2BhGEzx4ZL82YS0imodoJESkiuzZOcSbrTCyDMMwEnlYeHTb8ACFxjM4OFTnq65cGyvVeAWF6wJ9vXQdWwcLzFaG0Qa3Gz2gs65F88hQD6lMExTYLLypW2U9QqVnSPOIyFAPhdIzLDA4zOvm9JpU21QXHqXzVUvdArp1aO2oKGUYhmFkLbp2bqYWC6XKpgEhYf6+MnxxFKDOnH1+bbGZ3kmkGwZn++0ZSK+1q31ZAAB/ydn84ji6qKfDWU4tTPVV0oBQcpPWtTgAgAdwNr8AAFwNZmEAgK+QXwDAV8gvAOAr5BcA8BXyCwD4CvkFAHyF/AIAvkJ+AQBfMdfy9Y1dAwBAbQhsdntj1wAAUBv4/hAA8BXmvwCAr5BfAMBXyC8A4CvkFwDwFfILAPgK+QUAfIX8AgC+Qn4BAF8hvwCAr5BfAMBXzj5/m+UopZCSsslgJSJihNTSi3oHkkRUj8UBADyAs/lVZqHlpymn/PaWX3Op3EpDw0gg+HNjsZCE92xsKKzxxrk185fsPJ/bZ9aKad20jVUHANQ3Z/PLxt4VXpW2XaRiUzVDMK2UOviRv7rO1dUcZ604tHFTfvMnN3zUU+nswQEAL9Xpv7jVQXsvV/9Wdhn9q31d+q4l1m4rKLCrApuIEV4Aj7r6mr+/iF9FBIB6Vl+jFLZWvypmqyhI2f7lv9ZdUInIVhExa93s3t7S3D/2L1i58Vx2BbESXfQTU2YN17nJy3MPLJgZH/Nkuw0bdurL7L7hfab/54Vor9xvR03bUFTkSDqTsGzot/GTmpZk7vj8hw2n0s0k0UUPe+Pt4SFq6dl107+70aFjyR87kuXTV83tIi89FT//k7gzRjO5h0ZNen1m9xB18em1ny0s7NbPuG7z78UVopBWo2bNGR4kF3Os/fqp3Z8t3ng+zyhgZa27PDvz7f6S/Jyfvpu4OlkltFW0eObDd57s6C592CcUAO7hSusnzPq9qxd8fVa3KG7r7vitcd89G+EuKbl0YP6i430nfbozfuvOLYv6+x5bsHp/iZkloqvpF5JKg5esWr9z0+IB2lM79ySbHKGvbVr+cv/u417/bEf8KyHm0oTVC8+HDP5x25adWxb20h5du+GYwc6Rw3I1PT/66Vnb4uf20FpOJaz9ISX4i5Vxu7dvmNpTs2Z9XJ7BTmS9cnH/JdmgFeu2xm+Y11xwZNuhdCtHZelJC5btbTfhw/iftu7csvxfIwKl5RkLZsz4veWCn+K37l63QH1o5gc/Z9ka+1wC/B24UH5V5J76+ZJgwmujolRERB4tWzSTyS4dWSfoPaZvGz+GiJFpez72T3tKyqVSExH5RbQZ0bejUiJg5KoW0ZH6q9lmK3tnh6bS9LQMYb9+nZQSASPTxHSJzci+VG6yk03kqwoODvUQEtlNpckZmZ369fNXSoiRRcd0ll3OyawwEYmDowYN6dFGzpBE4dkmzCP/cpbZTqkHFhdHjBjaOVgiJEYma9ayhenM7t3uQ2YMayEjIo8WLz0WdXz9kcLGOIEAfzeuM8vNFhXcKFJ7h2nuvPQqSTl7TTJYI7n5p0AmV8oMljK7g4hUMolKJiEiEggYsdRhsf3pt7AtN1KPHUrc+PsQRkhE5LBZDG2fYlmOpGJNRFONiIjIainMOnZ416YTSxgBEXEOu8EQ84SDIxLJpBq5VEhEJBDKJJzAYOG4kpTzhdpBodrbt1wtVzNyrUfjhvVddvMwrAaxto21Xk4RANzFdfJLqNFqtdIC610zZ24hIbJUo8VBVJkYdpvNLmGkQgGx1fdyJ7FXcLtu/f/z3tx2Pnct8SgSkEB0c9UaI3b3ad911qz/jG7rfeeStaKCart0CwmRpZpsbFU9RFIfP7W4/6wDc4dgyguggbnQ9aPKp3kbQ8G6Tb9V3rosz8oqtFrDYp6w7N9xPFPvIHJYK35LPMTERrVyVzjToUwZpPAu3XP0rNnOEZFZry/U6x13t2FkKp3c+/jeo/lmOxGRWX+1QG91VNNbpbvrsRZmZakju0Ye3rPsWNWcl/78Odx7BWgQrjP+IrFHyNhJo3Ys+nzatB1aIqN79Kypo4O6jR2fv2rzglnrhBoioSag9Utj+7jJRPespa2GRNV09KgnVqxc/+8DPwpEAoVnyPBxYzp43NVGKFF2Gzkyf9Wq92ceZgQiknt0+eeYEZ4e9+mS/O+sRySP7DvmpcGdZ39gXrHy7SkbfcRE5NXihVdb1vFUAIAznH1+WoGRJifUoF8vBS0cWJuCHOayMhNLRCSWaZUyoYA4h9VgMNocRAKBRK5USBkBEcfazEabWKlgBEREdqvZYhfI5VIhcRaTkWVk8sqvBXCs2WgwWx0ckZARK5QKsVBgtxgsJK3sh4iIOLvFWGGycRyRUKRQKqWMkLVbzBaSKaRCARFxNovJxjJyuURAd9ejUCslQiLOXF5qqnyQJiNzU8sa7dtTAH8nzuZXmZW+OE6ZJU4t7BKLaEAIjcMoBADqk7P5xRHllVNKIdmcmDh3l1IbH1KK61ocAMAD4PnbAMBXLnT/EQCgRpBfAMBXyC8A4CvkFwDwFfILAPgK+QUAfIX8AgC+Qn4BAF8x6VevNXYNAAC1gfX3AMBXuH4EAL5CfgEAXyG/AICvkF8AwFfILwDgK+QXAPAV8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvnH3+to2lpGw6kk1GGxGRSEgRHvS4jjzk9VgcAMADOJtf5VaKS6Ui0+0tl/RUZqHRLUh8zxhOKSGp6CEVCABwH87ml4O9K7wq/ZJD1wwkEvx5u5yhx3XUyrvO1QEA3J+z+VUtB0dp+urfsrHILwCoX3XKrwe4Yaj5Pqy16Jpe4NFEXJKeXUJE5O4f5qcRV75pL7t2KbeUiGRuPoE+7kzlRavDmHc5t8TmIEbu29TPXSkhh62g6IZEpiy4UcAJPIN1npKHdUgA4GLqK79qw3J9x7w111v5hkmL07PJmp96RdvxjdcmtfaksitHN69ISJGrPO1lBRXyXmMm/jPWi8xFR/bH/ZxUpnIXllWUy4I7T356gJulYO3SmRU+j8tLr0nknZ9BfgE8ulwpv4iI8jKLgsZNenO0huwl2XHzn/t4Y8flEwMS168+6THho6ld1A7TxZ2Lpn32c+z6Z2RpR5cl5b/wyvR/BCuN109989EPO053mBBJdL3c3DRo+pRRCgarQwAeZa72P9y3a59BwRoiIsat2YCuna7uOJlz4/IBa8vnxrVWE5FIHtGmhTH3dMoNc8ap7OjIfjEBKiKBwicoSiU6mVpARKR1Cw/3kyK8AB51rjb+EoruuJ0pFIoEUsZSUWi4sH3mi0nyqkjSerVUk6OgNH3Llp8PxSuFVXu06iQlItJqNFoN1m8APPJcLb+Kc/MNRJ5ERGS9lnOd6To42E2qajZg+uRXBlYOzCqx5hOeYYOHDZjyygCt5HbkWUvzGrpkAGgkrnaRVbj7m7UnSomICpI3fL7VOHJwK5VncA8//ZK5P2VVNjFm7P6jiISSkKiwopS4LWcqV3DY0pIvFBotjVY4ADQ4Vxt/hU2Y3SW+X7cXBcTaYz+M+2JwmIoENPS19/1/GPV4x0VCIuI6fLz1fSKhZ3S/T6Zbhr429ptSIxF1fmbmx1HNydbYRwAADcXZ5z8WGmnKPrKxzvYbqKH5fWtYiylrxew1omdfnhDjWcM9AeDvyNnxl0JMvYPoVD45nIgwlYSGhNWpLACAv1SD/BrTgnoHkcOJ4ZqcIV9lncoCAPhLzl4/NgjWZrGTWCwW3vONcACAe7hUfgEA1ICrrZ8AAHAW8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfM1bz8xq4BAKA2sH4VAPgK148AwFfILwDgK+QXAPAV8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgK2efP8QRmWxUZrn5/CGBgBQMaaUkwKM2AKCROJtfFjttv0QnrpPVQUQkFJCfikZFks69HourYs5IPJLhHjOgVZMG+DAA4Atn88tgoz2ZZLLf3nKtgsos9Hwbkor+3NhTTkrxQyqQiMh0Yc9PO3W+yC8AuJOz+cVyd4VXpfRiejeRqrmCFNCkGOoZWMfaAAAepK7z93aWbPf+c9CezIdSHgDAfTk7/qqpUkvN97GXnU1MEUTHKC9t2HeRiCiyz6geIaq7G5kzEo8kpWVbici9Wa8e/4hoQqf3/VQc9livUDUREWfLTTmeYfbtFKu798IWAB4lrrR+wlZyIv7A6u/eTDRHRDaPCBLmzH/v37uu3tXEmp92prDcPzQiMjyISz+wIi6xzCIoTdkXt+VMORER2Y3Fe3euPVdgxo1RgEdefY2/aiu9uNnUp/vGiAREXTv7WIZOW7qvxwftb70t8Yp6YliUSCgkopbuZbMS0sstvVqPHLNn9s5z2e27NJMaSlMyUtSDx+kkrpTMAFAfXC2/dN3bNxNVDp2EosCQDpYtV/V0O7/sptKs7EtHNi6LTzXZjcVZ8nZFz9m93VoHhG8+nZbdIUCX/9vBoqihrYJkjXUAANBgXH2UIvTTyG/94bCcO7j5q6VbhYM/2LR+zbL/vtS2GRGRWKFpExmVk5FusBUe3XM8qm8bTaPVCwANx9XyK/dcenHVa1Pq2YtMu3CPW286LJlpecro4cPb+hDZC/MKinKJiEgki45pZS7MSk388SfByMejtQ1fNwA0PFfLL2PC3Hl7ComIsvZ+Pmuz+o0xMbcvcUWMjxtblHHZbGGtZQW7ty88Z6x8Q6ANCG1ZULhy3UbdEyOD5NX2DACPGleb/wqfvnrw1SkTRhMRtf48fkEnLwER4x4YEuqtIJGi2/D/O71oySsTd8vdvMY+/dVzyRcVjJCISBHUt7956dc953XxbNwDAIAG42x+CQWkklCF1dl+vRW1LIgoaNK61ZPu2qLu+vIbXStfakMmz/hoctUbg7t2v/nKXnb1clnYuOe6utX6cwGAZ5zNL42ERkVSUvbN728/mJeCngivU1k1VZ71R3ym9NlXgxv0UwGgUTmbX2IRDQ6lgSHkzNO6BQISNuDy0f0fdJySGP3v997pFYyZe4C/EQHHOZNIAAAux9XuPwIAOAv5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgK8Zkdvo7QQAAroQxmMyNXQMAQG1g/T0A8BXmvwCAr5BfAMBXyC8A4CvkFwDwFfILAPgK+QUAfIX8AgC+Qn4BAF8hvwCAr5BfAMBXyC8A4Ctnn5/GcpRZQsnXyWQnImIEFOpO7f1IjAAEgEbibPyUW2nJKdp8gXal0650+imNvvydDmfVa21/qfjnt6d8ujfv3jey9szp/q+V+r/a//zSoX2XXqiPygCgATg7/rI6KLPk7k0crTxD5VaSif7cuImCwt3JTfYQ6nswjq3+5zM4jnVwHBGZs47NmJ0w5NNpA/w11e3OOvE0cQBwUc7mV7UsDlqXUv1bg0Pp+TZ16fvhYLQBA4f3DFVLG7sQAHj46pRfD3A6v546rhlGG/DYyIDGrgIA6kV9Tb/b2JrvY8pa+cZHa07r977ftnl02+bRbd+pnNsqOj/zldlLTldNZ5Umz+rbe9Ed476zK16qbD9hxZ9Hg+as468/M3dvblnV60HNo9s2b9f79VXJN392ljX+umpOz+i2zaPbztpbXPOiAaDRuNbtQ44zJi5/3Tgh+eK55JNbP8ldNPr9A8UO4jiWu2Oii+Pu+Ovc1m9/jZp/8Vzyxf2LVP+b8cqyNMufuuQ4InIYCteu2NL86W/OnUs+nRj3fKSq8sjzl3/yi8/4feeSL8a/e+bL8etS794bAFyYa+UXkTFw0AfDQoiIFBED3hsbuW/1/qIH79Fh7KSOaiIi347zJ/c+uS4+o7oI4jjWxhRcKymx2TiZ0qt1pwgJERF5dpn44qAICRGFDHw2xvJHymX7Qz0eAKg/rpZfnkF+qlt/qLVN2dxS0wN3iG7W5NZruUbLciWG6h5IIpK7Dxv6pP7IsudfeHHq0t+Nt7ZHBbpV7e2mYe0VBuQXAF/U1/z9w8J0aOahUEcqVPcs0rhPe1Ggt7aa7QKR2LfNkG++fozowttRL069/M6n/x34UCsFgIbmauOvtF07TuhtRERmferG7aeD2rdQC8VK1ZXkY1cMRMRaMn/9NdFwa/xEG3fsyjMQETkqbmzftrHpkDZe1fXL2u0Ver1dIBAIWrz6wzNNzCUGzHQB8Jyrjb883Kxpm766YlVSaVqaUff0uwMDSWrvNnLg/lcXfsp29JLK1KYKH+527EZJrsWvXWy1kzUv57L88RnjOyiq69duKNm3+tM0iU5OVJFe1HJI3yZSKmuwwwKAeuDs8x8LjDQ5oQb9eiloYU2vz0xZK2avET074R/W6/lERNqINqEe0sqEteSeSs222kisCg5qYsjKkYXH+ivtRZmXDW5NmRvns8qJSBHYMqKpSkxEZv3l84WyVhF+InNZRqbeMyzATeTIzTiTW0pEJJEEtIzxkxEZ8s5cIl1s05uJp796skiqC/NVu9qgFACq5Wx+lZjpvSTKq3C2337BNCm2hrXczK+XJ8R41nBPAPg7cvb6USujKe3pWB5ZnfjGoJeCejSrU1kAAH/J2fwSEIW5U5h7vdaijR3UQ+Bb7fwVAMCfOXv9CADgajBVDQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgKyHWTwAATwmvFRQbTWYWKQYAfMMo5NJrBcVGs4VlEWEAwCdYfw8AfIX5ewDgK+QXAPAV8gsA+Ar5BQB8hfwCAL76f6uyX2BsiyQMAAAAAElFTkSuQmCC) - - - -### Install dependencies and run sample projects - -For installing dependencies you can use **npm** or as an alternative method, you can also use **yarn**. - -Install **yarn** by [following this link.](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable) - -First, you need to open the terminal on the root directory of the sample project you want to install and then run commands below. - -To install dependencies by npm run ```npm install``` - -or - -To install dependencies by yarn run ```yarn install``` - -After dependencies are installed , you need to run commands below in order to run the project itself. - -Run ```npm run android``` if using npm - -or - -Run ```yarn android``` if using yarn - ->` Note: If you want to use **npm**, then  follow only npm commands and if you want to use **yarn** then follow only yarn commands. - -After the project starts successfully, sample app will appear on the device/emulator. - -## Run the sample React Native app - - -### Publish a stream from your sample React Native app - -* Open **/samples/publish/src/App.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name. - -![](@site/static/img/image-1654599250441.png) - -* Move to **/samples/publish** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Publish** sample React native app. - -![](@site/static/img/image-1654599372613.png) - -* Tap ```Start Publishing``` button on the screen. After the clicking ```Start Publishing```, the stream will be published on Ant Media Server. -* You can now go to the web panel of Ant Media Server (e.g http://server\_ip:5080) and watch the stream there. You can also quickly play the stream via ```https://your_domain:5443/WebRTCAppEE/player.html``` - -### Play stream from your sample React Native app - -* Open **/samples/play/src/Play.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) - -* Go to **/samples/play** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Play** sample React native app. - -* Before playing, make sure that there is a stream that is already publishing to the server with the same stream id in your **defaultStreamName** variable(You can quickly publish to the Ant Media Server via ```https://your_domain:5443/WebRTCAppEE```). - -![](@site/static/img/image-1654599731503.png) - -* Tap ```Start Playing``` button on the screen. After clicking Start Playing , the stream will start playing. - -![](@site/static/img/image-1654600749349.png) - -### P2P communication with sample React Native app - -* Open **/samples/peer/src/Peer.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) -* Go to **/samples/peer** folder and follow the [Install dependencies and run sample projects](https://portal.document360.io/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Peer** sample React native app. - -![](@site/static/img/image-1654601111460.png) - -* When there is another peer connected to the same stream ID via Android, iOS or web, the P2P communication will be established and you can talk to each other. You can quickly connect to the same stream id via ```https://your_domain:5443/WebRTCAppEE/peer.html``` - -### ![](@site/static/img/image-1654601140029.png) - - - -### Conference with your React Native sample app - -* Open **/samples/conference/src/conference.tsx** file and update **defaultRoomName** variable for stream name and update **webSocketUrl** variable with server name. - -![](@site/static/img/image-1655196972089.png) - -* Go to **/samples/conference** folder and follow the [Install dependencies and run sample projects](https://portal.document360.io/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the C**onference** sample React native app. - -![](@site/static/img/image-1655197421323.png) - -* When there are other streams connected to the same room id via Android, iOS or Web, then a conference room will be established and you can talk to each other. You can quickly connect to the same stream id via - - https://your\_domain:5443/WebRTCAppEE/conference.html![](@site/static/img/image-1655197140679.png) - - - - -### Data Channel with your React Native Sample app - -* Open **/samples/DataChannel/src/[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")**[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")[**Chat**.](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")**[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx").tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) - -* Go to **/samples/DataChannel** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Play** sample React native app. -* Tap **Publish** button to start publishing in data channel. - -![](@site/static/img/image-1656673042845.png) - -* After that you can start sending messages using send button and also can see the received button, You can also quickly play the stream via https://your\_domain:5443/WebRTCAppEE/player.html and send and receive the data channel messages. - -![](@site/static/img/image-1656673300268.png) - -Using WebRTC React Native SDK ------------------------------ - -Before moving forward with using WebRTC React Native SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general. - -### Install @antmedia/react-native-ant-media Package - -**```npm```** - -```shell -npm i @antmedia/react-native-ant-media react-native-webrtc -``` - -**```yarn```** - -```shell -yarn add @antmedia/react-native-ant-media react-native-webrtc -``` - -### initialize useAntMedia adaptor - - -```js - -import { useAntMedia, rtc_view } from "@antmedia/react-native-ant-media"; - -const adaptor = useAntMedia({ - url: webSocketUrl, // your web socket server URL - mediaConstraints: { - // mediaConstraints - audio: true, - video: { - width: 640, - height: 480, - frameRate: 30, - facingMode: "front", - }, - }, - onlyDataChannel: false, // for using only data channel not audio and video - callback(command, data) {}, // check info callbacks - callbackError: (err, data) =>` {}, // // check error callbacks - peer_connection_config: { - // peerconnection_config - iceServers: [{ urls: "stun:stun1.l.google.com:19302" }], - }, - debug: true, // debug true / false -}); - -// Then, in another part of your script, you can start streaming by calling the publish method -adaptor.publish(streamName); - -``` - - -The example above is taken from [ant-media / WebRTC-React-Native-SDK](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/publish/src/App.tsx) - -### How to publish a stream - -The method below is used to publish a stream. - -```js -adaptor.publish(streamName); -``` - - - -The method below is used to stop publish - -```js -adaptor.stop(streamName); -``` - - - -Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Publish](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/publish/src/App.tsx) - -### How to play a stream - -The method below is used to play a stream. - -```js -adaptor.play(streamName); -``` - -Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Play](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/play/src/Play.tsx) - -### How to use peer 2 peer - -The method method is used to join a room. - -```js -adaptor.join(streamName); -``` - - - -The method below is used to leave a room. - -```js -adaptor.leave(streamName); -``` - - -Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK p2p](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/peer/src/Peer.tsx) - -### How to use conference - -The method below is used to join a room. - -```js -adaptor.joinRoom(room); -``` - - - -The method below is used to leave a room. - -```js -adaptor.leaveFromRoom(room); -``` - -Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Conference](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/conference/src/conference.tsx) - -### How to use the data channel - -The method below is used to send messages. - -```js -adaptor.sendData(streamId, message); -``` - -Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Data Channel](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx) - ->` Check Also: [WebRTC-React-Native-SDK](https://github.com/ant-media/WebRTC-React-Native-SDK) \ No newline at end of file diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/_category_.json b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/_category_.json new file mode 100644 index 00000000..e3b1fb2b --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "React Native SDK", + "position": 15, + "link": { + "type": "generated-index", + "description": "Ant Media Server React Native SDK Integration." + } +} diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md new file mode 100644 index 00000000..89445907 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md @@ -0,0 +1,47 @@ +--- +title: Download and install React Native WebRTC sample projects +description: Download and install React Native WebRTC sample projects +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 4 +--- + +## Download and install WebRTC sample apps + + +### Download sample React Native projects + +WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). + +After downloading the whole project, you can see all samples React Native projects in the ```**samples**``` folder. + + + +![](data:image/png;base64,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) + + + +### Install dependencies + +For installing dependencies you can use **npm** or as an alternative method, you can also use **yarn**. + +Install **yarn** by [following this link.](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable) + +First, you need to open the terminal on the root directory of the sample project you want to install and then run commands below. + +To install dependencies by npm run ```npm install``` + +or + +To install dependencies by yarn run ```yarn install``` + +After dependencies are installed , you need to run commands below in order to run the project itself. + +Run ```npm run android``` if using npm + +or + +Run ```yarn android``` if using yarn + +>` Note: If you want to use **npm**, then  follow only npm commands and if you want to use **yarn** then follow only yarn commands. + +After the project starts successfully, sample app will appear on the device/emulator. diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md new file mode 100644 index 00000000..bc8b45e1 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md @@ -0,0 +1,18 @@ +--- +title: WebRTC stream in React Native +description: Publishing WebRTC Live stream Using iOS SDK +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 8 +--- + +* Open **/samples/conference/src/conference.tsx** file and update **defaultRoomName** variable for stream name and update **webSocketUrl** variable with server name. + +![](@site/static/img/image-1655196972089.png) + +* Go to **/samples/conference** folder and follow the [Install dependencies and run sample projects](https://portal.document360.io/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the C**onference** sample React native app. + +![](@site/static/img/image-1655197421323.png) + +* When there are other streams connected to the same room id via Android, iOS or Web, then a conference room will be established and you can talk to each other. You can quickly connect to the same stream id via + + https://your\_domain:5443/WebRTCAppEE/conference.html![](@site/static/img/image-1655197140679.png) \ No newline at end of file diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md new file mode 100644 index 00000000..fcf88e8e --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md @@ -0,0 +1,17 @@ +--- +title: WebRTC stream in React Native +description: Publishing WebRTC Live stream Using iOS SDK +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 9 +--- + +* Open **/samples/DataChannel/src/[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")**[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")[**Chat**.](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")**[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx").tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) + +* Go to **/samples/DataChannel** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Play** sample React native app. +* Tap **Publish** button to start publishing in data channel. + +![](@site/static/img/image-1656673042845.png) + +* After that you can start sending messages using send button and also can see the received button, You can also quickly play the stream via https://your\_domain:5443/WebRTCAppEE/player.html and send and receive the data channel messages. + +![](@site/static/img/image-1656673300268.png) \ No newline at end of file diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md new file mode 100644 index 00000000..ee90dead --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md @@ -0,0 +1,13 @@ +--- +title: P2P Communication Sample in React Native +description: P2P Communication Sample Using React Native SDK +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 7 +--- + +* Open **/samples/peer/src/Peer.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) +* Go to **/samples/peer** folder and follow the [Install dependencies and run sample projects](https://portal.document360.io/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Peer** sample React native app. + +![](@site/static/img/image-1654601111460.png) + +* When there is another peer connected to the same stream ID via Android, iOS or web, the P2P communication will be established and you can talk to each other. You can quickly connect to the same stream id via ```https://your_domain:5443/WebRTCAppEE/peer.html``` diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md new file mode 100644 index 00000000..c0f75916 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md @@ -0,0 +1,18 @@ +--- +title: Playing WebRTC stream sample in React Native +description: Playing WebRTC Live Stream Sample Using React Native SDK +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 6 +--- + +* Open **/samples/play/src/Play.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) + +* Go to **/samples/play** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Play** sample React native app. + +* Before playing, make sure that there is a stream that is already publishing to the server with the same stream id in your **defaultStreamName** variable(You can quickly publish to the Ant Media Server via ```https://your_domain:5443/WebRTCAppEE```). + +![](@site/static/img/image-1654599731503.png) + +* Tap ```Start Playing``` button on the screen. After clicking Start Playing , the stream will start playing. + +![](@site/static/img/image-1654600749349.png) \ No newline at end of file diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md new file mode 100644 index 00000000..9dafda39 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md @@ -0,0 +1,82 @@ +--- +title: Pre-Requisite for React Native development +description: Pre-Requisite for React Native development +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 3 +--- + +## Pre-Requisite for React Native development + +### Software requirements + +* Android Studio (IDE) +* Android SDK +* Java +* NodeJs +* NPM +* React Native CLI + +First of all, you’re required to install the node on your system. If your machine already has Node.js installed, then skip this step. + +### Node.js Installation + +![](@site/static/img/image(83).png) + +Download the latest Node.js from here [nodejs.org/en](http://nodejs.org/en) + +Once the setup is downloaded on your system, run the .msi downloaded file and follow the prompt instructions to install the application. + +Furthermore, make ascertain that the Node and NPM have been installed. + +Use the Below Commands- + +```shell +node -v +``` +```shell +npm –v +``` + +### React Native + +Use the command: + +```shell + npm install -g react-native-cli +``` + +in the command terminal to install React Native. + +### Android Development Environment + +Download & Install the Android Studio [https://developer.android.com/studio/install.html](https://developer.android.com/studio/install.html) + +![](@site/static/img/image(84).png) + +The Android Studio lets you run the Reactive Native application in an emulator and test the application. + +### Verify React Native Installation By running a sample app + +We’ll be building a project using React Native by running the following command: + +```shell +react-native init MySampleApp +``` + +in the terminal from the folder where you will be creating the application. + +Now, run commands below: + +```shell +react-native start +``` + +```shell +react-native run-android +``` + + Make sure you’ve started the emulator on your machine. + +This Is how the sample project will look like in the Emulator: + +![](@site/static/img/image(85).png) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md new file mode 100644 index 00000000..657c1fa9 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md @@ -0,0 +1,17 @@ +--- +title: Publishing WebRTC stream Sample in React Native +description: Publishing WebRTC Live stream Using React Native SDK +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 5 +--- + +* Open **/samples/publish/src/App.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name. + +![](@site/static/img/image-1654599250441.png) + +* Move to **/samples/publish** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Publish** sample React native app. + +![](@site/static/img/image-1654599372613.png) + +* Tap ```Start Publishing``` button on the screen. After the clicking ```Start Publishing```, the stream will be published on Ant Media Server. +* You can now go to the web panel of Ant Media Server (e.g http://server\_ip:5080) and watch the stream there. You can also quickly play the stream via ```https://your_domain:5443/WebRTCAppEE/player.html``` diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md new file mode 100644 index 00000000..dd6a2911 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md @@ -0,0 +1,189 @@ +--- +title: React Native SDK Usage +description: React Native SDK Usage +keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 2 +--- + +Before moving forward with using WebRTC React Native SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general. + +### Install @antmedia/react-native-ant-media Package + +**```npm```** + +```shell +npm i @antmedia/react-native-ant-media react-native-webrtc +``` + +**```yarn```** + +```shell +yarn add @antmedia/react-native-ant-media react-native-webrtc +``` + +### initialize useAntMedia adaptor + + +```js + +import { useAntMedia, rtc_view } from "@antmedia/react-native-ant-media"; + +const adaptor = useAntMedia({ + url: 'wss:////websocket', // your web socket server URL + mediaConstraints: { + audio: true, + video: { + width: 640, + height: 480, + frameRate: 30, + facingMode: "front", + }, + }, + callback: (message, data) => { + console.log("Callback message: ", message, "Data: ", data); + }, + callbackError: (errorMessage, data) => { + console.error("Error message: ", errorMessage, "Data: ", data); + }, + peer_connection_config: { + iceServers: [{ urls: 'stun:stun.l.google.com:19302' }], + }, + debug: true, + onlyDataChannel: false, // for using only data channel not audio and video +}); + +``` + + +The example above is taken from [ant-media / WebRTC-React-Native-SDK](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/publish/src/App.tsx) + +### How to publish a stream + +The method below is used to publish a stream. + +```js +adaptor.publish(streamName); +``` + + + +The method below is used to stop publish + +```js +adaptor.stop(streamName); +``` + + + +Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Publish](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/publish/src/App.tsx) + +### How to play a stream + +The method below is used to play a stream. + +```js +adaptor.play(streamName); +``` + +Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Play](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/play/src/Play.tsx) + +### How to use peer 2 peer + +The method method is used to join a room. + +```js +adaptor.join(streamName); +``` + + + +The method below is used to leave a room. + +```js +adaptor.leave(streamName); +``` + + +Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK p2p](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/peer/src/Peer.tsx) + +### How to use conference + +The method below is used to join a room. + +```js +adaptor.joinRoom(room); +``` + + + +The method below is used to leave a room. + +```js +adaptor.leaveFromRoom(room); +``` + +Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Conference](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/main/samples/conference/src/conference.tsx) + +### How to use the data channel + +The method below is used to send messages. + +```js +adaptor.sendData(streamId, message); +``` + +Detailed code can be viewed in [ant-media / WebRTC-React-Native-SDK Data Channel](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx) + +### How to render stream + +To display a local or remote video stream, use the rtc_view component. + +```js +rtc_view(stream, /*custom style*/{ width: 100, height: 100 }); +``` + +### How to switch camera + +You need to get video track to switch camera. + +```js +let isFrontCam = true; + +try { + // Taken from above, we don't want to flip if we don't have another camera. + if ( cameraCount < 2 ) { return; }; + + const videoTrack = adaptor.localStream.current.getVideoTracks()[0]; + videoTrack._switchCamera(); + + isFrontCam = !isFrontCam; +} catch( err ) { + // Handle Error +}; +``` + +### How to toggle the microphone + +You can mute/unmute microphone by toggling the track enabled value. It can be applied to local microphone and remote audio tracks. + +```js +let isMuted = false; + +try { + const audioTrack = await adaptor.localStream.current.getAudioTracks()[0]; + audioTrack.enabled = !audioTrack.enabled; + + isMuted = !isMuted; +} catch( err ) { + // Handle Error +}; +``` + +### How to change remote audio tracks volume level + +```js +const audioTrack = remoteMediaStream.getAudioTracks()[0]; +audioTrack._setVolume(0.5); +``` + +> Check Also: [WebRTC-React-Native-SDK](https://github.com/ant-media/WebRTC-React-Native-SDK) \ No newline at end of file diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk.md new file mode 100644 index 00000000..5d9578e1 --- /dev/null +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk.md @@ -0,0 +1,19 @@ +--- +title: React Native SDK User Guide +description: Ant Media's WebRTC React Native SDK lets you build your own React Native application that can publish and play WebRTC broadcasts. +keywords: [React Native SDK User Guide, Publish Stream from your mobile device, Using the WebRTC React Native SDK, Ant Media Server Documentation, Ant Media Server Tutorials] +sidebar_position: 1 +--- + +# React Native SDK +Ant Media's WebRTC React Native SDK lets you build your own React Native application that can publish and play WebRTC broadcasts. +It also supports joining conference room in React Native. + +- [React Native SDK Usage](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage/) +- [Pre-Requisite for React Native development](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite/) +- [Download and install WebRTC sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples/) +- [Publishing WebRTC live stream Sample](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample/) +- [Playing WebRTC Live stream Sample](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample/) +- [P2P Communication Sample](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample/) +- [Conference Sample](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample/) +- [Data Channel Sample](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample/) \ No newline at end of file From f0cbcfadfa54cdece3ed2b748c9bb22cca344031 Mon Sep 17 00:00:00 2001 From: Mustafa BOLEKEN Date: Sun, 3 Mar 2024 05:03:32 +0300 Subject: [PATCH 03/31] Update titles --- .../react-native-sdk/react-native-conference-sample.md | 4 ++-- .../react-native-sdk/react-native-data-channel-sample.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md index bc8b45e1..48e3f947 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md @@ -1,6 +1,6 @@ --- -title: WebRTC stream in React Native -description: Publishing WebRTC Live stream Using iOS SDK +title: WebRTC Conference in React Native +description: WebRTC Conference Using React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] sidebar_position: 8 --- diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md index fcf88e8e..ecef38ab 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md @@ -1,6 +1,6 @@ --- -title: WebRTC stream in React Native -description: Publishing WebRTC Live stream Using iOS SDK +title: Data Channel Sample for React Native +description: Data Channel Sample for React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] sidebar_position: 9 --- From 302fc6d361f792f1e3d8d68ab209f301955db930 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:39:41 +0530 Subject: [PATCH 04/31] Update download-react-native-samples.md --- .../react-native-sdk/download-react-native-samples.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md index 89445907..b08d01a4 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md @@ -5,16 +5,11 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 4 --- -## Download and install WebRTC sample apps - - -### Download sample React Native projects WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). After downloading the whole project, you can see all samples React Native projects in the ```**samples**``` folder. - ![](data:image/png;base64,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) From 1684d214cdf4484982701f470f9879accc35142c Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:40:28 +0530 Subject: [PATCH 05/31] Update react-native-pre-requisite.md --- .../react-native-sdk/react-native-pre-requisite.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md index 9dafda39..5b5a0aff 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md @@ -5,8 +5,6 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 3 --- -## Pre-Requisite for React Native development - ### Software requirements * Android Studio (IDE) From 3c3ced0aedae463a733df7c74ac38576998044e6 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:53:44 +0530 Subject: [PATCH 06/31] Update react-native-pre-requisite.md --- .../react-native-sdk/react-native-pre-requisite.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md index 5b5a0aff..36f468f3 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md @@ -2,7 +2,7 @@ title: Pre-Requisite for React Native development description: Pre-Requisite for React Native development keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 3 +sidebar_position: 2 --- ### Software requirements From f252d5b1c239853b39cdf952ecf4637e2b41554a Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:53:58 +0530 Subject: [PATCH 07/31] Update react-native-sdk-usage.md --- .../react-native-sdk/react-native-sdk-usage.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md index dd6a2911..6973d237 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md @@ -2,7 +2,7 @@ title: React Native SDK Usage description: React Native SDK Usage keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 2 +sidebar_position: 3 --- Before moving forward with using WebRTC React Native SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general. @@ -186,4 +186,4 @@ const audioTrack = remoteMediaStream.getAudioTracks()[0]; audioTrack._setVolume(0.5); ``` -> Check Also: [WebRTC-React-Native-SDK](https://github.com/ant-media/WebRTC-React-Native-SDK) \ No newline at end of file +> Check Also: [WebRTC-React-Native-SDK](https://github.com/ant-media/WebRTC-React-Native-SDK) From 258455e3e0873f2359df4c595b1bb245481670ae Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Wed, 20 Mar 2024 20:41:57 +0530 Subject: [PATCH 08/31] Update react-native-pre-requisite.md --- .../react-native-pre-requisite.md | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md index 36f468f3..bfe12d9a 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md @@ -20,13 +20,13 @@ First of all, you’re required to install the node on your system. If your mach ![](@site/static/img/image(83).png) -Download the latest Node.js from here [nodejs.org/en](http://nodejs.org/en) +Download the latest Node.js from here: [nodejs.org/en](http://nodejs.org/en). Once the setup is downloaded on your system, run the .msi downloaded file and follow the prompt instructions to install the application. Furthermore, make ascertain that the Node and NPM have been installed. -Use the Below Commands- +Use the below commands to check the version: ```shell node -v @@ -37,13 +37,11 @@ npm –v ### React Native -Use the command: +Use the below command to install React Native CLI. ```shell npm install -g react-native-cli -``` - -in the command terminal to install React Native. +``` ### Android Development Environment @@ -61,9 +59,7 @@ We’ll be building a project using React Native by running the following comman react-native init MySampleApp ``` -in the terminal from the folder where you will be creating the application. - -Now, run commands below: +Now, run below commands in the terminal from the folder where you have created the application. ```shell react-native start @@ -71,10 +67,8 @@ react-native start ```shell react-native run-android -``` - - Make sure you’ve started the emulator on your machine. +``` -This Is how the sample project will look like in the Emulator: +Make sure you’ve started the emulator on your machine. This is what the sample project will look like in the emulator: ![](@site/static/img/image(85).png) From db570d4a71017989f743603061a6f9675693c154 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Wed, 20 Mar 2024 20:56:28 +0530 Subject: [PATCH 09/31] Update download-react-native-samples.md --- .../download-react-native-samples.md | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md index b08d01a4..c48efa0e 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md @@ -5,38 +5,30 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 4 --- +Ant Media WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). -WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). - -After downloading the whole project, you can see all samples React Native projects in the ```**samples**``` folder. +After downloading the whole project, you can see all samples of the React Native project in the `samples` folder. ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZUAAADFCAIAAAATwPgvAAAai0lEQVR4nO3dd3gU1foH8Hd3Z3tLIY2E1E0IJEBCL5feBb0UqSr+VBRFL4h4pVwLotcKKhYE6SAtVAkIAS4lQQHFUEOAFCANSNnU7bszvz9CKBJwk5BkB7+fhz82s2fOvjPPw/c5c+bsjoDjOAIA4CFhYxcAAFBLyC8A4CvGZnc0dg0AALXBFJWUNXYNAAC1IcD8PQDwFOa/AICvkF8AwFfILwDgK+QXAPAV8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgK8bJdixH2WWUUkhmOxGRSECBWmrlRQwCEAAaibP5ZbDRijOUVky3vu4tEdHzbahHs/qqrAGUHJ4/8Vj7lTN6qhrsEy/u+2jz2ecmv9LCXd5QnwnwyHI2v8x2Sim8a4uNpSWnyOog2T19+CrJX01yZ/u+pXjX7Hc/PHRRoZYQERFn7PzCpkldPLz9FPfvymHUXzfL/DwUDx4IGvWXf9sTv2zF3jwhEXFm31Zv/XtGd3Npfqm5IX9/g7WZiktKbSx+8wPgIahxxtzJbKfFJ6t/a1gEPRVVmz5jJn7x/fPRld2f2fr9vHc3hoz47wsDdSpR9e1Lk74ad7jbro8Gqu/fpyU3+esP5zm6jP54284AFRFrTc9MJ7mEcmtTIQC4iPqavjpxre59yFqPmPbWy4Mztm5KK7TVvhvjlbhPPtF3nvv6hGEBlReKQolO11Lnr6x7iQDQiOorvywP6VepPXV9grzTzl+9wRJdP/xV994DK/+tvkhkzo17f9qT7+/LT/hocO+nPtl00uSg1I1vVbV560AREVFF2rFVbP8p43X3iSvbhYRVE3oP7N574Kh16VUbS9ZOu/lB3afFlRARUcXZrSPnbM+6/subldu/+KWyae7BecMW/1KcEvdc74Hdew+cuvHi7b6LDk+tbPzC/NRi08M5IwBQxdVvHzISZRORT35eqZ1Kz55ouvFgQtLBhPi5/Va8POOYyX/0e19ufq+/98DZuw+unTkqVi7K+CPn8T0HE5IOJix/MeeDMYsyWXPqyeSygLAAcfX934hfsOFM6NcHE5K2vB2wYvKio3qOiC7tzRsRl3QwIengypdyVg9beJYl4qyGgn1fTn4z942DCUk75g869Pbr26+xRHZzWf6yGRP3+H17MCHpx9lZyyd+fsJKxFkubOv59PxOixOSDsZ/N9j48vQlV60NeuoAHnmunl930PZ/Y4QoLXnn5m17byjD7Gdy8u+9qAx7elqngnO/xm3edtLa0st+JqfoLzr1iBo26bXubkTk0X3EEPXZ31INRBQxenon8bkj2+I2H7NHN7GfTNNXtm7S773vRzclInX0+LGBJ3Ydvbk99JlvpndXEpF/p2m9lDsTz9jspYd//iPkqbnjI4hI0nrIyP5Xt8edsjy0kwEAdZy/bwCsw25QmJv4uDOUt2nGwnMq/4ioQJVETCxbXmEmuntYVX520dy4a+rg5rG+SivDsVfKjWIfrVh0vrCCqNpFEuJQnV/VSgatppk1vcJKVHF2y7vrT2tCwmN9PexiIXtFbyCSElGILqzqNoHWM6hyOxFR+/CmNzfLPD2F3JUis0Hze8aNsgs/vnl2ExERGS6VGloWG0jxcE8PwN+aq+eXqeJieY6yi843fe1Ti+0jlk8d4q9RiAQXzn6y+Z62hv99M2dT0ze3vBCr0ciEBcyeRYlEIl2rztJvE48Vje7n6dxHlp9d8J/Ffm+tm9TeXSMT6SXHvz1Y87rFEm+xf98nxz/Z0u3mljdI7uZmT6t5VwBwHy58/chaCnNSlnzwpaXvuJZeQs5qsZBEqVaIBPbSQ3s2VrUSMmLObLayREQOi8HOyVQamZC1ZPxv/zEiIhLp+sx57Nrnc9dnFhlv3lTg2ApDeUXlPtV9sLnCxsk0GpmItVz/ec/R2hSvcA/zNiSfzpG5e/v4ePv4NFHJlEqpC59tAB5yufFX/plDcZsvEREZS9Iv5DH9P3xreJSUKKDj/7Xat3Xpj44QhcR24UZoVXu3Fl2Dv1qz9EdJn87tIvv0DflizZLAy54SQVmKyftmE2Wv6fOKZ/+w/IulobEBKiKymzKKyzoOfDa22grUgX37xc5bvTT4iq9UaEw1a2p1HNquT408sfD7Wd+X9PInIrPBFjZ6XKdadQUA1RPNmTPHmXZGG+3KqEG/SjEN0dW4GKWnn38TiZBhGIZh5H69xo5+PNavMmIl3s3bhkusVoZhvP8xfkiXUF14lM5dLiR1QOsQOZHMw8c3LKZn62Cy2BhGEzx4ZL82YS0imodoJESkiuzZOcSbrTCyDMMwEnlYeHTb8ACFxjM4OFTnq65cGyvVeAWF6wJ9vXQdWwcLzFaG0Qa3Gz2gs65F88hQD6lMExTYLLypW2U9QqVnSPOIyFAPhdIzLDA4zOvm9JpU21QXHqXzVUvdArp1aO2oKGUYhmFkLbp2bqYWC6XKpgEhYf6+MnxxFKDOnH1+bbGZ3kmkGwZn++0ZSK+1q31ZAAB/ydn84ji6qKfDWU4tTPVV0oBQcpPWtTgAgAdwNr8AAFwNZmEAgK+QXwDAV8gvAOAr5BcA8BXyCwD4CvkFAHyF/AIAvkJ+AQBfMdfy9Y1dAwBAbQhsdntj1wAAUBv4/hAA8BXmvwCAr5BfAMBXyC8A4CvkFwDwFfILAPgK+QUAfIX8AgC+Qn4BAF8hvwCAr5BfAMBXzj5/m+UopZCSsslgJSJihNTSi3oHkkRUj8UBADyAs/lVZqHlpymn/PaWX3Op3EpDw0gg+HNjsZCE92xsKKzxxrk185fsPJ/bZ9aKad20jVUHANQ3Z/PLxt4VXpW2XaRiUzVDMK2UOviRv7rO1dUcZ604tHFTfvMnN3zUU+nswQEAL9Xpv7jVQXsvV/9Wdhn9q31d+q4l1m4rKLCrApuIEV4Aj7r6mr+/iF9FBIB6Vl+jFLZWvypmqyhI2f7lv9ZdUInIVhExa93s3t7S3D/2L1i58Vx2BbESXfQTU2YN17nJy3MPLJgZH/Nkuw0bdurL7L7hfab/54Vor9xvR03bUFTkSDqTsGzot/GTmpZk7vj8hw2n0s0k0UUPe+Pt4SFq6dl107+70aFjyR87kuXTV83tIi89FT//k7gzRjO5h0ZNen1m9xB18em1ny0s7NbPuG7z78UVopBWo2bNGR4kF3Os/fqp3Z8t3ng+zyhgZa27PDvz7f6S/Jyfvpu4OlkltFW0eObDd57s6C592CcUAO7hSusnzPq9qxd8fVa3KG7r7vitcd89G+EuKbl0YP6i430nfbozfuvOLYv6+x5bsHp/iZkloqvpF5JKg5esWr9z0+IB2lM79ySbHKGvbVr+cv/u417/bEf8KyHm0oTVC8+HDP5x25adWxb20h5du+GYwc6Rw3I1PT/66Vnb4uf20FpOJaz9ISX4i5Vxu7dvmNpTs2Z9XJ7BTmS9cnH/JdmgFeu2xm+Y11xwZNuhdCtHZelJC5btbTfhw/iftu7csvxfIwKl5RkLZsz4veWCn+K37l63QH1o5gc/Z9ka+1wC/B24UH5V5J76+ZJgwmujolRERB4tWzSTyS4dWSfoPaZvGz+GiJFpez72T3tKyqVSExH5RbQZ0bejUiJg5KoW0ZH6q9lmK3tnh6bS9LQMYb9+nZQSASPTxHSJzci+VG6yk03kqwoODvUQEtlNpckZmZ369fNXSoiRRcd0ll3OyawwEYmDowYN6dFGzpBE4dkmzCP/cpbZTqkHFhdHjBjaOVgiJEYma9ayhenM7t3uQ2YMayEjIo8WLz0WdXz9kcLGOIEAfzeuM8vNFhXcKFJ7h2nuvPQqSTl7TTJYI7n5p0AmV8oMljK7g4hUMolKJiEiEggYsdRhsf3pt7AtN1KPHUrc+PsQRkhE5LBZDG2fYlmOpGJNRFONiIjIainMOnZ416YTSxgBEXEOu8EQ84SDIxLJpBq5VEhEJBDKJJzAYOG4kpTzhdpBodrbt1wtVzNyrUfjhvVddvMwrAaxto21Xk4RANzFdfJLqNFqtdIC610zZ24hIbJUo8VBVJkYdpvNLmGkQgGx1fdyJ7FXcLtu/f/z3tx2Pnct8SgSkEB0c9UaI3b3ad911qz/jG7rfeeStaKCart0CwmRpZpsbFU9RFIfP7W4/6wDc4dgyguggbnQ9aPKp3kbQ8G6Tb9V3rosz8oqtFrDYp6w7N9xPFPvIHJYK35LPMTERrVyVzjToUwZpPAu3XP0rNnOEZFZry/U6x13t2FkKp3c+/jeo/lmOxGRWX+1QG91VNNbpbvrsRZmZakju0Ye3rPsWNWcl/78Odx7BWgQrjP+IrFHyNhJo3Ys+nzatB1aIqN79Kypo4O6jR2fv2rzglnrhBoioSag9Utj+7jJRPespa2GRNV09KgnVqxc/+8DPwpEAoVnyPBxYzp43NVGKFF2Gzkyf9Wq92ceZgQiknt0+eeYEZ4e9+mS/O+sRySP7DvmpcGdZ39gXrHy7SkbfcRE5NXihVdb1vFUAIAznH1+WoGRJifUoF8vBS0cWJuCHOayMhNLRCSWaZUyoYA4h9VgMNocRAKBRK5USBkBEcfazEabWKlgBEREdqvZYhfI5VIhcRaTkWVk8sqvBXCs2WgwWx0ckZARK5QKsVBgtxgsJK3sh4iIOLvFWGGycRyRUKRQKqWMkLVbzBaSKaRCARFxNovJxjJyuURAd9ejUCslQiLOXF5qqnyQJiNzU8sa7dtTAH8nzuZXmZW+OE6ZJU4t7BKLaEAIjcMoBADqk7P5xRHllVNKIdmcmDh3l1IbH1KK61ocAMAD4PnbAMBXLnT/EQCgRpBfAMBXyC8A4CvkFwDwFfILAPgK+QUAfIX8AgC+Qn4BAF8x6VevNXYNAAC1gfX3AMBXuH4EAL5CfgEAXyG/AICvkF8AwFfILwDgK+QXAPAV8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvnH3+to2lpGw6kk1GGxGRSEgRHvS4jjzk9VgcAMADOJtf5VaKS6Ui0+0tl/RUZqHRLUh8zxhOKSGp6CEVCABwH87ml4O9K7wq/ZJD1wwkEvx5u5yhx3XUyrvO1QEA3J+z+VUtB0dp+urfsrHILwCoX3XKrwe4Yaj5Pqy16Jpe4NFEXJKeXUJE5O4f5qcRV75pL7t2KbeUiGRuPoE+7kzlRavDmHc5t8TmIEbu29TPXSkhh62g6IZEpiy4UcAJPIN1npKHdUgA4GLqK79qw3J9x7w111v5hkmL07PJmp96RdvxjdcmtfaksitHN69ISJGrPO1lBRXyXmMm/jPWi8xFR/bH/ZxUpnIXllWUy4I7T356gJulYO3SmRU+j8tLr0nknZ9BfgE8ulwpv4iI8jKLgsZNenO0huwl2XHzn/t4Y8flEwMS168+6THho6ld1A7TxZ2Lpn32c+z6Z2RpR5cl5b/wyvR/BCuN109989EPO053mBBJdL3c3DRo+pRRCgarQwAeZa72P9y3a59BwRoiIsat2YCuna7uOJlz4/IBa8vnxrVWE5FIHtGmhTH3dMoNc8ap7OjIfjEBKiKBwicoSiU6mVpARKR1Cw/3kyK8AB51rjb+EoruuJ0pFIoEUsZSUWi4sH3mi0nyqkjSerVUk6OgNH3Llp8PxSuFVXu06iQlItJqNFoN1m8APPJcLb+Kc/MNRJ5ERGS9lnOd6To42E2qajZg+uRXBlYOzCqx5hOeYYOHDZjyygCt5HbkWUvzGrpkAGgkrnaRVbj7m7UnSomICpI3fL7VOHJwK5VncA8//ZK5P2VVNjFm7P6jiISSkKiwopS4LWcqV3DY0pIvFBotjVY4ADQ4Vxt/hU2Y3SW+X7cXBcTaYz+M+2JwmIoENPS19/1/GPV4x0VCIuI6fLz1fSKhZ3S/T6Zbhr429ptSIxF1fmbmx1HNydbYRwAADcXZ5z8WGmnKPrKxzvYbqKH5fWtYiylrxew1omdfnhDjWcM9AeDvyNnxl0JMvYPoVD45nIgwlYSGhNWpLACAv1SD/BrTgnoHkcOJ4ZqcIV9lncoCAPhLzl4/NgjWZrGTWCwW3vONcACAe7hUfgEA1ICrrZ8AAHAW8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfM1bz8xq4BAKA2sH4VAPgK148AwFfILwDgK+QXAPAV8gsA+Ar5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgK2efP8QRmWxUZrn5/CGBgBQMaaUkwKM2AKCROJtfFjttv0QnrpPVQUQkFJCfikZFks69HourYs5IPJLhHjOgVZMG+DAA4Atn88tgoz2ZZLLf3nKtgsos9Hwbkor+3NhTTkrxQyqQiMh0Yc9PO3W+yC8AuJOz+cVyd4VXpfRiejeRqrmCFNCkGOoZWMfaAAAepK7z93aWbPf+c9CezIdSHgDAfTk7/qqpUkvN97GXnU1MEUTHKC9t2HeRiCiyz6geIaq7G5kzEo8kpWVbici9Wa8e/4hoQqf3/VQc9livUDUREWfLTTmeYfbtFKu798IWAB4lrrR+wlZyIv7A6u/eTDRHRDaPCBLmzH/v37uu3tXEmp92prDcPzQiMjyISz+wIi6xzCIoTdkXt+VMORER2Y3Fe3euPVdgxo1RgEdefY2/aiu9uNnUp/vGiAREXTv7WIZOW7qvxwftb70t8Yp6YliUSCgkopbuZbMS0sstvVqPHLNn9s5z2e27NJMaSlMyUtSDx+kkrpTMAFAfXC2/dN3bNxNVDp2EosCQDpYtV/V0O7/sptKs7EtHNi6LTzXZjcVZ8nZFz9m93VoHhG8+nZbdIUCX/9vBoqihrYJkjXUAANBgXH2UIvTTyG/94bCcO7j5q6VbhYM/2LR+zbL/vtS2GRGRWKFpExmVk5FusBUe3XM8qm8bTaPVCwANx9XyK/dcenHVa1Pq2YtMu3CPW286LJlpecro4cPb+hDZC/MKinKJiEgki45pZS7MSk388SfByMejtQ1fNwA0PFfLL2PC3Hl7ComIsvZ+Pmuz+o0xMbcvcUWMjxtblHHZbGGtZQW7ty88Z6x8Q6ANCG1ZULhy3UbdEyOD5NX2DACPGleb/wqfvnrw1SkTRhMRtf48fkEnLwER4x4YEuqtIJGi2/D/O71oySsTd8vdvMY+/dVzyRcVjJCISBHUt7956dc953XxbNwDAIAG42x+CQWkklCF1dl+vRW1LIgoaNK61ZPu2qLu+vIbXStfakMmz/hoctUbg7t2v/nKXnb1clnYuOe6utX6cwGAZ5zNL42ERkVSUvbN728/mJeCngivU1k1VZ71R3ym9NlXgxv0UwGgUTmbX2IRDQ6lgSHkzNO6BQISNuDy0f0fdJySGP3v997pFYyZe4C/EQHHOZNIAAAux9XuPwIAOAv5BQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgK8Zkdvo7QQAAroQxmMyNXQMAQG1g/T0A8BXmvwCAr5BfAMBXyC8A4CvkFwDwFfILAPgK+QUAfIX8AgC+Qn4BAF8hvwCAr5BfAMBXyC8A4Ctnn5/GcpRZQsnXyWQnImIEFOpO7f1IjAAEgEbibPyUW2nJKdp8gXal0650+imNvvydDmfVa21/qfjnt6d8ujfv3jey9szp/q+V+r/a//zSoX2XXqiPygCgATg7/rI6KLPk7k0crTxD5VaSif7cuImCwt3JTfYQ6nswjq3+5zM4jnVwHBGZs47NmJ0w5NNpA/w11e3OOvE0cQBwUc7mV7UsDlqXUv1bg0Pp+TZ16fvhYLQBA4f3DFVLG7sQAHj46pRfD3A6v546rhlGG/DYyIDGrgIA6kV9Tb/b2JrvY8pa+cZHa07r977ftnl02+bRbd+pnNsqOj/zldlLTldNZ5Umz+rbe9Ed476zK16qbD9hxZ9Hg+as468/M3dvblnV60HNo9s2b9f79VXJN392ljX+umpOz+i2zaPbztpbXPOiAaDRuNbtQ44zJi5/3Tgh+eK55JNbP8ldNPr9A8UO4jiWu2Oii+Pu+Ovc1m9/jZp/8Vzyxf2LVP+b8cqyNMufuuQ4InIYCteu2NL86W/OnUs+nRj3fKSq8sjzl3/yi8/4feeSL8a/e+bL8etS794bAFyYa+UXkTFw0AfDQoiIFBED3hsbuW/1/qIH79Fh7KSOaiIi347zJ/c+uS4+o7oI4jjWxhRcKymx2TiZ0qt1pwgJERF5dpn44qAICRGFDHw2xvJHymX7Qz0eAKg/rpZfnkF+qlt/qLVN2dxS0wN3iG7W5NZruUbLciWG6h5IIpK7Dxv6pP7IsudfeHHq0t+Nt7ZHBbpV7e2mYe0VBuQXAF/U1/z9w8J0aOahUEcqVPcs0rhPe1Ggt7aa7QKR2LfNkG++fozowttRL069/M6n/x34UCsFgIbmauOvtF07TuhtRERmferG7aeD2rdQC8VK1ZXkY1cMRMRaMn/9NdFwa/xEG3fsyjMQETkqbmzftrHpkDZe1fXL2u0Ver1dIBAIWrz6wzNNzCUGzHQB8Jyrjb883Kxpm766YlVSaVqaUff0uwMDSWrvNnLg/lcXfsp29JLK1KYKH+527EZJrsWvXWy1kzUv57L88RnjOyiq69duKNm3+tM0iU5OVJFe1HJI3yZSKmuwwwKAeuDs8x8LjDQ5oQb9eiloYU2vz0xZK2avET074R/W6/lERNqINqEe0sqEteSeSs222kisCg5qYsjKkYXH+ivtRZmXDW5NmRvns8qJSBHYMqKpSkxEZv3l84WyVhF+InNZRqbeMyzATeTIzTiTW0pEJJEEtIzxkxEZ8s5cIl1s05uJp796skiqC/NVu9qgFACq5Wx+lZjpvSTKq3C2337BNCm2hrXczK+XJ8R41nBPAPg7cvb6USujKe3pWB5ZnfjGoJeCejSrU1kAAH/J2fwSEIW5U5h7vdaijR3UQ+Bb7fwVAMCfOXv9CADgajBVDQB8hfwCAL5CfgEAXyG/AICvkF8AwFfILwDgKyHWTwAATwmvFRQbTWYWKQYAfMMo5NJrBcVGs4VlEWEAwCdYfw8AfIX5ewDgK+QXAPAV8gsA+Ar5BQB8hfwCAL76f6uyX2BsiyQMAAAAAElFTkSuQmCC) - - + ### Install dependencies -For installing dependencies you can use **npm** or as an alternative method, you can also use **yarn**. +For installing dependencies, you can use **npm** or as an alternative method, you can also use **yarn**. Install **yarn** by [following this link.](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable) -First, you need to open the terminal on the root directory of the sample project you want to install and then run commands below. - -To install dependencies by npm run ```npm install``` - -or - -To install dependencies by yarn run ```yarn install``` - -After dependencies are installed , you need to run commands below in order to run the project itself. +:::info +If you want to use **npm**, then follow only npm commands, and if you want to use **yarn**, then follow only yarn commands. +::: -Run ```npm run android``` if using npm +First, you need to open the root directory of the sample project in the terminal that you want to build. -or +To install dependencies, run ```npm install``` if using **npm** or run ```yarn install``` if using **yarn**. -Run ```yarn android``` if using yarn +After dependencies are installed , you need to run the below commands in order to run the project. ->` Note: If you want to use **npm**, then  follow only npm commands and if you want to use **yarn** then follow only yarn commands. +Run `npm run android` if using **npm** or run ```yarn android``` if using **yarn**. -After the project starts successfully, sample app will appear on the device/emulator. +After the project starts successfully, a sample app will appear on the device/emulator. From 33d252710dac2e925b2a49db13a7036653487164 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Wed, 20 Mar 2024 21:13:39 +0530 Subject: [PATCH 10/31] Update download-react-native-samples.md --- .../react-native-sdk/download-react-native-samples.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md index c48efa0e..0f5a5521 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md @@ -25,10 +25,12 @@ If you want to use **npm**, then follow only npm commands, and if you want to us First, you need to open the root directory of the sample project in the terminal that you want to build. -To install dependencies, run ```npm install``` if using **npm** or run ```yarn install``` if using **yarn**. +To install dependencies, run -After dependencies are installed , you need to run the below commands in order to run the project. +```npm install``` or ```yarn install``` -Run `npm run android` if using **npm** or run ```yarn android``` if using **yarn**. +After dependencies are installed, you need to run the below commands in order to run the project. + +`npm run android` or ```yarn android``` After the project starts successfully, a sample app will appear on the device/emulator. From ae88490a46411004cfa84cc8e54116f00ba5c589 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 01:34:37 +0530 Subject: [PATCH 11/31] Update react-native-publish-sample.md --- .../react-native-publish-sample.md | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md index 657c1fa9..ec1a5b97 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md @@ -5,13 +5,29 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 5 --- -* Open **/samples/publish/src/App.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name. +To build the publishing sample project, follow the below steps. + +* Open **/samples/publish/src/App.tsx** file and update **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. ![](@site/static/img/image-1654599250441.png) -* Move to **/samples/publish** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Publish** sample React native app. +* Open /**samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. + +```shell +chmod 750 gradlew +``` + +* Move to the **/samples/publish** folder and run the below commands to run the **Publish** sample React native app. + +```shell +npm install +npm run android +``` ![](@site/static/img/image-1654599372613.png) -* Tap ```Start Publishing``` button on the screen. After the clicking ```Start Publishing```, the stream will be published on Ant Media Server. -* You can now go to the web panel of Ant Media Server (e.g http://server\_ip:5080) and watch the stream there. You can also quickly play the stream via ```https://your_domain:5443/WebRTCAppEE/player.html``` +* Click the `Start Publishing` button on the screen to publish the stream on the server. + +* You can now go to the web panel of Ant Media Server (e.g., http://serverIP:5080) and watch the stream there. + +You can also quickly play the stream via an embedded player. Check [this document](https://antmedia.io/docs/guides/playing-live-stream/embedded-web-player/) for more details. From 0f2c7e584a5fe76043a44c2fd2e44710053a57f8 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 01:37:40 +0530 Subject: [PATCH 12/31] Update react-native-publish-sample.md --- .../react-native-sdk/react-native-publish-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md index ec1a5b97..3ddbd790 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md @@ -11,7 +11,7 @@ To build the publishing sample project, follow the below steps. ![](@site/static/img/image-1654599250441.png) -* Open /**samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. +* Open **/samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. ```shell chmod 750 gradlew From 903faba49bc8be3a6245038093822ce8630c086e Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 01:42:20 +0530 Subject: [PATCH 13/31] Update react-native-play-sample.md --- .../react-native-play-sample.md | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md index c0f75916..4d0f836f 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md @@ -5,14 +5,31 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 6 --- -* Open **/samples/play/src/Play.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) +* Open the **/samples/play/src/Play.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with the server domain or IP address. -* Go to **/samples/play** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Play** sample React native app. +![](@site/static/img/image-1654599250441.png) -* Before playing, make sure that there is a stream that is already publishing to the server with the same stream id in your **defaultStreamName** variable(You can quickly publish to the Ant Media Server via ```https://your_domain:5443/WebRTCAppEE```). +* Open the **/samples/play/android** folder and provide read, write, and execute permissions to the **gradlew** file. + +```shell +chmod 750 gradlew +``` + +* Go to the **/samples/play** folder and run the below commands to run the **Play** sample React native app. + +```shell +npm install +npm run android +``` + +* Before playing, make sure that there is a stream that is already publishing to the server with the same streamId in your **defaultStreamName** variable + +You can quickly publish a WebRTC stream to the Ant Media Server via a sample page. + +`https://your_domain:5443/WebRTCAppEE` ![](@site/static/img/image-1654599731503.png) -* Tap ```Start Playing``` button on the screen. After clicking Start Playing , the stream will start playing. +* Now click ```Start Playing``` button on the screen to play the stream that you are publishing on the server. -![](@site/static/img/image-1654600749349.png) \ No newline at end of file +![](@site/static/img/image-1654600749349.png) From cdf6314bd6a7a77a168505eacaf3c6b37e74454b Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:00:03 +0530 Subject: [PATCH 14/31] Update react-native-p2p-sample.md --- .../react-native-p2p-sample.md | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md index ee90dead..0c0d5986 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md @@ -5,9 +5,27 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 7 --- -* Open **/samples/peer/src/Peer.tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) -* Go to **/samples/peer** folder and follow the [Install dependencies and run sample projects](https://portal.document360.io/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Peer** sample React native app. +* Open **/samples/peer/src/Peer.tsx** file and update **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. + +![](@site/static/img/image-1654599250441.png) + +* Open **/samples/peer/android** folder and provide read, write, and execute permissions to the **gradlew** file. + +```shell +chmod 750 gradlew +``` + +* Go to **/samples/peer** folder and run the below commands to run the **Publish** sample React native app. + +```shell +npm install +npm run android +``` ![](@site/static/img/image-1654601111460.png) -* When there is another peer connected to the same stream ID via Android, iOS or web, the P2P communication will be established and you can talk to each other. You can quickly connect to the same stream id via ```https://your_domain:5443/WebRTCAppEE/peer.html``` +* When there is another peer connected to the same streamId via Android, iOS or web, the P2P communication will be established and you can talk to each other. + +You can quickly join as a peer to the same streamId via peer to peer sample page. + +`https://your_domain:5443/WebRTCAppEE/peer.html` From a9569a1800e166270efba23d6ffdb18806c973f7 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:10:10 +0530 Subject: [PATCH 15/31] Update react-native-conference-sample.md --- .../react-native-conference-sample.md | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md index 48e3f947..4de7580f 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md @@ -5,14 +5,27 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 8 --- -* Open **/samples/conference/src/conference.tsx** file and update **defaultRoomName** variable for stream name and update **webSocketUrl** variable with server name. +* Open the **/samples/conference/src/conference.tsx** file and update the **defaultRoomName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. ![](@site/static/img/image-1655196972089.png) -* Go to **/samples/conference** folder and follow the [Install dependencies and run sample projects](https://portal.document360.io/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the C**onference** sample React native app. +* Open the **/samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. + +```shell +chmod 750 gradlew +``` + +* Go to the **/samples/conference** folder and run the below commands to run the **Conference** sample React native app. + +```shell +npm install +npm run android +``` ![](@site/static/img/image-1655197421323.png) -* When there are other streams connected to the same room id via Android, iOS or Web, then a conference room will be established and you can talk to each other. You can quickly connect to the same stream id via - - https://your\_domain:5443/WebRTCAppEE/conference.html![](@site/static/img/image-1655197140679.png) \ No newline at end of file +* When there are other streams connected to the same roomId via Android, iOS, or the Web, then a conference room will be established and users can communicate with each other. + +You can quickly join the conference room via the conference sample page. + +`https://your-domain:5443/WebRTCAppEE/conference.html` From e16cc699db6a0696f9921757996f5880dda6bb4e Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:21:25 +0530 Subject: [PATCH 16/31] Update react-native-data-channel-sample.md --- .../react-native-data-channel-sample.md | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md index ecef38ab..86effca1 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md @@ -5,13 +5,31 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 9 --- -* Open **/samples/DataChannel/src/[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")**[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")[**Chat**.](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx")**[](https://github.com/ant-media/WebRTC-React-Native-SDK/blob/develop/samples/DataChannel/src/Chat.tsx "Chat.tsx").tsx** file and update **defaultStreamName** variable for stream name and update **webSocketUrl** variable with server name.![](@site/static/img/image-1654599250441.png) +* Open the **/samples/DataChannel/src/App.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. -* Go to **/samples/DataChannel** folder and follow the [Install dependencies and run sample projects](/guides/developer-sdk-and-api/sdk-integration/react-native-sdk#install-dependencies-and-run-sample-projects) steps to run the **Play** sample React native app. -* Tap **Publish** button to start publishing in data channel. +![](@site/static/img/image-1654599250441.png) + +* Open the **/samples/DataChannel/Android** folder and provide read, write, and execute permissions to the **gradlew** file. + +```shell +chmod 750 gradlew +``` + +* Go to the **/samples/DataChannel** folder and run the below commands to run the **DataChannel** sample React native app. + +```shell +npm install +npm run android +``` ![](@site/static/img/image-1656673042845.png) -* After that you can start sending messages using send button and also can see the received button, You can also quickly play the stream via https://your\_domain:5443/WebRTCAppEE/player.html and send and receive the data channel messages. +* Click the `Publishing` button on the screen to create the data channel stream on the server. + +* Once the stream is published, the user can start sending messages using the send button and also see the received messages from other users. + +You can quickly play the stream via a sample page and send and receive the data channel messages. + +https://your-domain:5443/WebRTCAppEE/player.html -![](@site/static/img/image-1656673300268.png) \ No newline at end of file +![](@site/static/img/image-1656673300268.png) From ec62a1816692f4b29bbdc0bfd9a3a43f8a748a19 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:22:57 +0530 Subject: [PATCH 17/31] Update react-native-publish-sample.md --- .../react-native-sdk/react-native-publish-sample.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md index 3ddbd790..4ce7fe47 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md @@ -7,11 +7,11 @@ sidebar_position: 5 To build the publishing sample project, follow the below steps. -* Open **/samples/publish/src/App.tsx** file and update **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. +* Open the **/samples/publish/src/App.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. ![](@site/static/img/image-1654599250441.png) -* Open **/samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. +* Open the **/samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. ```shell chmod 750 gradlew From 10b140595e76f69b08794d480e33d06829867b79 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:26:18 +0530 Subject: [PATCH 18/31] Update react-native-publish-sample.md --- .../react-native-sdk/react-native-publish-sample.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md index 4ce7fe47..39859052 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md @@ -24,10 +24,10 @@ npm install npm run android ``` -![](@site/static/img/image-1654599372613.png) - * Click the `Start Publishing` button on the screen to publish the stream on the server. +![](@site/static/img/image-1654599372613.png) + * You can now go to the web panel of Ant Media Server (e.g., http://serverIP:5080) and watch the stream there. You can also quickly play the stream via an embedded player. Check [this document](https://antmedia.io/docs/guides/playing-live-stream/embedded-web-player/) for more details. From 1218901263444a308370aa4c2b16ccd5b291b1d0 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:29:04 +0530 Subject: [PATCH 19/31] Update react-native-play-sample.md --- .../react-native-sdk/react-native-play-sample.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md index 4d0f836f..85acd18b 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md @@ -22,14 +22,12 @@ npm install npm run android ``` -* Before playing, make sure that there is a stream that is already publishing to the server with the same streamId in your **defaultStreamName** variable - -You can quickly publish a WebRTC stream to the Ant Media Server via a sample page. +* Before playing, make sure that there is a stream that is already published to the server with the same streamId in your **defaultStreamName** variable. You can quickly publish a WebRTC stream to the Ant Media Server via a sample page. `https://your_domain:5443/WebRTCAppEE` ![](@site/static/img/image-1654599731503.png) -* Now click ```Start Playing``` button on the screen to play the stream that you are publishing on the server. +* Click the `Start Playing` button on the screen to play the stream that you are publishing on the server. ![](@site/static/img/image-1654600749349.png) From f38efb3a2415842842e142fbc0e590f92f880cf6 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:31:30 +0530 Subject: [PATCH 20/31] Update react-native-p2p-sample.md --- .../react-native-sdk/react-native-p2p-sample.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md index 0c0d5986..0fcd7683 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md @@ -5,17 +5,17 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 7 --- -* Open **/samples/peer/src/Peer.tsx** file and update **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. +* Open the **/samples/peer/src/Peer.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. ![](@site/static/img/image-1654599250441.png) -* Open **/samples/peer/android** folder and provide read, write, and execute permissions to the **gradlew** file. +* Open the **/samples/peer/android** folder and provide read, write, and execute permissions to the **gradlew** file. ```shell chmod 750 gradlew ``` -* Go to **/samples/peer** folder and run the below commands to run the **Publish** sample React native app. +* Go to the **/samples/peer** folder and run the below commands to run the **Publish** sample React native app. ```shell npm install @@ -24,8 +24,8 @@ npm run android ![](@site/static/img/image-1654601111460.png) -* When there is another peer connected to the same streamId via Android, iOS or web, the P2P communication will be established and you can talk to each other. +* When there is another peer connected to the same streamId via Android, iOS, or the web, P2P communication will be established, and you can talk to each other. -You can quickly join as a peer to the same streamId via peer to peer sample page. +You can quickly join as a peer to the same streamId via the peer-to-peer sample page. `https://your_domain:5443/WebRTCAppEE/peer.html` From 135ed109a44cecd0cf0be89059cd64a7cd760be0 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:33:29 +0530 Subject: [PATCH 21/31] Update react-native-data-channel-sample.md --- .../react-native-sdk/react-native-data-channel-sample.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md index 86effca1..733033d7 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md @@ -22,14 +22,14 @@ npm install npm run android ``` -![](@site/static/img/image-1656673042845.png) - * Click the `Publishing` button on the screen to create the data channel stream on the server. +![](@site/static/img/image-1656673042845.png) + * Once the stream is published, the user can start sending messages using the send button and also see the received messages from other users. +![](@site/static/img/image-1656673300268.png) + You can quickly play the stream via a sample page and send and receive the data channel messages. https://your-domain:5443/WebRTCAppEE/player.html - -![](@site/static/img/image-1656673300268.png) From 713fa2263ba4d778100745db7994bab807943b0b Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:45:31 +0530 Subject: [PATCH 22/31] Update react-native-play-sample.md --- .../react-native-sdk/react-native-play-sample.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md index 85acd18b..ad93aadf 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md @@ -26,8 +26,6 @@ npm run android `https://your_domain:5443/WebRTCAppEE` -![](@site/static/img/image-1654599731503.png) - * Click the `Start Playing` button on the screen to play the stream that you are publishing on the server. -![](@site/static/img/image-1654600749349.png) +![](@site/static/img/image-1654599731503.png) From 9ea8d6790c0cd3c37ce100e4d0d50138100ffa4f Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 02:46:40 +0530 Subject: [PATCH 23/31] Update react-native-conference-sample.md --- .../react-native-sdk/react-native-conference-sample.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md index 4de7580f..c89d9fd2 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md @@ -5,17 +5,17 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 8 --- -* Open the **/samples/conference/src/conference.tsx** file and update the **defaultRoomName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. +* Open the **/samples/Conference/src/Conference.tsx** file and update the **defaultRoomName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. ![](@site/static/img/image-1655196972089.png) -* Open the **/samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. +* Open the **/samples/Conference/android** folder and provide read, write, and execute permissions to the **gradlew** file. ```shell chmod 750 gradlew ``` -* Go to the **/samples/conference** folder and run the below commands to run the **Conference** sample React native app. +* Go to the **/samples/Conference** folder and run the below commands to run the **Conference** sample React native app. ```shell npm install From a59d07431e23328cf5b11011500b6fb3b3fe56bc Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 14:15:25 +0530 Subject: [PATCH 24/31] Update react-native-data-channel-sample.md --- .../react-native-sdk/react-native-data-channel-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md index 733033d7..2be0e907 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md @@ -5,7 +5,7 @@ keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Medi sidebar_position: 9 --- -* Open the **/samples/DataChannel/src/App.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. +* Open the **/samples/DataChannel/src/Chat.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. ![](@site/static/img/image-1654599250441.png) From c8339e3a74b0b3fe8d6f07c26b9384affe740d14 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:42:24 +0530 Subject: [PATCH 25/31] Update download-react-native-samples.md --- .../react-native-sdk/download-react-native-samples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md index 0f5a5521..b6c3b9a5 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md @@ -2,7 +2,7 @@ title: Download and install React Native WebRTC sample projects description: Download and install React Native WebRTC sample projects keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 4 +sidebar_position: 3 --- Ant Media WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). From 7a8a7292d6dd99d1d523bcaae0095d8b95363371 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:42:38 +0530 Subject: [PATCH 26/31] Update react-native-publish-sample.md --- .../react-native-sdk/react-native-publish-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md index 39859052..89731a7a 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md @@ -2,7 +2,7 @@ title: Publishing WebRTC stream Sample in React Native description: Publishing WebRTC Live stream Using React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 5 +sidebar_position: 4 --- To build the publishing sample project, follow the below steps. From af4659524953c4afdaf4882723aa5d8f2fa3a683 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:42:47 +0530 Subject: [PATCH 27/31] Update react-native-play-sample.md --- .../react-native-sdk/react-native-play-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md index ad93aadf..32055e15 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md @@ -2,7 +2,7 @@ title: Playing WebRTC stream sample in React Native description: Playing WebRTC Live Stream Sample Using React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 6 +sidebar_position: 5 --- * Open the **/samples/play/src/Play.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with the server domain or IP address. From e0780b9b1f1aeebe33e60da1fa37da4291bd1ce8 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:43:04 +0530 Subject: [PATCH 28/31] Update react-native-p2p-sample.md --- .../sdk-integration/react-native-sdk/react-native-p2p-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md index 0fcd7683..2c65081c 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md @@ -2,7 +2,7 @@ title: P2P Communication Sample in React Native description: P2P Communication Sample Using React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 7 +sidebar_position: 6 --- * Open the **/samples/peer/src/Peer.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. From 9067c8e899f22ec20abaa1ade763a82d75fcf391 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:43:17 +0530 Subject: [PATCH 29/31] Update react-native-conference-sample.md --- .../react-native-sdk/react-native-conference-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md index c89d9fd2..c17bc962 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md @@ -2,7 +2,7 @@ title: WebRTC Conference in React Native description: WebRTC Conference Using React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 8 +sidebar_position: 7 --- * Open the **/samples/Conference/src/Conference.tsx** file and update the **defaultRoomName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. From 91303d6726bc802467c6a98610524bb74260a419 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:43:33 +0530 Subject: [PATCH 30/31] Update react-native-data-channel-sample.md --- .../react-native-sdk/react-native-data-channel-sample.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md index 2be0e907..c074cc94 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md @@ -2,7 +2,7 @@ title: Data Channel Sample for React Native description: Data Channel Sample for React Native SDK keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 9 +sidebar_position: 8 --- * Open the **/samples/DataChannel/src/Chat.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. From 09b5044d62d9696251c68a3fcde421c489457bd7 Mon Sep 17 00:00:00 2001 From: yashtandon113 <82374739+yashtandon113@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:44:03 +0530 Subject: [PATCH 31/31] Update react-native-sdk-usage.md --- .../react-native-sdk/react-native-sdk-usage.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md index 6973d237..fdff7349 100644 --- a/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md +++ b/docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/react-native-sdk-usage.md @@ -1,8 +1,8 @@ --- -title: React Native SDK Usage +title: React Native SDK Reference description: React Native SDK Usage keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] -sidebar_position: 3 +sidebar_position: 9 --- Before moving forward with using WebRTC React Native SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general.