Fishjam TS 客户端
类型脚本客户端库 鱼潭。 。 。 .
[尖叫声]
这个SDK还不稳定 我们建议使用 反应客户端 服务费.
文档
备有文件 这里 或者说 您可以在本地生成 :
yarn run docs
安装
您可以使用 npm数字 :
npm install @fishjam-cloud/ts-client
或者说 yarn数字 :
yarn @fishjam-cloud/ts-client
使用量
先决条件:
- 账户 鱼潭 已配置 App .
- 在那间屋子里创建了房间和同伴的标志 您可以使用 Room Management 来创建房间和对等标志 .
以下代码片断基于 最小 实例.
import { FishjamClient, WebRTCEndpoint } from '@fishjam-cloud/ts-client';
const SCREEN_SHARING_MEDIA_CONSTRAINTS = {
video: {
frameRate: { ideal: 20, max: 25 },
width: { max: 1920, ideal: 1920 },
height: { max: 1080, ideal: 1080 },
},
};
// Example metadata types for peer and track
// You can define your own metadata types, just make sure they are serializable
type PeerMetadata = {
name: string;
};
type TrackMetadata = {
type: 'camera' | 'screen';
};
// Create a new FishjamClient object to interact with Fishjam
const client = new FishjamClient<PeerMetadata, TrackMetadata>();
const peerToken = prompt('Enter peer token') ?? 'YOUR_PEER_TOKEN';
const FISHJAM_URL = 'ws://localhost:5002';
// Start the peer connection
client.connect({
peerMetadata: { name: 'peer' },
token: peerToken,
url: FISHJAM_URL,
});
// You can listen to events emitted by the client
client.on('joined', (peerId, peersInRoom) => {
// Check if webrtc is initialized
if (!client.webrtc) return console.error('webrtc is not initialized');
// To start broadcasting your media, you will need a source of MediaStream like a camera, microphone, or screen
// In this example, we will use screen sharing
startScreenSharing(client.webrtc);
});
// To receive media from other peers, you need to listen to the onTrackReady event
client.on('trackReady', (ctx) => {
const peerId = ctx.peer.id;
document.getElementById(peerId)?.remove(); // remove previous video element if it exists
// Create a new video element to display the media
const videoPlayer = document.createElement('video');
videoPlayer.id = peerId;
videoPlayer.oncanplaythrough = function () {
// Chrome blocks autoplay of unmuted video
videoPlayer.muted = true;
videoPlayer.play();
};
document.body.appendChild(videoPlayer);
videoPlayer.srcObject = ctx.stream; // assign MediaStream to video element
});
// Cleanup video element when track is removed
client.on('trackRemoved', (ctx) => {
const peerId = ctx.peer.id;
document.getElementById(peerId)?.remove(); // remove video element
});
async function startScreenSharing(webrtc: WebRTCEndpoint) {
// Get screen sharing MediaStream
const screenStream = await navigator.mediaDevices.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS);
// Add local MediaStream to webrtc
screenStream.getTracks().forEach((track) => webrtc.addTrack(track, { type: 'screen' }));
}
实例
更多例子,见 实例 文件夹.
许可证
Fishjam由软件人大厦创建
2012年以来 软件大楼 是一个在网络和移动方面有经验的软件机构 应用程序。 我们是核心反动土著贡献者和处理各种反动土著问题的专家。 我们可以帮忙 你造下一个梦想产品 雇我们。 。 。 .