-
-
Save USAMAWIZARD/4b23018d184418f892fa18918686b37e to your computer and use it in GitHub Desktop.
DeepAR antmedia example https://antmedia.io/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/deepar@4.0.3/js/deepar.js"></script> | |
| </head> | |
| <body> | |
| <video id="myvideo" autoplay muted></video> | |
| Select Effects : | |
| <select id="select_effect"> | |
| <option>No Effect</option> | |
| </select> | |
| <script type="module"> | |
| import { WebRTCAdaptor } from './js/webrtc_adaptor.js'; | |
| import {VideoEffect} from './js/video-effect.js'; | |
| VideoEffect.DEEP_AR_EFFECTS_URL="/WebRTCAppEE/js/external/deepar-effects/"; | |
| const webRTCAdaptor = new WebRTCAdaptor({ | |
| websocket_url: "ws://localhost:5080/WebRTCAppEE/websocket", | |
| mediaConstraints: { | |
| video: true, | |
| audio: true, | |
| }, | |
| peerconnection_config: { | |
| 'iceServers': [{'urls': 'stun:stun1.l.google.com:19302'}] | |
| }, | |
| sdp_constraints: { | |
| OfferToReceiveAudio : false, | |
| OfferToReceiveVideo : false, | |
| }, | |
| localVideoId: "myvideo", // <video id="id-of-video-element" autoplay muted></video> | |
| bandwidth: 25000, // default is 900 kbps, string can be 'unlimited' | |
| dataChannelEnabled: true|false, // enable or disable data channel | |
| callback: (info, obj) => { | |
| if(info=="initialized"){ | |
| webRTCAdaptor.publish("stream1", null, null, null, "abcd"); | |
| } | |
| }, // check info callbacks bellow | |
| callbackError: function(error, message) { | |
| }, // check error callbacks bellow | |
| }); | |
| let select_effect = document.getElementById("select_effect"); | |
| let APIKey = "Enter Your API KEY HERE"; | |
| window.a=APIKey; | |
| var effectName = VideoEffect.NO_EFFECT; | |
| for (let i = 0; i < VideoEffect.deepARModelList.length; i++) { | |
| let option = document.createElement("option"); | |
| option.value = VideoEffect.deepARModelList[i]; | |
| option.text = VideoEffect.deepARModelList[i]; | |
| select_effect.appendChild(option); | |
| } | |
| select_effect.onchange = () => { | |
| let selected_option = select_effect.options[select_effect.selectedIndex].text; | |
| if( selected_option === "No Effect"){ | |
| effectName = VideoEffect.NO_EFFECT; | |
| } else { | |
| effectName = VideoEffect.DEEPAR; | |
| } | |
| console.log("effect changed", selected_option); | |
| webRTCAdaptor.enableEffect(effectName, APIKey, selected_option).then(() => { | |
| console.log("Effect: "+ effectName+" is enabled"); | |
| }).catch(err => { | |
| console.error("Effect: "+ effectName+" is not enabled. Error is " + err); | |
| alert(err.name); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment