root/webRtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
zhangzheng
2026-02-27 18:35:40 +08:00
parent adef8b4cce
commit 1bb1fee5cc
265 changed files with 104076 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
WebApp/client/public/receiver/css/style.css Normal file
View File

@@ -0,0 +1,43 @@
body {
margin: 0px;
}
#player {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
display: flex;
background-color: #323232;
}
#player:before {
content: "";
display: block;
padding-top: 66%;
}
#playButton {
width: 15%;
max-width: 200px;
cursor: pointer;
}
#Video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fullscreenButton {
position: absolute;
top: 25px;
right: 25px;
width: 32px;
height: 32px;
}

53
WebApp/client/public/receiver/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="css/style.css" />
<title>Receiver Sample</title>
</head>
<body>
<div id="container">
<h1>Receiver Sample</h1>
<div id="warning" hidden="true"></div>
<div id="player"></div>
<div class="box">
<span>Codec preferences:</span>
<select id="codecPreferences" autocomplete="off" disabled>
<option selected value="">Default</option>
</select>
</div>
<div class="box">
<span>Lock Cursor to Player:</span>
<input type="checkbox" id="lockMouseCheck" autocomplete="off" />
</div>
<p>
For more information about sample, see
<a href="https://docs.unity3d.com/Packages/com.unity.renderstreaming@3.1/manual/sample-broadcast.html">Broadcast sample</a> document page.
</p>
<div id="message"></div>
<section>
<a href="https://github.com/Unity-Technologies/UnityRenderStreaming/tree/develop/WebApp/client/public/receiver"
title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</section>
</div>
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://unpkg.com/event-target@latest/min.js"></script>
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.global.js"></script>
<script type="module" src="js/main.js"></script>
</body>
</html>

186
WebApp/client/public/receiver/js/main.js Normal file
View File

@@ -0,0 +1,186 @@
import { getServerConfig, getRTCConfiguration } from "../../js/config.js";
import { createDisplayStringArray } from "../../js/stats.js";
import { VideoPlayer } from "../../js/videoplayer.js";
import { RenderStreaming } from "../../module/renderstreaming.js";
import { Signaling, WebSocketSignaling } from "../../module/signaling.js";
/** @type {Element} */
let playButton;
/** @type {RenderStreaming} */
let renderstreaming;
/** @type {boolean} */
let useWebSocket;
const codecPreferences = document.getElementById('codecPreferences');
const supportsSetCodecPreferences = window.RTCRtpTransceiver &&
'setCodecPreferences' in window.RTCRtpTransceiver.prototype;
const messageDiv = document.getElementById('message');
messageDiv.style.display = 'none';
const playerDiv = document.getElementById('player');
const lockMouseCheck = document.getElementById('lockMouseCheck');
const videoPlayer = new VideoPlayer();
setup();
window.document.oncontextmenu = function () {
return false; // cancel default menu
};
window.addEventListener('resize', function () {
videoPlayer.resizeVideo();
}, true);
window.addEventListener('beforeunload', async () => {
if(!renderstreaming)
return;
await renderstreaming.stop();
}, true);
async function setup() {
const res = await getServerConfig();
useWebSocket = res.useWebSocket;
showWarningIfNeeded(res.startupMode);
showCodecSelect();
showPlayButton();
}
function showWarningIfNeeded(startupMode) {
const warningDiv = document.getElementById("warning");
if (startupMode == "private") {
warningDiv.innerHTML = "<h4>Warning</h4> This sample is not working on Private Mode.";
warningDiv.hidden = false;
}
}
function showPlayButton() {
if (!document.getElementById('playButton')) {
const elementPlayButton = document.createElement('img');
elementPlayButton.id = 'playButton';
elementPlayButton.src = '../../images/Play.png';
elementPlayButton.alt = 'Start Streaming';
playButton = document.getElementById('player').appendChild(elementPlayButton);
playButton.addEventListener('click', onClickPlayButton);
}
}
function onClickPlayButton() {
playButton.style.display = 'none';
// add video player
videoPlayer.createPlayer(playerDiv, lockMouseCheck);
setupRenderStreaming();
}
async function setupRenderStreaming() {
codecPreferences.disabled = true;
const signaling = useWebSocket ? new WebSocketSignaling() : new Signaling();
const config = getRTCConfiguration();
renderstreaming = new RenderStreaming(signaling, config);
renderstreaming.onConnect = onConnect;
renderstreaming.onDisconnect = onDisconnect;
renderstreaming.onTrackEvent = (data) => videoPlayer.addTrack(data.track);
renderstreaming.onGotOffer = setCodecPreferences;
await renderstreaming.start();
await renderstreaming.createConnection();
}
function onConnect() {
const channel = renderstreaming.createDataChannel("input");
videoPlayer.setupInput(channel);
showStatsMessage();
}
async function onDisconnect(connectionId) {
clearStatsMessage();
messageDiv.style.display = 'block';
messageDiv.innerText = `Disconnect peer on ${connectionId}.`;
await renderstreaming.stop();
renderstreaming = null;
videoPlayer.deletePlayer();
if (supportsSetCodecPreferences) {
codecPreferences.disabled = false;
}
showPlayButton();
}
function setCodecPreferences() {
/** @type {RTCRtpCodecCapability[] | null} */
let selectedCodecs = null;
if (supportsSetCodecPreferences) {
const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
if (preferredCodec.value !== '') {
const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
const { codecs } = RTCRtpSender.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
const selectCodec = codecs[selectedCodecIndex];
selectedCodecs = [selectCodec];
}
}
if (selectedCodecs == null) {
return;
}
const transceivers = renderstreaming.getTransceivers().filter(t => t.receiver.track.kind == "video");
if (transceivers && transceivers.length > 0) {
transceivers.forEach(t => t.setCodecPreferences(selectedCodecs));
}
}
function showCodecSelect() {
if (!supportsSetCodecPreferences) {
messageDiv.style.display = 'block';
messageDiv.innerHTML = `Current Browser does not support <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpTransceiver/setCodecPreferences">RTCRtpTransceiver.setCodecPreferences</a>.`;
return;
}
const codecs = RTCRtpSender.getCapabilities('video').codecs;
codecs.forEach(codec => {
if (['video/red', 'video/ulpfec', 'video/rtx'].includes(codec.mimeType)) {
return;
}
const option = document.createElement('option');
option.value = (codec.mimeType + ' ' + (codec.sdpFmtpLine || '')).trim();
option.innerText = option.value;
codecPreferences.appendChild(option);
});
codecPreferences.disabled = false;
}
/** @type {RTCStatsReport} */
let lastStats;
/** @type {number} */
let intervalId;
function showStatsMessage() {
intervalId = setInterval(async () => {
if (renderstreaming == null) {
return;
}
const stats = await renderstreaming.getStats();
if (stats == null) {
return;
}
const array = createDisplayStringArray(stats, lastStats);
if (array.length) {
messageDiv.style.display = 'block';
messageDiv.innerHTML = array.join('<br>');
}
lastStats = stats;
}, 1000);
}
function clearStatsMessage() {
if (intervalId) {
clearInterval(intervalId);
}
lastStats = null;
intervalId = null;
messageDiv.style.display = 'none';
messageDiv.innerHTML = '';
}