Skip to content

Commit

Permalink
Merge branch 'gh-pages' into muxer
Browse files Browse the repository at this point in the history
  • Loading branch information
@fippo
fippo authored Dec 21, 2023
2 parents 4915da5 + 2cefe37 commit ab1605c
Show file tree
Hide file tree
Showing 9 changed files with 102 additions and 83 deletions.
2 changes: 1 addition & 1 deletion src/content/devices/multi/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function changeAudioDestination(event) {
const deviceId = event.target.value;
const outputSelector = event.target;
// FIXME: Make the media element lookup dynamic.
const element = event.path[2].childNodes[1];
const element = event.composedPath()[2].childNodes[1];
attachSinkId(element, deviceId, outputSelector);
}

Expand Down
32 changes: 15 additions & 17 deletions src/content/extensions/svc/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,9 @@ async function start() {
alert(`getUserMedia() error: ${e.name}`);
}
if (supportsSetCodecPreferences) {
const {codecs} = RTCRtpSender.getCapabilities('video');
const {codecs} = RTCRtpReceiver.getCapabilities('video');
codecs.forEach(codec => {
if (['video/red', 'video/ulpfec', 'video/rtx'].includes(codec.mimeType)) {
if (['video/red', 'video/ulpfec', 'video/rtx', 'video/flexfec-03'].includes(codec.mimeType)) {
return;
}
const option = document.createElement('option');
Expand Down Expand Up @@ -215,21 +215,6 @@ async function call() {
}
});
console.log('Added local stream to pc1');
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 selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
console.log(codecs);
const transceiver = pc1.getTransceivers().find(t => t.sender && t.sender.track === localStream.getVideoTracks()[0]);
transceiver.setCodecPreferences(codecs);
console.log('Preferred video codec', selectedCodec);
}
}
codecPreferences.disabled = true;
scalabilityMode.disabled = true;

Expand Down Expand Up @@ -293,6 +278,19 @@ function gotRemoteStream(e) {
remoteVideo.srcObject = e.streams[0];
console.log('pc2 received remote stream');
}
if (supportsSetCodecPreferences) {
const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
if (preferredCodec.value !== '') {
const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
const {codecs} = RTCRtpReceiver.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
e.transceiver.setCodecPreferences(codecs);
console.log('Preferred video codec', selectedCodec);
}
}
}

async function onCreateAnswerSuccess(desc) {
Expand Down
2 changes: 1 addition & 1 deletion src/content/getusermedia/getdisplaymedia/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div id="container">
<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>getDisplayMedia</span></h1>

<video id="gum-local" autoplay playsinline muted></video>
<video id="video" autoplay playsinline muted></video>
<button id="startButton" disabled>Start</button>
<fieldset id="options" style="display:none">
<legend>Advanced options</legend>
Expand Down
29 changes: 29 additions & 0 deletions src/content/insertable-streams/endtoend-encryption/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ let localStream;
// eslint-disable-next-line no-unused-vars
let remoteStream;

// Preferring a certain codec is an expert option without GUI.
// Use opus by default.
// eslint-disable-next-line prefer-const
let preferredAudioCodecMimeType = 'audio/opus';
// Use VP8 by default to limit depacketization issues.
// eslint-disable-next-line prefer-const
let preferredVideoCodecMimeType = 'video/VP8';

let hasEnoughAPIs = !!window.RTCRtpScriptTransform;

if (!hasEnoughAPIs) {
Expand Down Expand Up @@ -141,6 +149,25 @@ function setupReceiverTransform(receiver) {
}, [readable, writable]);
}

function maybeSetCodecPreferences(trackEvent) {
if (!'setCodecPreferences' in window.RTCRtpTransceiver.prototype) return;
if (trackEvent.track.kind === 'audio' && preferredAudioCodecMimeType ) {
const {codecs} = RTCRtpReceiver.getCapabilities('audio');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredAudioCodecMimeType);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
trackEvent.transceiver.setCodecPreferences(codecs);
} else if (trackEvent.track.kind === 'video' && preferredVideoCodecMimeType) {
const {codecs} = RTCRtpReceiver.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
trackEvent.transceiver.setCodecPreferences(codecs);
}
}

function call() {
callButton.disabled = true;
hangupButton.disabled = false;
Expand All @@ -151,13 +178,15 @@ function call() {
// to both places.
startToMiddle = new VideoPipe(localStream, true, false, e => {
// Do not setup the receiver transform.
maybeSetCodecPreferences(e);
videoMonitor.srcObject = e.streams[0];
});
startToMiddle.pc1.getSenders().forEach(setupSenderTransform);
startToMiddle.negotiate();

startToEnd = new VideoPipe(localStream, true, true, e => {
setupReceiverTransform(e.receiver);
maybeSetCodecPreferences(e);
gotRemoteStream(e.streams[0]);
});
startToEnd.pc1.getSenders().forEach(setupSenderTransform);
Expand Down
24 changes: 5 additions & 19 deletions src/content/insertable-streams/endtoend-encryption/js/videopipe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,48 +10,34 @@
//
// The usage of this abstraction:
// var pipe = new VideoPipe(mediastream, handlerFunction);
// handlerFunction = function(mediastream) {
// handlerFunction = function(MediaStreamTrackEvent) {
// do_something
// }
// pipe.close();
//
// The VideoPipe will set up 2 PeerConnections, connect them to each
// other, and call HandlerFunction when the stream is available in the
// second PeerConnection.
// other, and call HandlerFunction when the stream's track is available
// in the second PeerConnection.
//
'use strict';

// Preferring a certain codec is an expert option without GUI.
// Use VP8 by default to limit depacketization issues.
// eslint-disable-next-line prefer-const
let preferredVideoCodecMimeType = 'video/VP8';

function VideoPipe(stream, forceSend, forceReceive, handler) {
this.pc1 = new RTCPeerConnection({
encodedInsertableStreams: forceSend,
});
this.pc2 = new RTCPeerConnection({
encodedInsertableStreams: forceReceive,
});

stream.getTracks().forEach((track) => this.pc1.addTrack(track, stream));
this.pc2.ontrack = handler;
if (preferredVideoCodecMimeType && 'setCodecPreferences' in window.RTCRtpTransceiver.prototype) {
const {codecs} = RTCRtpSender.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
const transceiver = this.pc1.getTransceivers().find(t => t.sender && t.sender.track === stream.getVideoTracks()[0]);
transceiver.setCodecPreferences(codecs);
}
stream.getTracks().forEach((track) => this.pc1.addTrack(track, stream));
}

VideoPipe.prototype.negotiate = async function() {
this.pc1.onicecandidate = e => this.pc2.addIceCandidate(e.candidate);
this.pc2.onicecandidate = e => this.pc1.addIceCandidate(e.candidate);

const offer = await this.pc1.createOffer();
// Disable video/red to allow for easier inspection in Wireshark.
await this.pc2.setRemoteDescription({type: 'offer', sdp: offer.sdp.replace('red/90000', 'green/90000')});
await this.pc1.setLocalDescription(offer);

Expand Down
7 changes: 5 additions & 2 deletions src/content/insertable-streams/endtoend-encryption/js/worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ let currentKeyIdentifier = 0;
// which is 10 bytes for key frames and 3 bytes for delta frames.
// For opus (where encodedFrame.type is not set) this is the TOC byte from
// https://tools.ietf.org/html/rfc6716#section-3.1
// TODO: make this work for other codecs.
//
// It makes the (encrypted) video and audio much more fun to watch and listen to
// as the decoder does not immediately throw a fatal error.
Expand All @@ -39,12 +40,14 @@ function dump(encodedFrame, direction, max = 16) {
for (let j = 0; j < data.length && j < max; j++) {
bytes += (data[j] < 16 ? '0' : '') + data[j].toString(16) + ' ';
}
const metadata = encodedFrame.getMetadata();
console.log(performance.now().toFixed(2), direction, bytes.trim(),
'len=' + encodedFrame.data.byteLength,
'type=' + (encodedFrame.type || 'audio'),
'ts=' + encodedFrame.timestamp,
'ssrc=' + encodedFrame.getMetadata().synchronizationSource,
'pt=' + (encodedFrame.getMetadata().payloadType || '(unknown)')
'ssrc=' + metadata.synchronizationSource,
'pt=' + (metadata.payloadType || '(unknown)'),
'mimeType=' + (metadata.mimeType || '(unknown)'),
);
}

Expand Down
35 changes: 17 additions & 18 deletions src/content/peerconnection/audio/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const supportsSetCodecPreferences = window.RTCRtpTransceiver &&
if (supportsSetCodecPreferences) {
codecSelector.style.display = 'none';

const {codecs} = RTCRtpSender.getCapabilities('audio');
const {codecs} = RTCRtpReceiver.getCapabilities('audio');
codecs.forEach(codec => {
if (['audio/CN', 'audio/telephone-event'].includes(codec.mimeType)) {
return;
Expand Down Expand Up @@ -98,23 +98,6 @@ function gotStream(stream) {
localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
console.log('Adding Local Stream to peer connection');

if (supportsSetCodecPreferences) {
const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
if (preferredCodec.value !== '') {
const [mimeType, clockRate, sdpFmtpLine] = preferredCodec.value.split(' ');
const {codecs} = RTCRtpSender.getCapabilities('audio');
console.log(mimeType, clockRate, sdpFmtpLine);
console.log(JSON.stringify(codecs, null, ' '));
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.clockRate === parseInt(clockRate, 10) && c.sdpFmtpLine === sdpFmtpLine);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
const transceiver = pc1.getTransceivers().find(t => t.sender && t.sender.track === localStream.getAudioTracks()[0]);
transceiver.setCodecPreferences(codecs);
console.log('Preferred video codec', selectedCodec);
}
}

pc1.createOffer(offerOptions)
.then(gotDescription1, onCreateSessionDescriptionError);

Expand Down Expand Up @@ -207,6 +190,22 @@ function hangup() {
}

function gotRemoteStream(e) {
if (supportsSetCodecPreferences) {
const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
if (preferredCodec.value !== '') {
const [mimeType, clockRate, sdpFmtpLine] = preferredCodec.value.split(' ');
const {codecs} = RTCRtpReceiver.getCapabilities('audio');
console.log(mimeType, clockRate, sdpFmtpLine);
console.log(JSON.stringify(codecs, null, ' '));
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.clockRate === parseInt(clockRate, 10) && c.sdpFmtpLine === sdpFmtpLine);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
e.transceiver.setCodecPreferences(codecs);
console.log('Preferred video codec', selectedCodec);
}
}

if (audio2.srcObject !== e.streams[0]) {
audio2.srcObject = e.streams[0];
console.log('Received remote stream');
Expand Down
30 changes: 15 additions & 15 deletions src/content/peerconnection/change-codecs/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,21 +112,6 @@ async function call() {

localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
console.log('Added local stream to pc1');
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 selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
console.log(codecs);
const transceiver = pc1.getTransceivers().find(t => t.sender && t.sender.track === localStream.getVideoTracks()[0]);
transceiver.setCodecPreferences(codecs);
console.log('Preferred video codec', selectedCodec);
}
}
codecPreferences.disabled = true;

try {
Expand Down Expand Up @@ -185,6 +170,21 @@ function onSetSessionDescriptionError(error) {
}

function gotRemoteStream(e) {
// Set codec preferences on the receiving side.
if (e.track.kind === 'video' && supportsSetCodecPreferences) {
const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
if (preferredCodec.value !== '') {
const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
const {codecs} = RTCRtpReceiver.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
e.transceiver.setCodecPreferences(codecs);
console.log('Receiver\'s preferred video codec', selectedCodec);
}
}

if (remoteVideo.srcObject !== e.streams[0]) {
remoteVideo.srcObject = e.streams[0];
console.log('pc2 received remote stream');
Expand Down
24 changes: 14 additions & 10 deletions src/content/peerconnection/negotiate-timing/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,18 @@ async function call() {
pc1.oniceconnectionstatechange = e => onIceStateChange(pc1, e);
pc2.oniceconnectionstatechange = e => onIceStateChange(pc2, e);
pc2.addEventListener('track', gotRemoteStream, {once: true});
if (preferredVideoCodecMimeType) {
pc2.ontrack = (e) => {
if (e.track.kind === 'video') {
const {codecs} = RTCRtpReceiver.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
e.transceiver.setCodecPreferences(codecs);
}
};
}

localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
console.log('Added local stream to pc1');
Expand All @@ -156,7 +168,7 @@ async function onIceCandidate(pc, event) {
if (event.candidate) {
console.log(`${getName(pc)} emitted ICE candidate for index ${event.candidate.sdpMLineIndex}:\n${event.candidate.candidate}`);
} else {
console.log(`$getName(pc)} ICE NULL candidate`);
console.log(`${getName(pc)} ICE NULL candidate`);
}
await getOtherPc(pc).addIceCandidate(event.candidate);
console.log(`${getName(pc)} addIceCandidate success`);
Expand All @@ -175,15 +187,7 @@ function adjustTransceiverCounts(pc, videoCount) {
if (currentVideoCount < videoCount) {
console.log('Adding ' + (videoCount - currentVideoCount) + ' transceivers');
for (let i = currentVideoCount; i < videoCount; ++i) {
const transceiver = pc.addTransceiver('video');
if (preferredVideoCodecMimeType) {
const {codecs} = RTCRtpSender.getCapabilities('video');
const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
const selectedCodec = codecs[selectedCodecIndex];
codecs.splice(selectedCodecIndex, 1);
codecs.unshift(selectedCodec);
transceiver.setCodecPreferences(codecs);
}
pc.addTransceiver('video');
}
} else if (currentVideoCount > videoCount) {
console.log('Stopping ' + (currentVideoCount - videoCount) + ' transceivers');
Expand Down

0 comments on commit ab1605c

Please sign in to comment.