[feat] implement H264 stream pulling and playback from CrossDesk client on Web
This commit is contained in:
dijunkun
98
index.html
98
index.html
@@ -2,62 +2,58 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>libdatachannel media example</title>
|
<title>CrossDesk Web Client</title>
|
||||||
<style>
|
<link rel="stylesheet" href="styles.css" />
|
||||||
button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
video {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#media {
|
|
||||||
max-width: 1280px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>libdatachannel streamer example client</h1>
|
<div class="container">
|
||||||
|
<h1>CrossDesk Web Client</h1>
|
||||||
|
|
||||||
<h2>Options</h2>
|
<div class="card">
|
||||||
<div class="option">
|
<h2>连接设置</h2>
|
||||||
<input id="use-stun" type="checkbox" />
|
<div class="option">
|
||||||
<label for="use-stun">Use STUN server</label>
|
<input id="use-stun" type="checkbox" />
|
||||||
|
<label for="use-stun">使用STUN服务器</label>
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label for="transmission-id">传输ID：</label>
|
||||||
|
<input id="transmission-id" type="text" value="931631602" />
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label for="transmission-pwd">密码：</label>
|
||||||
|
<input id="transmission-pwd" type="password" value="111111" />
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button id="connect" onclick="connect()" disabled>连接</button>
|
||||||
|
<button id="disconnect" style="display: none" onclick="disconnect()">
|
||||||
|
断开连接
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="states">
|
||||||
|
<div class="state-item">
|
||||||
|
<p>ICE 连接状态: <span id="ice-connection-state"></span></p>
|
||||||
|
</div>
|
||||||
|
<div class="state-item">
|
||||||
|
<p>ICE 收集状态: <span id="ice-gathering-state"></span></p>
|
||||||
|
</div>
|
||||||
|
<div class="state-item">
|
||||||
|
<p>信令状态: <span id="signaling-state"></span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="media" style="display: none">
|
||||||
|
<h2>远程画面</h2>
|
||||||
|
<video id="video" autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>数据通道</h2>
|
||||||
|
<pre id="data-channel"></pre>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button id="start" onclick="start()" disabled>Start</button>
|
|
||||||
<button id="stop" style="display: none" onclick="stop()">Stop</button>
|
|
||||||
|
|
||||||
<h2>State</h2>
|
|
||||||
<p>ICE Connection state: <span id="ice-connection-state"></span></p>
|
|
||||||
<p>ICE Gathering state: <span id="ice-gathering-state"></span></p>
|
|
||||||
<p>Signaling state: <span id="signaling-state"></span></p>
|
|
||||||
|
|
||||||
<div id="media" style="display: none">
|
|
||||||
<h2>Media</h2>
|
|
||||||
<video id="video" autoplay playsinline></video>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Data Channel</h2>
|
|
||||||
<pre id="data-channel" style="height: 200px"></pre>
|
|
||||||
|
|
||||||
<h2>SDP</h2>
|
|
||||||
|
|
||||||
<h3>Offer</h3>
|
|
||||||
<pre id="offer-sdp"></pre>
|
|
||||||
|
|
||||||
<h3>Answer</h3>
|
|
||||||
<pre id="answer-sdp"></pre>
|
|
||||||
|
|
||||||
<script src="web_client.js"></script>
|
<script src="web_client.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
120
styles.css
Normal file
120
styles.css
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
:root {
|
||||||
|
--primary-color: #2196f3;
|
||||||
|
--background-color: #f5f5f5;
|
||||||
|
--border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #444;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option label {
|
||||||
|
min-width: 120px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 200px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #1976d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disconnect {
|
||||||
|
background-color: #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
#disconnect:hover {
|
||||||
|
background-color: #d32f2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.states {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state-item {
|
||||||
|
background: white;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#media {
|
||||||
|
background: #222;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-channel {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 15px;
|
||||||
|
font-family: monospace;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
@@ -4,12 +4,10 @@ const iceConnectionLog = document.getElementById('ice-connection-state'),
|
|||||||
dataChannelLog = document.getElementById('data-channel');
|
dataChannelLog = document.getElementById('data-channel');
|
||||||
|
|
||||||
clientId = "000000";
|
clientId = "000000";
|
||||||
transmissionId = "475319798"
|
|
||||||
transmissionPwd = "111111"
|
|
||||||
const websocket = new WebSocket('wss://api.crossdesk.cn:9090');
|
const websocket = new WebSocket('wss://api.crossdesk.cn:9090');
|
||||||
|
|
||||||
websocket.onopen = () => {
|
websocket.onopen = () => {
|
||||||
document.getElementById('start').disabled = false;
|
document.getElementById('connect').disabled = false;
|
||||||
sendLogin();
|
sendLogin();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -23,7 +21,6 @@ websocket.onmessage = async (evt) => {
|
|||||||
console.log("logged in as " + clientId);
|
console.log("logged in as " + clientId);
|
||||||
|
|
||||||
} else if (message.type == "offer") {
|
} else if (message.type == "offer") {
|
||||||
document.getElementById('offer-sdp').textContent = message.sdp;
|
|
||||||
await handleOffer(message)
|
await handleOffer(message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -56,37 +53,33 @@ function createPeerConnection() {
|
|||||||
signalingLog.textContent = pc.signalingState;
|
signalingLog.textContent = pc.signalingState;
|
||||||
|
|
||||||
// Receive audio/video track
|
// Receive audio/video track
|
||||||
// Receive audio/video track — 更健壮的处理
|
// More robust handling of audio/video track
|
||||||
pc.ontrack = (evt) => {
|
pc.ontrack = (evt) => {
|
||||||
console.log('ontrack event:', evt);
|
console.log('ontrack event:', evt);
|
||||||
const video = document.getElementById('video');
|
const video = document.getElementById('video');
|
||||||
|
|
||||||
// 只处理 video track
|
// Only handle video track
|
||||||
if (evt.track.kind !== 'video') return;
|
if (evt.track.kind !== 'video') return;
|
||||||
|
|
||||||
// 如果已有流，就别再重新设置 srcObject
|
// Don't reset srcObject if stream already exists
|
||||||
if (!video.srcObject) {
|
if (!video.srcObject) {
|
||||||
const stream = evt.streams && evt.streams[0]
|
const stream = evt.streams && evt.streams[0] ? evt.streams[0] : new MediaStream([evt.track]);
|
||||||
? evt.streams[0]
|
|
||||||
: new MediaStream([evt.track]);
|
|
||||||
|
|
||||||
video.srcObject = stream;
|
video.srcObject = stream;
|
||||||
video.muted = true;
|
video.muted = true;
|
||||||
video.playsInline = true;
|
video.playsInline = true;
|
||||||
|
// Set delayed playback
|
||||||
// 延迟一点再播放，避免 srcObject 切换导致 AbortError
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
video.play().catch(err => {
|
video.play().catch(err => {
|
||||||
console.warn('video.play() failed:', err);
|
console.warn('video.play() failed:', err);
|
||||||
});
|
});
|
||||||
}, 200);
|
}, 500);
|
||||||
|
|
||||||
console.log('attached new video stream:', stream.id);
|
console.log('attached new video stream:', stream.id);
|
||||||
} else {
|
} else {
|
||||||
// 如果已有流，则只添加 track
|
// Add track directly to existing stream
|
||||||
video.srcObject.addTrack(evt.track);
|
video.srcObject.addTrack(evt.track);
|
||||||
console.log('added track to existing stream:', evt.track.id);
|
console.log('added track to existing stream:', evt.track.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Receive data channel
|
// Receive data channel
|
||||||
@@ -148,13 +141,12 @@ async function sendAnswer(pc) {
|
|||||||
await waitGatheringComplete();
|
await waitGatheringComplete();
|
||||||
|
|
||||||
const answer = pc.localDescription;
|
const answer = pc.localDescription;
|
||||||
document.getElementById('answer-sdp').textContent = answer.sdp;
|
|
||||||
|
|
||||||
msg = JSON.stringify({
|
msg = JSON.stringify({
|
||||||
type: "answer",
|
type: "answer",
|
||||||
transmission_id: transmissionId,
|
transmission_id: getTransmissionId(),
|
||||||
user_id: clientId,
|
user_id: clientId,
|
||||||
remote_user_id: transmissionId,
|
remote_user_id: getTransmissionId(),
|
||||||
sdp: answer.sdp,
|
sdp: answer.sdp,
|
||||||
});
|
});
|
||||||
console.log("send answer: " + msg);
|
console.log("send answer: " + msg);
|
||||||
@@ -176,25 +168,45 @@ function sendLogin() {
|
|||||||
console.log("send login");
|
console.log("send login");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function leaveTransmission() {
|
||||||
|
websocket.send(JSON.stringify({
|
||||||
|
type: "leave_transmission",
|
||||||
|
user_id: clientId,
|
||||||
|
transmission_id: getTransmissionId(),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTransmissionId() {
|
||||||
|
return document.getElementById('transmission-id').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add function to get password
|
||||||
|
function getTransmissionPwd() {
|
||||||
|
return document.getElementById('transmission-pwd').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modify sendRequest function to use dynamic password
|
||||||
function sendRequest() {
|
function sendRequest() {
|
||||||
websocket.send(JSON.stringify({
|
websocket.send(JSON.stringify({
|
||||||
type: "join_transmission",
|
type: "join_transmission",
|
||||||
user_id: clientId,
|
user_id: clientId,
|
||||||
transmission_id: transmissionId + '@' + transmissionPwd,
|
transmission_id: getTransmissionId() + '@' + getTransmissionPwd(),
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
function start() {
|
function connect() {
|
||||||
document.getElementById('start').style.display = 'none';
|
document.getElementById('connect').style.display = 'none';
|
||||||
document.getElementById('stop').style.display = 'inline-block';
|
document.getElementById('disconnect').style.display = 'inline-block';
|
||||||
document.getElementById('media').style.display = 'block';
|
document.getElementById('media').style.display = 'block';
|
||||||
sendRequest();
|
sendRequest();
|
||||||
}
|
}
|
||||||
|
|
||||||
function stop() {
|
function disconnect() {
|
||||||
document.getElementById('stop').style.display = 'none';
|
document.getElementById('disconnect').style.display = 'none';
|
||||||
document.getElementById('media').style.display = 'none';
|
document.getElementById('media').style.display = 'none';
|
||||||
document.getElementById('start').style.display = 'inline-block';
|
document.getElementById('connect').style.display = 'inline-block';
|
||||||
|
|
||||||
|
leaveTransmission();
|
||||||
|
|
||||||
// close data channel
|
// close data channel
|
||||||
if (dc) {
|
if (dc) {
|
||||||
|
|||||||
Reference in New Issue
Block a user