<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Duix SDK Simple Example</title>
<style>
html, body { margin: 0; padding: 0; height: 100%; }
.container { width: 100vw; height: 100vh; }
.subtitle {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
color: #000;
padding: 12px;
background-color: rgba(255,255,255,0.5);
border-radius: 12px;
visibility: hidden;
}
.subtitle:empty { display: none; }
</style>
<!-- SDK import via CDN -->
<script src="https://cdn.guiji.ai/duix/sdk/0.3.1/duix.js"></script>
</head>
<body>
<!-- Video container -->
<div class="container"></div>
<div class="subtitle"></div>
<!-- Simple modal for user input -->
<div id="modal">
<input id="sign" placeholder="Enter sign" />
<input id="conversationId" placeholder="Enter conversationId" />
<button id="start" onclick="init()">Start</button>
</div>
<script>
const duix = new window.Duix();
function init() {
const sign = document.querySelector('#sign').value;
const conversationId = document.querySelector('#conversationId').value;
if (!sign || !conversationId) {
return alert('Both parameters are required.');
}
// Register event listeners
duix.on('error', err => console.error('Error:', err));
duix.on('initialSuccess', () => {
console.info('SDK initialized successfully.');
duix.start({ openAsr: true }).then(res => console.info('Session started:', res));
});
duix.on('show', () => {
document.querySelector('#modal').style.display = 'none';
document.querySelector('.subtitle').style.visibility = 'visible';
});
duix.on('asrStart', () => (document.querySelector('.subtitle').innerText = ''));
duix.on('speakSection', data => (document.querySelector('.subtitle').innerText = data.text));
// Initialize SDK
duix
.init({
sign,
containerLable: '.container',
conversationId,
platform: 'duix.com'
})
.then(data => console.info('Initialization complete:', data))
.catch(err => console.error('Initialization failed:', err));
}
</script>
</body>
</html>
