diff --git a/index.html b/index.html index 04bf0154d4..2d2c40e178 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,7 @@

Screensharing with getDisplayMedia
  • Control camera pan, tilt, and zoom
    • - +
  • Control exposure

    • Devices:

    @@ -156,8 +156,6 @@

    Constraints and stats -
  • More constraints and stats
    • -
  • RTCPeerConnection and requestVideoFrameCallback()
  • Display createOffer output for various scenarios @@ -211,7 +209,7 @@

    Insertable Streams:

  • Audio processing using MediaStream Insertable Streams
    • (Experimental)
  • Video cropping using MediaStream Insertable Streams in a Worker
    • (Experimental)
  • Integrations with WebGPU for custom video rendering:
    • (Experimental) - + diff --git a/src/content/peerconnection/old-new-stats/css/main.css b/src/content/peerconnection/old-new-stats/css/main.css deleted file mode 100644 index a1a9a1cce9..0000000000 --- a/src/content/peerconnection/old-new-stats/css/main.css +++ /dev/null @@ -1,110 +0,0 @@ -/* - * Copyright (c) 2018 The WebRTC project authors. All Rights Reserved. - * - * Use of this source code is governed by a BSD-style license - * that can be found in the LICENSE file in the root of the source - * tree. - */ -button { - margin: 0 20px 25px 0; - vertical-align: top; - width: 134px; -} - -div#getUserMedia { - padding: 0 0 8px 0; -} - -div.input { - display: inline-block; - margin: 0 4px 0 0; - vertical-align: top; - width: 310px; -} - -div.input > div { - margin: 0 0 20px 0; - vertical-align: top; -} - -div.output { - background-color: #eee; - display: inline-block; - font-family: 'Inconsolata', 'Courier New', monospace; - font-size: 0.9em; - padding: 10px 10px 10px 25px; - position: relative; - top: 10px; - white-space: pre; - width: 270px; -} - -section#statistics div { - display: inline-block; - font-family: 'Inconsolata', 'Courier New', monospace; - vertical-align: top; - width: 308px; -} - -section#statistics div#senderStats { - margin: 0 20px 0 0; -} - -section#constraints > div { - margin: 0 0 20px 0; -} - -section#video > div { - display: inline-block; - margin: 0 20px 0 0; - vertical-align: top; - width: calc(50% - 22px); -} - -section#video > div div { - font-size: 0.9em; - margin: 0 0 0.5em 0; - width: 320px; -} - -h2 { - margin: 0 0 1em 0; -} - -section#constraints label { - display: inline-block; - width: 156px; -} - -section { - margin: 0 0 20px 0; - padding: 0 0 15px 0; -} - -section#video { - width: calc(100% + 20px); -} - -video { - --width: 100%; - width: var(--width); - height: calc(var(--width) * 0.75); - margin: 0 0 10px 0; -} - -@media screen and (max-width: 720px) { - button { - font-weight: 500; - height: 56px; - line-height: 1.3em; - width: 90px; - } - - div#getUserMedia { - padding: 0 0 40px 0; - } - - section#statistics div { - width: calc(50% - 14px); - } -} diff --git a/src/content/peerconnection/old-new-stats/index.html b/src/content/peerconnection/old-new-stats/index.html deleted file mode 100644 index 1d40db7ea6..0000000000 --- a/src/content/peerconnection/old-new-stats/index.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - - - - - - - - - - - - Constraints and statistics - - - - - - - - - - -
    - -

    WebRTC samples Constraints & statistics

    - -
    -

    This demo shows ways to use constraints and statistics in WebRTC applications.

    -

    Set camera constraints, and click Get media to (re)open the camera with these included. Click Connect to create a (local) peer connection. The RTCPeerConnection objects localPeerConnection and remotePeerConnection can be inspected from the console.

    -

    Setting a value to zero will remove that constraint.

    -

    The lefthand video shows the output of getUserMedia(); on the right is the video after being passed through the peer connection. The transmission bitrate is displayed below the righthand video.

    -
    - -
    - - - -
    - - -
    -
    -
    -

    Camera constraints

    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - View source on GitHub - -
    - - - - - - - diff --git a/src/content/peerconnection/old-new-stats/js/main.js b/src/content/peerconnection/old-new-stats/js/main.js deleted file mode 100644 index 3d525c422a..0000000000 --- a/src/content/peerconnection/old-new-stats/js/main.js +++ /dev/null @@ -1,273 +0,0 @@ -/* - * Copyright (c) 2018 The WebRTC project authors. All Rights Reserved. - * - * Use of this source code is governed by a BSD-style license - * that can be found in the LICENSE file in the root of the source - * tree. - */ - -'use strict'; - -document.addEventListener('DOMContentLoaded', async () => { - const getMediaButton = document.querySelector('button#getMedia'); - const connectButton = document.querySelector('button#connect'); - const hangupButton = document.querySelector('button#hangup'); - - getMediaButton.onclick = getMedia; - connectButton.onclick = createPeerConnection; - hangupButton.onclick = hangup; - - const minWidthInput = document.querySelector('div#minWidth input'); - const maxWidthInput = document.querySelector('div#maxWidth input'); - const minHeightInput = document.querySelector('div#minHeight input'); - const maxHeightInput = document.querySelector('div#maxHeight input'); - const minFramerateInput = document.querySelector('div#minFramerate input'); - const maxFramerateInput = document.querySelector('div#maxFramerate input'); - - minWidthInput.onchange = maxWidthInput.onchange = - minHeightInput.onchange = maxHeightInput.onchange = - minFramerateInput.onchange = maxFramerateInput.onchange = displayRangeValue; - - const getUserMediaConstraintsDiv = - document.querySelector('div#getUserMediaConstraints'); - // const bitrateDiv = document.querySelector('div#bitrate'); - // const peerDiv = document.querySelector('div#peer'); - const senderStatsDiv = document.querySelector('div#senderStats'); - const receiverStatsDiv = document.querySelector('div#receiverStats'); - - const localVideo = document.querySelector('div#localVideo video'); - const remoteVideo = document.querySelector('div#remoteVideo video'); - const localVideoStatsDiv = document.querySelector('div#localVideo div'); - const remoteVideoStatsDiv = document.querySelector('div#remoteVideo div'); - - let localPeerConnection; - let remotePeerConnection; - let localStream; - // let bytesPrev; - // let timestampPrev; - - function hangup() { - console.log('Ending call'); - localPeerConnection.close(); - remotePeerConnection.close(); - localPeerConnection = null; - remotePeerConnection = null; - - localStream.getTracks().forEach(track => track.stop()); - localStream = null; - - hangupButton.disabled = true; - getMediaButton.disabled = false; - } - - async function getMedia() { - getMediaButton.disabled = true; - if (localStream) { - localStream.getTracks().forEach(track => track.stop()); - const videoTracks = localStream.getVideoTracks(); - for (let i = 0; i !== videoTracks.length; ++i) { - videoTracks[i].stop(); - } - } - - try { - const userMedia = await navigator.mediaDevices.getUserMedia(getUserMediaConstraints()); - gotStream(userMedia); - } catch (e) { - const message = `getUserMedia error: ${e.name}\nPermissionDeniedError may mean invalid constraints.`; - alert(message); - console.log(message); - getMediaButton.disabled = false; - } - } - - function gotStream(stream) { - connectButton.disabled = false; - console.log('GetUserMedia succeeded'); - localStream = stream; - localVideo.srcObject = stream; - } - - function getUserMediaConstraints() { - const constraints = {}; - constraints.audio = true; - constraints.video = {}; - if (minWidthInput.value !== '0') { - constraints.video.width = {}; - constraints.video.width.min = minWidthInput.value; - } - if (maxWidthInput.value !== '0') { - constraints.video.width = constraints.video.width || {}; - constraints.video.width.max = maxWidthInput.value; - } - if (minHeightInput.value !== '0') { - constraints.video.height = {}; - constraints.video.height.min = minHeightInput.value; - } - if (maxHeightInput.value !== '0') { - constraints.video.height = constraints.video.height || {}; - constraints.video.height.max = maxHeightInput.value; - } - if (minFramerateInput.value !== '0') { - constraints.video.frameRate = {}; - constraints.video.frameRate.min = minFramerateInput.value; - } - if (maxFramerateInput.value !== '0') { - constraints.video.frameRate = constraints.video.frameRate || {}; - constraints.video.frameRate.max = maxFramerateInput.value; - } - - return constraints; - } - - function displayGetUserMediaConstraints() { - const constraints = getUserMediaConstraints(); - console.log('getUserMedia constraints', constraints); - getUserMediaConstraintsDiv.textContent = JSON.stringify(constraints, null, ' '); - } - - async function createPeerConnection() { - connectButton.disabled = true; - hangupButton.disabled = false; - - // bytesPrev = 0; - // timestampPrev = 0; - localPeerConnection = new RTCPeerConnection(null); - remotePeerConnection = new RTCPeerConnection(null); - localStream.getTracks().forEach(track => localPeerConnection.addTrack(track, localStream)); - console.log('localPeerConnection creating offer'); - localPeerConnection.onnegotiationneeded = () => { - console.log('Negotiation needed - localPeerConnection'); - }; - remotePeerConnection.onnegotiationneeded = () => { - console.log('Negotiation needed - remotePeerConnection'); - }; - - localPeerConnection.onicecandidate = async event => { - console.log('Candidate localPeerConnection'); - try { - // eslint-disable-next-line no-unused-vars - const ignore = await remotePeerConnection.addIceCandidate(event.candidate); - onAddIceCandidateSuccess(); - } catch (e) { - onAddIceCandidateError(e); - } - }; - remotePeerConnection.onicecandidate = async event => { - console.log('Candidate remotePeerConnection'); - try { - // eslint-disable-next-line no-unused-vars - const ignore = await localPeerConnection.addIceCandidate(event.candidate); - onAddIceCandidateSuccess(); - } catch (e) { - onAddIceCandidateError(e); - } - }; - remotePeerConnection.ontrack = e => { - if (remoteVideo.srcObject !== e.streams[0]) { - console.log('remotePeerConnection got stream'); - remoteVideo.srcObject = e.streams[0]; - } - }; - - try { - const offer = await localPeerConnection.createOffer(); - console.log('localPeerConnection offering'); - localPeerConnection.setLocalDescription(offer); - remotePeerConnection.setRemoteDescription(offer); - - const answer = await remotePeerConnection.createAnswer(); - console.log('remotePeerConnection answering'); - remotePeerConnection.setLocalDescription(answer); - localPeerConnection.setRemoteDescription(answer); - } catch (e) { - console.log(e); - } - } - - function onAddIceCandidateSuccess() { - console.log('AddIceCandidate success.'); - } - - function onAddIceCandidateError(error) { - console.log('Failed to add Ice Candidate: ' + error.toString()); - } - - // Display statistics - setInterval(() => { - if (localPeerConnection && remotePeerConnection) { - // Dump old statistics to the right - localPeerConnection.getStats(results => { - const statsString = dumpOldStats(results); - receiverStatsDiv.innerHTML = '

    Old stats - local

    ' + statsString; - }); - remotePeerConnection.getStats(results => { - const statsString = dumpOldStats(results); - receiverStatsDiv.innerHTML += '

    END

    Old stats - remote

    ' + statsString; - }); - // Display new-style getstats to the left - localPeerConnection.getStats(null) - .then(results => { - const statsString = dumpStats(results); - senderStatsDiv.innerHTML = '

    New stats

    ' + statsString; - }, err => { - console.log(err); - }); - } else { - console.log('Not connected yet'); - } - // Collect some stats from the video tags. - if (localVideo.videoWidth) { - localVideoStatsDiv.innerHTML = 'Video dimensions: ' + - localVideo.videoWidth + 'x' + localVideo.videoHeight + 'px'; - } - if (remoteVideo.videoWidth) { - remoteVideoStatsDiv.innerHTML = 'Video dimensions: ' + - remoteVideo.videoWidth + 'x' + remoteVideo.videoHeight + 'px'; - } - }, 1000); - - function dumpStats(results) { - let statsString = ''; - results.forEach(res => { - statsString += '

    Report type='; - statsString += res.type; - statsString += '

    \n'; - statsString += 'id ' + res.id + '
    \n'; - statsString += 'time ' + res.timestamp + '
    \n'; - Object.keys(res).forEach(k => { - if (k !== 'timestamp' && k !== 'type' && k !== 'id') { - statsString += k + ': ' + res[k] + '
    \n'; - } - }); - }); - return statsString; - } - - function dumpOldStats(results) { - let statsString = ''; - console.log(JSON.stringify(results)); - results.result().forEach(res => { - console.log(JSON.stringify(res)); - statsString += '

    Report type='; - statsString += res.type; - statsString += '

    \n'; - statsString += 'id ' + res.id + '
    \n'; - statsString += 'time ' + res.timestamp + '
    \n'; - res.names().forEach(k => { - statsString += k + ': ' + res.stat(k) + '
    \n'; - }); - }); - return statsString; - } - - // Utility to show the value of a range in a sibling span element - function displayRangeValue(e) { - const span = e.target.parentElement.querySelector('span'); - span.textContent = e.target.value; - displayGetUserMediaConstraints(); - } - - // Start it all up - displayGetUserMediaConstraints(); -});