Just some tweaks + updated dependencies

Author: 8BallBomBom

.vitepress/config.js

@@ -141,7 +141,7 @@ export default {
 					collapsible: true,
 					items: [
 						{
-							text: 'Android 6+',
+							text: 'Android 7+',
 							link: '/guides/extra-steps/android'
 						},
 						{

.vitepress/theme/styles.css

@@ -3,29 +3,27 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-	--primary: #ed8a80;                /* congo pink */
-	--primary-content: #3C3C3B;        /* charcoal */
-	--neutral: #27464F;                /* midnight green */
-	--neutral-content: #EDEDED;        /* cloud */
-	--secondary: #EDEDED;              /* charcoal */
-	--secondary-content: #3C3C3B;      /* cloud */
-	--accent: #3C3C3B;                 /* charcoal */
-	--accent-content: #EDEDED;         /* cloud */
+/*
+	--primary: #ed8a80;
+	--primary-content: #3C3C3B;
+	--neutral: #27464F;
+	--neutral-content: #EDEDED;
+	--secondary: #EDEDED;
+	--secondary-content: #3C3C3B;
+	--accent: #3C3C3B;
+	--accent-content: #EDEDED;
 	--btn-focus-scale: 1.05;
 
 	--vp-c-accent: rgb(218, 180, 11);
 
-/*
 	--vp-c-brand: var(--primary);
 	--vp-c-brand-light: #FFA69D;
 	--vp-c-brand-lighter: #FA978D;
 	--vp-c-brand-dark: #e47f75;
 	--vp-c-brand-darker: #db6d62;
-*/
 
 	--vp-code-block-bg: rgba(125, 125, 125, 0.04);
 
-/*
 	--vp-c-green-light: rgb(18, 181, 157);
 	--vp-custom-block-tip-border: rgba(18, 181, 157, 0.5);
 	--vp-custom-block-tip-bg: rgba(18, 181, 157, 0.1);

package.json

@@ -9,7 +9,7 @@
 		"serve": "vitepress serve"
 	},
 	"devDependencies": {
-		"vitepress": "1.0.0-alpha.71",
-		"vue": "^3.2.47"
+		"vitepress": "1.0.0-beta.5",
+		"vue": "^3.3.4"
 	}
 }

src/guides/basic-usage.md

@@ -6,7 +6,7 @@ Most of the included functionality is similar to how you would deal with WebRTC
 
 If you see functions that are listed in the document above but not listed below then they are likely not supported by this module yet and will most likely be supported in the near future, we're open to contributions.
 
-```javascript
+```typescript
 import {
 	RTCIceCandidate,
 	RTCPeerConnection,
@@ -31,7 +31,7 @@ Some devices might not have more than 1 camera. The following will allow you to
 
 You can of-course use `enumerateDevices` to list other media device information too.  
 
-```javascript
+```typescript
 let cameraCount = 0;
 
 try {
@@ -52,7 +52,7 @@ try {
 By default we're sending both audio and video.  
 This will allow us to toggle the video stream during a call.  
 
-```javascript
+```typescript
 let mediaConstraints = {
 	audio: true,
 	video: {
@@ -71,7 +71,7 @@ Fill me in.
 If you only want a voice call then you can flip `isVoiceOnly` over to `true`.  
 You can then cycle and enable or disable the video tracks on demand during a call.  
 
-```javascript
+```typescript
 let localMediaStream;
 let isVoiceOnly = false;
 
@@ -95,7 +95,7 @@ This will allow capturing the device screen, requests permission on execution.
 Make sure to follow [these](/guides/extra-steps/android#screen-capture-support-android-10) extra steps for Android and [these](/guides/extra-steps/ios#screen-capture-support) for iOS.  
 Otherwise you'll experience blank streams.
 
-```javascript
+```typescript
 try {
 	const mediaStream = await mediaDevices.getDisplayMedia();
 
@@ -110,7 +110,7 @@ try {
 Cycling all of the tracks and stopping them is more than enough to clean up after a call has finished.
 You won't usually need to do this for remote tracks, only local.  
 
-```javascript
+```typescript
 localMediaStream.getTracks().map(
 	track => track.stop()
 );
@@ -123,7 +123,7 @@ localMediaStream = null;
 We're only specifying a STUN server but you should also be using a TURN server.  
 Check [this guide](/guides/improving-call-reliability) if you'd like some advice on how to improve call reliability.
 
-```javascript
+```typescript
 let peerConstraints = {
 	iceServers: [
 		{
@@ -138,7 +138,7 @@ let peerConstraints = {
 Here we're creating a peer connection required to create a call.  
 You can also overwrite hook functions instead of using event listeners.  
 
-```javascript
+```typescript
 let peerConnection = new RTCPeerConnection( peerConstraints );
 peerConnection.addEventListener( 'connectionstatechange', event => {} );
 peerConnection.addEventListener( 'icecandidate', event => {} );
@@ -156,7 +156,7 @@ peerConnection.addEventListener( 'removestream', event => {} );
 When ending a call you should always make sure to dispose of everything ready for another call.
 The following should dispose of everything.  
 
-```javascript
+```typescript
 peerConnection._unregisterEvents();
 peerConnection.close();
 peerConnection = null;
@@ -167,7 +167,7 @@ peerConnection = null;
 After using one of the media functions above you can then add the media stream to the peer.
 The negotiation needed event will be triggered on the peer afterwords.  
 
-```javascript
+```typescript
 peerConnection.addStream( localMediaStream );
 ```
 
@@ -176,7 +176,7 @@ peerConnection.addStream( localMediaStream );
 Usually the call initialiser would create the data channel but it can be done on both sides.  
 The negotiation needed event will be triggered on the peer connection afterwords.  
 
-```javascript
+```typescript
 let datachannel = peerConnection.createDataChannel( 'my_channel' );
 datachannel.addEventListener( 'open', event => {} );
 datachannel.addEventListener( 'close', event => {} );
@@ -188,7 +188,7 @@ datachannel.addEventListener( 'message', message => {} );
 The following event is for the second client, not the client which created the data channel.  
 Unless of-course you want both sides to create separate data channels.  
 
-```javascript
+```typescript
 peerConnection.addEventListener( 'datachannel', event => {
 	let datachannel = event.channel;
 
@@ -203,7 +203,7 @@ You can send a range of different data types over data channels, but for this ex
 
 Bare in mind there are limits so sending large amounts of data isn't usually advised.  
 
-```javascript
+```typescript
 datachannel.send( 'Hey There!' );
 ```
 
@@ -213,7 +213,7 @@ When the peer connection is destroyed everything attached should also be destroy
 
 But as good practice, you can always make sure they are closed.  
 
-```javascript
+```typescript
 datachannel.close();
 datachannel = null;
 ```
@@ -224,7 +224,7 @@ As mentioned above we're going for the approach of offering both video and voice
 
 That will allow you to enable and disable video streams while a call is active.  
 
-```javascript
+```typescript
 let sessionConstraints = {
 	mandatory: {
 		OfferToReceiveAudio: true,
@@ -241,7 +241,7 @@ Typically inside the `negotiationneeded` event.
 
 ICE Candidate creation and gathering will start as soon as an offer has been created.  
 
-```javascript
+```typescript
 try {
 	const offerDescription = await peerConnection.createOffer( sessionConstraints );
 	await peerConnection.setLocalDescription( offerDescription );
@@ -257,7 +257,7 @@ try {
 All parties will need to ensure they are handling ICE Candidates correctly.  
 Otherwise the offer and answer handshake stages will go a little wonky.  
 
-```javascript
+```typescript
 try {
 	// Use the received offerDescription
 	const offerDescription = new RTCSessionDescription( offerDescription );
@@ -278,7 +278,7 @@ During an active call you might want to mute your microphone.
 Easy to accomplish by flipping the track enabled value to `false`.
 Also possible on remote tracks.  
 
-```javascript
+```typescript
 let isMuted = false;
 
 try {
@@ -296,7 +296,7 @@ try {
 Naturally we assume you'll be using the front camera by default when starting a call.  
 So we set `isFrontCam` as `true` and let the value flip on execution.  
 
-```javascript
+```typescript
 let isFrontCam = true;
 
 try {
@@ -317,7 +317,7 @@ try {
 Once you've gained a local and/or remote stream then rendering it is as follows.  
 Don't forget, the user facing camera is usually mirrored.  
 
-```javascript
+```typescript
 <RTCView
 	mirror={true}
 	objectFit={'cover'}

src/guides/extra-steps/android.md

@@ -1,4 +1,4 @@
-# Android 6+
+# Android 7+
 
 Starting with React Native 0.60 due to a new auto linking feature you no longer need to follow manual linking steps but you will need to follow the other steps below if you plan on releasing your app to production.  
 
@@ -68,7 +68,7 @@ You will be prompted for permissions automatically each time you want to start s
 
 A notification channel is also required and created.  
 
-```javascript
+```typescript
 import notifee, { AndroidImportance } from '@notifee/react-native';
 
 try {
@@ -97,7 +97,7 @@ Once screen capturing has finished you should then stop the foreground service.
 Usually you'd run a notification cancellation function but as there is a service involved.
 Instead you should run the following to get the job done.
 
-```javascript
+```typescript
 try {
 	await notifee.stopForegroundService();
 } catch( err ) {
@@ -108,7 +108,7 @@ try {
 Lastly you need to add this to your projects main `index.js` file.  
 Otherwise you will receive an error relating to the service not being registered.
 
-```javascript
+```typescript
 notifee.registerForegroundService( notification => {
 	return new Promise( () => {
 		// Handle Notification

src/guides/extra-steps/react-native-web.md

@@ -6,19 +6,19 @@ That will allow you to use ["almost"](https://github.com/react-native-webrtc/rea
 
 ## Registering Globals
 
-```javascript
+```typescript
 import { registerGlobals } from 'react-native-webrtc';
 ```
 
 You'll only really need to use this function if you are mixing project development with libraries that use browser based WebRTC functions. Also applies if you are making your project compatible with react-native-web.  
 
-```javascript
+```typescript
 registerGlobals();
 ```
 
 Here is a list of everything that will be linked up.  
 
-```javascript
+```typescript
 navigator.mediaDevices.getUserMedia();
 navigator.mediaDevices.getDisplayMedia();
 navigator.mediaDevices.enumerateDevices();

src/guides/getting-a-call-connected.md

@@ -21,7 +21,7 @@ If you want to start the call as voice only then you can flip the boolean but th
 **Don't forget, you will be prompted to accept permissions for the camera and microphone.**  
 **Usually it is better to request permissions at an earlier stage to improve the user experience.**  
 
-```javascript
+```typescript
 let mediaConstraints = {
 	audio: true,
 	video: {
@@ -63,7 +63,7 @@ In some instances you might find that the `negotiationneeded` event can fire mul
 
 The `iceServers` below include one of Googles public STUN servers, you should also provide your own TURN server alongside a STUN server to ensure that connections can actually be established between callers.  
 
-```javascript
+```typescript
 let peerConstraints = {
 	iceServers: [
 		{
@@ -150,7 +150,7 @@ But do intend to provide an example app along with signalling app in the near fu
 We've added the media stream to the peer connection and got most of the basic events hooked up.
 You can now start creating an offer which then needs sending off to the other call participant.  
 
-```javascript
+```typescript
 let sessionConstraints = {
 	mandatory: {
 		OfferToReceiveAudio: true,
@@ -180,7 +180,7 @@ An easy solution is to hold onto some of the candidates and process them immedia
 
 We will process any leftover candidates in the next step.  
 
-```javascript
+```typescript
 let remoteCandidates = [];
 
 function handleRemoteCandidate( iceCandidate ) {
@@ -209,7 +209,7 @@ Set the offer as the remote description, create an answer and set the local desc
 You can now process any candidates if any got caught in-between the handshake process.  
 Lastly you need to send the answer back to the caller who gave the offer.  
 
-```javascript
+```typescript
 try {
 	// Use the received offerDescription
 	const offerDescription = new RTCSessionDescription( offerDescription );
@@ -235,7 +235,7 @@ Then the waiting game begins and the connection is a success or a failure.
 Hopefully the whole process wasn't too complex to understand.  
 But it definitely can get more complex when involving more participants.  
 
-```javascript
+```typescript
 try {
 	// Use the received answerDescription
 	const answerDescription = new RTCSessionDescription( answerDescription );

src/guides/misc/faqs.md

@@ -1,3 +1,11 @@
 # Frequently Asked Questions
 
-To be filled in soon.
+To be filled in soon.  
+Just some notes so far.
+
+## Screen Capture
+**Why can't i see my own stream?**  
+
+If you are trying to display your own screen capture then the chances are you won't see anything.
+That is an artificial limitation in place which prevents the infinite mirror effect.
+The screen capture should display correctly for whoever you are streaming to.