"setBackgroundImage()" & "enableEffect()" functions is not present in "@antmedia/webrtc_adaptor" library in angular( version 13)

[swatisinha-mis]

I am facing problem for publishing the stream with virtual background Image and also with enabling effect on video. But When I am trying to run "https://github.com/ant-media/StreamApp/blob/master/src/main/webapp/publish_webrtc_virtual_background.html" code sample in my project, I received "Cannot read properties of undefined (reading 'setBackgroundImage')" & "Cannot read properties of undefined (reading 'enableEffect')" error. Please help me to resolve this problem.

Thankyou

[USAMAWIZARD]

Can you provide some code snippets how are you trying to call those functions.

[swatisinha-mis]

// HTML Code

    </p>
  </div>
  <button (click)="startStreaming()" class="btn btn-success me-2">Start</button>
  <button (click)="StopPublishing()" class="btn btn-danger">End</button>
</div>

<div class="col-sm-12 text-center" id="virtualBackgrounds">
  <h3>Select a virtual background Image</h3>
  <div class="d-flex" id="virtualbackgroundimages">
    <img src="../../../assets/images/test/noeffect-background.png" id="noeffect"
      class="backgroundImages selected" />
    <img src="../../../assets/images/test/blur-background.png" id="blur" class="backgroundImages " />
    <img src="../../../assets/images/test/virtual-background.png" id="antMediaBackground"
      class="backgroundImages " />
    <img src="../../../assets/images/test/cloud-background.png" class="backgroundImages" />

    <img src="../../../assets/images/test/bgt1.jpg" class="backgroundImages" />
    <img src="../../../assets/images/test/bgt2.jpg" class="backgroundImages" />
    <img src="../../../assets/images/test/bgt3.jpg" class="backgroundImages" />
    <img src="../../../assets/images/test/bgt4.png" class="backgroundImages" />
  </div>

</div>

//Typescript code

import { WebRTCAdaptor } from '@antmedia/webrtc_adaptor';
import { VideoEffect } from '@antmedia/webrtc_adaptor';
declare var $: any;

title = 'antmedialivetest';

/* antmedia variable */
//webrtc
webrtcAdaptor!: any;
token: any;
pc_config: any = null;
sdpConstraintsPublish: any;
mediaConstraintsPublish: any;
websocketURL!: string;
streamId: any;
infodata: string = '';
messagedata: any;
isSend: boolean = false;

canvas: any;
video: any;
localCameraView: any;

constructor() {
this.streamId = "aHtrfu9eFupp1674472507702";
this.webrtcAdaptor = null;

// ant media     
this.token = "";

this.sdpConstraintsPublish = {
  OfferToReceiveAudio: false,
  OfferToReceiveVideo: false
};

this.mediaConstraintsPublish = {
  video: true,
  audio: true
};

}

goLive() {
this.isSend = true;
this.streamId = "aHtrfu9eFupp1674472507702";
this.PublishStreaming(this.streamId);
}

initWebrtc() {
this.webrtcAdaptor = new WebRTCAdaptor({
websocket_url: this.websocketURL,
mediaConstraints: this.mediaConstraintsPublish,
peerconnection_config: this.pc_config,
sdp_constraints: this.sdpConstraintsPublish,
localVideoId: "localVideo",
// localStream: localStream,
// remoteVideoId: "localVideo",
bandwidth: 900,
debug: true,
isPlayMode: true,
dataChannelEnabled: true,
callback: (info: any, description: any) => {
this.infodata = info;
if (info == "initialized") {
} else if (info == "pong") {
} else if (info == "publish_started") {
console.log("publish started");
} else if (info == "publish_finished") {
console.log("publish finished");
} else if (info == "data_received") {
console.log(description);
} else if (info == "available_devices") {
} else if (info == "closed") {
if (typeof description != "undefined") {
this.webrtcAdaptor = null;
this.initWebrtc();
}
}
},
callbackError: (error: any, message: any) => {
console.log("error callback: " + JSON.stringify(error));
}
});
}

ngAfterViewInit(): void {
this.localCameraView = null;
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream: any) => {
this.localCameraView = document.getElementById("localVideo");
this.localCameraView.srcObject = stream;
this.localCameraView.play();
this.video = document.querySelector('video#localVideo');
this.initWebrtc();
});
}

PublishStreaming(streamId: any) {
this.webrtcAdaptor.publish(streamId, "", "", "", "", "", "");
}

startStreaming() {
this.webrtcAdaptor.publish(this.streamId, "", "", "", "", "", "");
}

StopPublishing() {
this.isSend = false;
this.webrtcAdaptor.stop(this.streamId);
}

ngOnInit(): void {
$(".backgroundImages").click(this.enableVirtualBackground);
}

enableVirtualBackground() {
$(".backgroundImages").removeClass("selected");
var effectName;
if ($(this).attr("id") == "blur") {
effectName = VideoEffect.BLUR_BACKGROUND;
}
else if ($(this).attr("id") == "noeffect") {
effectName = VideoEffect.NO_EFFECT;
}
else {
effectName = VideoEffect.VIRTUAL_BACKGROUND;
this.webrtcAdaptor.setBackgroundImage(this);
}

this.webrtcAdaptor.enableEffect(effectName).then(() => {
  // console.log("Effect: "+ effectName+" is enabled");
}).catch((err: any) => {
  // console.error("Effect: "+ effectName+" is not enabled. Error is " + err);
  console.error(err);
});
$(this).addClass("selected");

}

[USAMAWIZARD]

i don't have much idea about angular is it possible for you to share a small (minimal )project in which this problem is reproducible.

[rahul78275]

Hello @swatisinha-mis, I can try in weekend if i get the component files (.ts, style and html). Also share the package.json file.

[rahul78275]

[swatisinha-mis]

is it in angular? Can you share your code to my mail id "[email protected]".

[swatisinha-mis]

i don't have much idea about angular is it possible for you to share a small (minimal )project in which this problem is reproducible.

Hello,
"https://drive.google.com/file/d/1kFYv0CxK4KMO-A63SUC6xhqdiuPpavLv/view?usp=sharing" is my sample project link, please check this one.

[rahul7827]

is it in angular? Can you share your code to my mail id "[email protected]".

Yes, It is angular.

// Problem is here
$(".backgroundImages").click(this.enableVirtualBackground);

// In template you can do like this
<img src="../../../assets/images/test/noeffect-background.png" id="noeffect" class="backgroundImages selected" (click)="enableVirtualBackground('noeffect', $event)" />

//update your ngAfterViewInit hook like this, no need to use navigator.mediaDevices.getUserMedia({ audio: true, video: true }),

ngAfterViewInit(): void {
    this.initWebrtc();
}

[USAMAWIZARD]

Thanks @rahul7827 for help

[swatisinha-mis]

is it in angular? Can you share your code to my mail id "[email protected]".

Yes, It is angular.

// Problem is here $(".backgroundImages").click(this.enableVirtualBackground);

// In template you can do like this <img src="../../../assets/images/test/noeffect-background.png" id="noeffect" class="backgroundImages selected" (click)="enableVirtualBackground('noeffect', $event)" />

//update your ngAfterViewInit hook like this, no need to use navigator.mediaDevices.getUserMedia({ audio: true, video: true }),

ngAfterViewInit(): void {
    this.initWebrtc();
}

I still facing this problem see the attached screenshot below.

can you please share your component files.

[rahul78275]

Sent.

[yogeshJain0727]

@rahul78275 could you please send the entire project so that we can check what may be causing issues with our code?

[USAMAWIZARD]

@yogeshJain0727 can you please check if you are using same webrtcadapter as rahul
Can you please try with this.
npm i @antmedia/[email protected]

[rahul7827]

@USAMAWIZARD I am using the same webrtc adaptor as swati sent to me.

[rahul78275]

Hi @yogeshJain0727

I have shared the entire project on mail. You can check it. BTW, I guess issue is not related to source code. This may be dependency issue.
Also do share the error message which we get during npm start, this will help us to understand the issue in detail.

[rahul7827]

@rahul78275 could you please send the entire project so that we can check what may be causing issues with our code?

I had used the same code which swati sent to me (even node_modules files are same). I also tried to regenerate the issue by creating fresh npm i. I am away from my system. Will send you the complete project today night.

Can you please try checking this project on another machine.

[yogeshJain0727]

ok