Library allows you to connect to the PulseVision platform and start streaming.
Note: This documentation is for v2.2.0 and above
Library is available as an npm package.
npm install @pulsevision/producer
yarn add @pulsevision/producer
pnpm add @pulsevision/producer
import { Producer } from '@pulsevision/producer';
import type {
BrowserUnsupportedError,
CredentialsInvalidError,
DeviceAccessDeniedError,
RuntimeError,
StreamSourceError,
} from '@pulsevision/producer';
let isLoading = false;
const producer = new Producer({
domain: 'https://app.pulsevision.io',
apiToken: 'YOUR-API-TOKEN',
roomName: 'user1',
meta: {
username: 'user1@example.com',
group: 'SOME GROUP NAME', // Optional parameter
},
debug: true,
});
producer.on('connected', () => {
isLoading = false;
console.log('Connected');
});
producer.on('disconnected', () => {
console.log('Disconnected');
});
producer.on('error', (error) => {
if (error instanceof BrowserUnsupportedError) {
console.log('Browser is not supported');
}
if (error instanceof DeviceAccessDeniedError) {
console.log('User denied access to media devices');
}
if (error instanceof StreamSourceError) {
console.log('Stream source error');
}
if (error instanceof RuntimeError) {
console.log('Runtime error');
}
});
// To start the stream
try {
isLoading = true;
producer.connect();
} catch (error) {
if (error instanceof CredentialsInvalidError) {
onsole.log('Credentials are invalid');
}
}
// To stop the stream
producer.disconnect();
import { useRef, useState } from 'react';
import { Producer } from '@pulsevision/producer';
function App() {
const clientRef = (useRef < Producer) | (null > null);
const [connected, setConnected] = useState(false);
clientRef.current = new Producer({
domain: 'https://app.pulsevision.io',
apiToken: 'YOUR-API-TOKEN',
roomName: 'user_test',
meta: {
username: 'usernam@example.com',
group: 'SOME GROUP NAME', // Optional parameter
},
debug: true,
});
clientRef.current.on('connect', () => {
setConnected(true);
});
clientRef.current.on('disconnect', () => {
setConnected(false);
});
return (
<>
<div>{connected ? 'Connected' : 'Disconnected'}</div>
<div>
<button onClick={() => clientRef.current?.connect()}>Connect</button>
<button onClick={() => clientRef.current?.disconnect()}>
Disconnect
</button>
</div>
</>
);
}
<!doctype html>
<html lang="en">
<body>
<button id="connect">Connect</button>
<button id="disconnect">Disconnect</button>
<div id="status">Disconnected</div>
<script src="https://static.pulsevision.io/sdk/v2.2.3/pulsevision.umd.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const client = new window.PulseVision.Producer({
domain: 'https://app.pulsevision.io',
apiToken: 'YOUR-API-TOKEN',
roomName: 'user_test',
meta: {
username: 'usernam@example.com',
group: 'SOME GROUP NAME', // Optional parameter
},
debug: true,
});
client.on('error', (data) => {
console.log('error', data);
});
client.on('disconnect', (data) => {
document.getElementById('status').innerHTML = 'Disconnected';
});
client.on('connect', (data) => {
document.getElementById('status').innerHTML = 'Connected';
});
document.getElementById('connect').addEventListener('click', () => {
client
.connect()
.then(() => {
console.log('producer connected');
})
.catch((err) => {
console.log('producer error', err);
});
});
document.getElementById('disconnect').addEventListener('click', () => {
client
.disconnect()
.then(() => {
console.log('producer disconnected');
})
.catch((err) => {
console.log('producer error', err);
});
});
});
</script>
</body>
</html>
By default, iframes don't have access to the camera and microphone.
To allow access, you need to add allow="camera;microphone" attribute to the iframe tag.
If you use strict Permissions Policy, you need to add camera=() and microphone=() to the Permissions-Policy header.
If domains are different, add them to allowlist.
<!-- Same domain -->
<iframe src="https://example.com" allow="camera;microphone"></iframe>
<!-- Different domain -->
<iframe
src="https://example.com"
allow="
camera 'self' https://a.example.com https://b.example.com;
microphone 'self' https://a.example.com https://b.example.com
"
></iframe>
<!-- Any domain -->
<iframe src="http://example.net" allow="camera *;microphone *"></iframe>
More details about Permissions Policy: https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy
Generated using TypeDoc