How do i subscribe live stream video in agora? - html

Question

I am setting up agora SDK to my angular project and am getting the following error.
Code:
This is my sample code and is calling the startCall method in ngOnInit. I have a div element with id.
startCall() {
this.agoraService.client.join(null, '1000', null, (uid) => {
this.localStream = this.agoraService.createStream(uid, true, null, null, true, false);
this.localStream.setVideoProfile('720p_3');
this.subscribeToStreams();
});
}
private subscribeToStreams() {
this.localStream.on("accessAllowed", () => {
console.log("accessAllowed");
});
// The user has denied access to the camera and mic.
this.localStream.on("accessDenied", () => {
console.log("accessDenied");
});
this.localStream.init(() => {
console.log("getUserMedia successfully");
this.localStream.play('agora_local');
this.agoraService.client.publish(this.localStream, function (err) {
console.log("Publish local stream error: " + err);
});
this.agoraService.client.on('stream-published', function (evt) {
console.log("Publish local stream successfully");
});
}, function (err) {
console.log("getUserMedia failed", err);
});
// Add
this.agoraService.client.on('error', (err) => {
console.log("Got error msg:", err.reason);
if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
this.agoraService.client.renewChannelKey("", () => {
console.log("Renew channel key successfully");
}, (err) => {
console.log("Renew channel key failed: ", err);
});
}
});
// Add
this.agoraService.client.on('stream-added', (evt) => {
const stream = evt.stream;
this.agoraService.client.subscribe(stream, (err) => {
console.log("Subscribe stream failed", err);
});
});
// Add
this.agoraService.client.on('stream-subscribed', (evt) => {
const stream = evt.stream;
if (!this.remoteCalls.includes(`agora_remote${stream.getId()}`)) this.remoteCalls.push(`agora_remote${stream.getId()}`);
setTimeout(() => stream.play(`agora_remote${stream.getId()}`), 2000);
});
// Add
this.agoraService.client.on('stream-removed', (evt) => {
const stream = evt.stream;
stream.stop();
this.remoteCalls = this.remoteCalls.filter(call => call !== `#agora_remote${stream.getId()}`);
console.log(`Remote stream is removed ${stream.getId()}`);
});
// Add
this.agoraService.client.on('peer-leave', (evt) => {
const stream = evt.stream;
if (stream) {
stream.stop();
this.remoteCalls = this.remoteCalls.filter(call => call === `#agora_remote${stream.getId()}`);
console.log(`${evt.uid} left from this channel`);
}
});
}
I have a div element with id.
Uncaught (in promise) TypeError: Failed to execute 'getStats' on 'RTCPeerConnection': The callback provided as parameter 1 is not a function.
at Object.C.t.getStats (AgoraRTCSDK.min.js:2)
at AgoraRTCSDK.min.js:2
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
at ZoneTask.invoke (zone.js:487)
at timer (zone.js:2281)
Does anyone face the same issue? Can anyone help me with this?
Thanks.
I have followed this link
https://docs.agora.io/en/Interactive%20Broadcast/web_prepare?platform=Web
Steps I have done,enter code here
1. Import the Agora Web SDK to Your Project
2. Create and Initialize a Client
3. Join a Channel
4. And finally, Subscribe to the remote stream

Answer 1

When testing Agora's WebSDK (or any WebRTC application) make sure that you are using an https connection when trying to run your code as most browsers do not allow getMedia access without an https connection.
There are a number of solutions for using https connections on your local machine. I use the ngrok tool to easily run https connections on my local machine