This repository has been archived by the owner on Oct 14, 2022. It is now read-only.
"export 'default' (imported as 'AgoraRTC') was not found in 'agora-rtc-sdk-ng' #143
Comments
|
how do you see the error? could you pls briefly describe how to reproduce this. |
|
Hi sure, I was following the documentation here: https://docs.agora.io/en/live-streaming/start_live_web_ng?platform=Web It mentioned the following: Method 1: Through npmThis method requires npm, see Install npm for details. Run the following command to install the SDK: npm install agora-rtc-sdk-ng --saveAdd the following code in the JavaScript code in your project to import the module: import AgoraRTC from "agora-rtc-sdk-ng"
const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });But that did not work ☝️ I got this error: I had to do the following: import "agora-rtc-sdk-ng"and the access it like: rtc.client = global.AgoraRTC.createClient({ mode: "live", codec: "vp8" });following the advice on slack from Gustavo Leon. https://agoraiodev.slack.com/archives/CPQP4GMJ9/p1618411117336400 and that did work |
|
try this. |
|
That did not work either. |
|
could you pls try the demo here |
|
The app works. Pasting the token app from my account shows a local track with my camera video. I did the following to run the app. Could it be that the issue is with the JS version and not with the TypeScript version? |
|
could you pls share your project? |
|
It is a brand new rails application with stimulus js that I created to start testing the service. The packaje.json is the following: {
"name": "shopify-now",
"private": true,
"dependencies": {
"@hotwired/turbo-rails": "^7.0.0-beta.5",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.2.1",
"agora-rtc-sdk-ng": "^4.4.0",
"stimulus": "^2.0.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.2"
}
}and a sample stimulus js controller for the host: import { Controller } from "stimulus"
import "agora-rtc-sdk-ng"
export default class extends Controller {
static values = { token: String, userId: String }
connect() {
this.element.textContent = "Hello World!"
}
initialize(){
var rtc = {
// For the local client.
client: null,
// For the local audio and video tracks.
localAudioTrack: null,
localVideoTrack: null,
};
var options = {
// Pass your app ID here.
appId: "XXXXXXXXXXXXx",
// Set the channel name.
channel: "XXXXXXXX",
// Pass a token if your project enables the App Certificate.
token: this.tokenValue,
// Set the user role in the channel.
role: "host"
};
async function startBasicCall(userId) {
/**
* Put the following code snippets here.
*/
rtc.client = global.AgoraRTC.createClient({ mode: "live", codec: "vp8" });
rtc.client.setClientRole(options.role);
const uid = await rtc.client.join(options.appId, options.channel, options.token, userId);
// Create an audio track from the audio sampled by a microphone.
rtc.localAudioTrack = await global.AgoraRTC.createMicrophoneAudioTrack();
// Create a video track from the video captured by a camera.
rtc.localVideoTrack = await global.AgoraRTC.createCameraVideoTrack();
// Publish the local audio and video tracks to the channel.
await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
console.log("publish success!");
}
startBasicCall(this.userIdValue);
rtc.client.on("user-published", async (user, mediaType) => {
// Subscribe to a remote user.
await rtc.client.subscribe(user, mediaType);
console.log("subscribe success");
// If the subscribed track is video.
if (mediaType === "video") {
// Get `RemoteVideoTrack` in the `user` object.
const remoteVideoTrack = user.videoTrack;
// Dynamically create a container in the form of a DIV element for playing the remote video track.
const playerContainer = document.createElement("div");
// Specify the ID of the DIV container. You can use the `uid` of the remote user.
playerContainer.id = user.uid.toString();
playerContainer.style.width = "640px";
playerContainer.style.height = "480px";
document.body.append(playerContainer);
// Play the remote video track.
// Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
remoteVideoTrack.play(playerContainer);
// Or just pass the ID of the DIV container.
// remoteVideoTrack.play(playerContainer.id);
}
// If the subscribed track is audio.
if (mediaType === "audio") {
// Get `RemoteAudioTrack` in the `user` object.
const remoteAudioTrack = user.audioTrack;
// Play the audio track. No need to pass any DOM element.
remoteAudioTrack.play();
}
});
rtc.client.on("user-unpublished", user => {
// Get the dynamically created DIV container.
const playerContainer = document.getElementById(user.uid);
// Destroy the container.
playerContainer.remove();
});
async function leaveCall() {
// Destroy the local audio and video tracks.
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
// Traverse all remote users.
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV container.
const playerContainer = document.getElementById(user.uid);
playerContainer && playerContainer.remove();
});
// Leave the channel.
await rtc.client.leave();
}
}
}this is a sample controller for the atendee: import { Controller } from "stimulus"
import "agora-rtc-sdk-ng"
export default class extends Controller {
static values = { token: String, userId: String }
connect() {
this.element.textContent = "Hello World!"
}
initialize(){
var rtc = {
// For the local client.
client: null,
// For the local audio and video tracks.
localAudioTrack: null,
localVideoTrack: null,
};
var options = {
// Pass your app ID here.
appId: "xxxxx",
// Set the channel name.
channel: "xxxxxx",
// Pass a token if your project enables the App Certificate.
token: this.tokenValue,
// Set the user role in the channel.
role: "audience"
};
async function startBasicCall(userId) {
/**
* Put the following code snippets here.
*/
rtc.client = global.AgoraRTC.createClient({ mode: "live", codec: "vp8" });
rtc.client.setClientRole(options.role);
const uid = await rtc.client.join(options.appId, options.channel, options.token, userId);
}
startBasicCall(this.userIdValue);
rtc.client.on("user-published", async (user, mediaType) => {
// Subscribe to a remote user.
await rtc.client.subscribe(user, mediaType);
console.log("subscribe success");
// If the subscribed track is video.
if (mediaType === "video") {
// Get `RemoteVideoTrack` in the `user` object.
const remoteVideoTrack = user.videoTrack;
// Dynamically create a container in the form of a DIV element for playing the remote video track.
const playerContainer = document.createElement("div");
// Specify the ID of the DIV container. You can use the `uid` of the remote user.
playerContainer.id = user.uid.toString();
playerContainer.style.width = "640px";
playerContainer.style.height = "480px";
document.body.append(playerContainer);
// Play the remote video track.
// Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
remoteVideoTrack.play(playerContainer);
// Or just pass the ID of the DIV container.
// remoteVideoTrack.play(playerContainer.id);
}
// If the subscribed track is audio.
if (mediaType === "audio") {
// Get `RemoteAudioTrack` in the `user` object.
const remoteAudioTrack = user.audioTrack;
// Play the audio track. No need to pass any DOM element.
remoteAudioTrack.play();
}
});
rtc.client.on("user-unpublished", user => {
// Get the dynamically created DIV container.
const playerContainer = document.getElementById(user.uid);
// Destroy the container.
playerContainer.remove();
});
async function leaveCall() {
// Destroy the local audio and video tracks.
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
// Traverse all remote users.
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV container.
const playerContainer = document.getElementById(user.uid);
playerContainer && playerContainer.remove();
});
// Leave the channel.
await rtc.client.leave();
}
}
}The code is copied and pasted from the example documentation. That way the library is imported and I am able to see video and so on. |
|
umm i have no experience using your framework. but my guess is the way how it converts import statement somehow works differently comparing to webpack. |
|
it is using webpack. |
|
I'm having the exact same issue. When I have this code at the top of one of my JS files: ...I get the same error as the original poster (using |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Describe the bug
When using webpack one can not access the exported AgoraRTC
SDK Version: latest
To Reproduce
Steps to reproduce the behavior:
Additional context
I have not been able to run the examples using NPM because of the issue.
The text was updated successfully, but these errors were encountered: