Skip to content

Commit

Permalink
Merge pull request #2 from dolbyio-samples/feedback
Browse files Browse the repository at this point in the history 
Incorporated feedback, making quotation mark usage consistent
  • Loading branch information
@j12y
j12y authored Oct 16, 2023
2 parents d256ead + db88e12 commit fc75569
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 84 deletions.
29 changes: 16 additions & 13 deletions broadcast-app/final.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,54 +45,57 @@ <h1>Broadcast</h1>
const main = async () => {

// Step 2.2b: Set your account id and stream name while Getting Started
const yourPublishingToken = "ENTER PUBLISHING TOKEN";
const yourPublishingToken = 'ENTER PUBLISHING TOKEN';
const yourStreamAccountId = 'ENTER ACCOUNT ID';
const yourStreamName = "ENTER YOUR STREAM NAME";
const yourStreamName = 'ENTER YOUR STREAM NAME';

const tokenGenerator = () =>
window.millicast.Director.getPublisher({
millicast.Director.getPublisher({
token: yourPublishingToken,
streamName: yourStreamName,
});

// Callback to generate a publisher token with credentials
const publisher = new window.millicast.Publish(yourStreamName, tokenGenerator);
const publisher = new millicast.Publish(yourStreamName, tokenGenerator);

// Step 2.2c: Attach a millicast view to the placeholder node
const startStreaming = async () => {

// Request access to the video camera and microphone
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const mediaStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true
});

// Provide mirror in a video element of the capture
const videoNode = document.getElementById("streaming-video-placeholder");
const videoNode = document.getElementById('streaming-video-placeholder');
videoNode.srcObject = mediaStream;
videoNode.hidden = false;
videoNode.autoplay = true;

// Broadcast captured audio and video
const broadcastOptions = {
mediaStream: mediaStream
mediaStream: mediaStream,
};
try {
await publisher.connect(broadcastOptions);
console.log("Broadcast has begun.");
console.log('Broadcast has begun.');

// Example to playback with the hosted viewer
const viewerUrl = `https://viewer.millicast.com?streamId=${yourStreamAccountId}/${yourStreamName}`;
document.getElementById("viewer-url").innerHTML = `<a href="${viewerUrl}" target="_new">${viewerUrl}</a>`;
document.getElementById('viewer-url').innerHTML = `<a href="${viewerUrl}" target="_new">${viewerUrl}</a>`;
} catch (e) {
console.error("Failed to begin broadcast: ", e);
console.error('Failed to begin broadcast: ', e);
}
}

// Handle button click to begin
document.getElementById("btn-start").onclick = async () => {
document.getElementById('btn-start').onclick = async () => {
await startStreaming();
};

// Step 2.2d: Stop the broadcast
document.getElementById("btn-stop").onclick = () => {
document.getElementById('btn-stop').onclick = () => {
publisher.stop();
location.reload();
}
Expand All @@ -103,4 +106,4 @@ <h1>Broadcast</h1>
</script>

</body>
</html>
</html>
148 changes: 77 additions & 71 deletions playback-app/final.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<title>Dolby.io Getting Started with Streaming Web SDK</title>
<link rel="shortcut icon" href="https://go.dolby.io/hubfs/Dolby_April2021/images/favicon-32x32.png">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

<!-- Step 2.1b: Include Millicast Web SDK -->
<script src="https://cdn.jsdelivr.net/npm/@millicast/sdk/dist/millicast.umd.min.js"></script>
<title>Dolby.io Getting Started with Streaming Web SDK</title>
<link rel="shortcut icon" href="https://go.dolby.io/hubfs/Dolby_April2021/images/favicon-32x32.png">

<!-- Bootstrap Bundle -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- Step 2.1b: Include Millicast Web SDK -->
<script src="https://cdn.jsdelivr.net/npm/@millicast/sdk/dist/millicast.umd.min.js"></script>

<div class="container bg-dark text-white gx-4 px-4 py-4 mt-3 rounded">
<img src="https://go.dolby.io/hubfs/raw_assets/public/Dolby_April2021/images/dolby-io-logo.svg"/>
<h1>Getting Started with Streaming Web SDK</h1>
</div>
<!-- Bootstrap Bundle -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>

<div class="container px-4 mt-4">
<div class="row justify-content-around mt-3">
<div class="col-8 shadow p-3 mb-5 bg-body rounded text-center">
<h1>Playback</h1>
<video width="640" height="360" id="streaming-video-placeholder" class="vidBox" controls>
This browser does not support video playback.
</video>
</div>
<div class="container bg-dark text-white gx-4 px-4 py-4 mt-3 rounded">
<img src="https://go.dolby.io/hubfs/raw_assets/public/Dolby_April2021/images/dolby-io-logo.svg" />
<h1>Getting Started with Streaming Web SDK</h1>
</div>

<div class="container px-4 mt-4">
<div class="row justify-content-around mt-3">
<div class="col-8 shadow p-3 mb-5 bg-body rounded text-center">
<h1>Playback</h1>
<video width="640" height="360" id="streaming-video-placeholder" class="vidBox" controls>
This browser does not support video playback.
</video>
</div>
</div>

<!-- Bootstrap Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Dolby.io Starter Application -->
<script type="text/javascript">

const main = async () => {

// Step 2.1c: Set your account id and stream name while Getting Started
const yourStreamAccountId = 'ENTER ACCOUNT ID';
const yourStreamName = 'ENTER YOUR STREAM NAME';

// Callback to generate a subscriber token with credentials
const tokenGenerator = () => millicast.Director.getSubscriber({
streamName: yourStreamName,
streamAccountId: yourStreamAccountId
})

// Step 2.1d: Attach a millicast view to the placeholder node
const videoNode = document.getElementById('streaming-video-placeholder');
const millicastView = new millicast.View(yourStreamName, tokenGenerator);
millicastView.on("track", (event) => {
console.log("Stream has started.");
videoNode.srcObject = event.streams[0];
videoNode.hidden = false;
videoNode.autoplay = true;
});

// Step 2.1e: Start connection to a publishing stream
try {
const options = {
}
await millicastView.connect(options);
} catch (e) {
if (!millicastView.isActive()) {
console.log("Stream is not live, the broadcast will begin soon.");
}

console.log("Connection failed: ", e);
millicastView.reconnect();
</div>

<!-- Bootstrap Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>


<!-- Dolby.io Starter Application -->
<script type="text/javascript">

const main = async () => {

// Step 2.1c: Set your account id and stream name while Getting Started
const yourStreamAccountId = 'ENTER ACCOUNT ID';
const yourStreamName = 'ENTER YOUR STREAM NAME';

// Callback to generate a subscriber token with credentials
const tokenGenerator = () => millicast.Director.getSubscriber({
streamName: yourStreamName,
streamAccountId: yourStreamAccountId
})

// Step 2.1d: Attach a millicast view to the placeholder node
const videoNode = document.getElementById('streaming-video-placeholder');
const millicastView = new millicast.View(yourStreamName, tokenGenerator);
millicastView.on('track', (event) => {
console.log('Stream has started.');
videoNode.srcObject = event.streams[0];
videoNode.hidden = false;
videoNode.autoplay = true;
});

// Step 2.1e: Start connection to a publishing stream
try {
const options = {
}
};
await millicastView.connect(options);
} catch (e) {
if (!millicastView.isActive()) {
console.log('Stream is not live, the broadcast will begin soon.');
}

console.log('Connection failed: ', e);
millicastView.reconnect();
}
};

main();

main();
</script>

</script>
</body>

</body>
</html>
</html>

0 comments on commit fc75569

Please sign in to comment.