Skip to content

Instantly share code, notes, and snippets.

View EkaanshArora's full-sized avatar
🎨

Ekaansh Arora EkaanshArora

🎨
173 followers · 69 following
View GitHub Profile
@EkaanshArora
EkaanshArora / Web_React_Advanced.tsx
Last active October 26, 2022 09:29
import {RtcConfigure, GridVideo, RtmConfigure, TracksConfigure, RemoteMutePopUp, LocalControls } from "agora-react-uikit";
import { LocalUserContext, PropsContext } from "agora-react-uikit";
const App = () => {
...
return (
<>
<PropsContext.Provider
value={{
rtcProps: {
@EkaanshArora
EkaanshArora / ReactNative_Advanced.tsx
Last active October 26, 2022 09:29
Video UI Kit Base Snippets
import {RtcConfigure, GridVideo, RtmConfigure, PopUp} from "agora-rn-uikit/Components";
import { LocalUserContext, PropsContext } from "agora-rn-uikit/Contexts";
const App = () => {
...
return (
<PropsContext.Provider
value={{
rtcProps: {
appId: "<Agora App ID>",
@EkaanshArora
EkaanshArora / app.tsx
Created February 4, 2022 11:51
audio effect web sdk agora
const media = await navigator.mediaDevices.getUserMedia({ video: false, audio: true })
let audioStream = modifyGain(media, 100)
let audioTrack = audioStream.getAudioTracks()[0]
rtc.current.localAudioTrack = AgoraRTC.createCustomAudioTrack({ mediaStreamTrack: audioTrack });
// you could instead use the panner node:
const modifyGain = (stream, gainValue) => {
var ctx = new AudioContext();
var src = ctx.createMediaStreamSource(stream);
var dst = ctx.createMediaStreamDestination();
@EkaanshArora
EkaanshArora / App.tsx
Created December 8, 2021 18:52
...
const styles = {
container: { width: '100vw', height: '100vh', display: 'flex', flex: 1, backgroundColor: '#007bff22'},
heading: { textAlign: 'center' as const, marginBottom: 0 },
videoContainer: { display: 'flex', flexDirection: 'column', flex: 1 } as React.CSSProperties,
nav: { display: 'flex', justifyContent: 'space-around' },
btn: { backgroundColor: '#007bff', cursor: 'pointer', borderRadius: 5, padding: 5, color: '#ffffff', fontSize: 20 },
}
export default App
@EkaanshArora
EkaanshArora / App.tsx
Last active December 8, 2021 18:58
...
return (
<div style={styles.container}>
{videocall ? (<>
<div style={styles.nav}>
<p style={{ fontSize: 20, width: 200 }}>You're {isHost ? 'a host' : 'an audience'}</p>
<p style={styles.btn} onClick={() => setRole(!isHost)}>Change Role</p>
<p style={styles.btn} onClick={() => setPinned(!isPinned)}>Change Layout</p>
</div>
<AgoraUIKit
@EkaanshArora
EkaanshArora / App.tsx
Last active December 8, 2021 18:55
...
const props: PropsInterface = {
rtcProps: {
appId: '<Your Agora App ID>',
channel: 'test',
role: isHost ? 'host' : 'audience',
layout: isPinned ? layout.pin : layout.grid,
},
callbacks: {
EndCall: () => setVideocall(false)
@EkaanshArora
EkaanshArora / App.tsx
Last active December 8, 2021 18:55
Agora React Web UIKit Example - 3
...
import AgoraUIKit, { PropsInterface, layout } from 'agora-react-uikit'
const App: React.FunctionComponent = () => {
const [videocall, setVideocall] = useState(true)
const [isHost, setHost] = useState(false)
const [isPinned, setPinned] = useState(false)
...
@EkaanshArora
EkaanshArora / App.tsx
Created December 8, 2021 18:40
Agora React Web UIKit Example - 2
...
return (
<div style={styles.container}>
{videocall ? (
<AgoraUIKit
rtcProps={props.rtcProps}
callbacks={props.callbacks} />
) : (
null
)}
@EkaanshArora
EkaanshArora / App.tsx
Last active December 9, 2021 17:16
Agora React Web UIKit Example - 1
import React, { useState } from 'react'
import AgoraUIKit, { PropsInterface } from 'agora-react-uikit'
const App: React.FunctionComponent = () => {
const [videocall, setVideocall] = useState(true)
const props: PropsInterface = {
rtcProps: {
appId: '<Your Agora App ID>',
channel: 'test',
token: null, // pass in channel token if the app is in secure mode
@EkaanshArora
EkaanshArora / index.html
Created December 6, 2021 12:10
Agora UIKit web-component demo
<body>
<script src="agora-uikit.js"></script>
<agora-react-web-uikit
style="width: 100%; height: 100vh; display: flex;"
appId='<YourAgoraAppIDHere>'
channel='test'
/>
</body>