agora

import styles from '../styles/Home.module.css'
import { $P } from "pipstream";
// import AgoraRTC from 'agora-rtc-sdk'
import React, { useState, useEffect } from 'react';


export default function Home() {


  const options = {
		appid : '81d99d5bc7ad4117a6023f4128abdb1f',
		token : null,
		channel : 'video-chat',
    uid: '123456',
		
	}



  useEffect(() => {
    
    $P("document").init(options.appid, function (response) {
      console.log("success");
      console.log({response});
    
    });
    
    $P("#startlink").cameraTrigger();
    
    $P("#myvideo").localVideoStream(function () {
      $P.getDevices(); // this method is for listing all available video/audio devices in the system.
    });
    
    $P("#myvideo").goLive();

    //remote stream

    $P("#remotevideo").remoteVideoStream(function (status) {
      /* Callback when the stream begins */
      console.log({remoteStatus:status});
    });
  

    // $P("#remotevideo").onStreamRemoved(function () {
    //   /* callback function */
    // });

  })


const joinChannel = () =>{}

  
  return (
   <div className={styles.container}>
     <div className={styles.hideButton}>
      <div className={styles.buttonContainer}>
    
        <div className={styles.startButtonContainer}>

        <a href="#" id="startlink" 
        className={styles.startButton}
        onClick={joinChannel}
        >JOIN</a>

        </div>

     </div>
   </div>
   <div>
      <video width="500" id="myvideo" muted></video>
      <video width="500" id="remotevideo" muted></video>

   </div>
   </div>


  )


}