Omar Okasha - Video Streaming

mariamyoussefwiliam commented 2 years ago

https://google.github.io/shaka-packager/html/docker_instructions.html

https://google.github.io/shaka-packager/html/tutorials/dash.html

@omarokasha1 Check this Out

mariamyoussefwiliam commented 2 years ago


<html>
  <head>
    <!-- Shaka Player compiled library: -->
    <script type="application/javascript" >
        console.log("TEST");console.log("TEST");console.log("TEST");
    </script>
    <script src="node_modules/shaka-player/dist/shaka-player.compiled.js"></script>
    <!-- Your application source: -->
    <script src="myapp.js"></script>
  </head>
  <body>
    <video id="video"
           width="640"

           controls autoplay></video>
           <button onclick="initPlayer('Videos/h264.mpd')" id="Video1">Video 1</button>

           <button onclick="initPlayer('Videos/1.mpd')" id="Video2">Video 2</button>

           <button onclick="initPlayer('Videos/2.mpd')" id="Video3">Video 3</button>
  </body>
</html>

mariamyoussefwiliam commented 2 years ago

function initApp() {
  // Install built-in polyfills to patch browser incompatibilities.

  shaka.polyfill.installAll();
  console.log('111');

  // Check to see if the browser supports the basic APIs Shaka needs.
  if (shaka.Player.isBrowserSupported()) {
    // Everything looks good!
    console.log('11111');
    initPlayer("Videos/1.mpd");
  } else {
    console.log('11111111');
    // This browser does not have the minimum set of APIs we need.
    console.error('Browser not supported!');
  }
}

async function initPlayer(manifestUri) {
  console.log(manifestUri);
  // Create a Player instance.
  const video = document.getElementById('video');

  const player = new shaka.Player(video);
  console.log('2');
  // Attach player to the window to make it easy to access in the JS console.
  window.player = player;
    console.log('3');
  // Listen for error events.
  player.addEventListener('error', onErrorEvent);

  // Try to load a manifest.
  // This is an asynchronous process.
  console.log('Start');
  try {
    console.log('Omar');

    await player.load(manifestUri);
    // This runs if the asynchronous load is successful.

    console.log('The video has now been loaded!');
    console.log('The video has now been loaded!');
  } catch (e) {
    console.log('Hi');
    // onError is executed if the asynchronous load fails.
    onError(e);
  }
}

function onErrorEvent(event) {
  // Extract the shaka.util.Error object from the event.
  onError(event.detail);
}

function onError(error) {
  // Log the error.
  console.error('Error code', error.code, 'object', error);
}

document.addEventListener('DOMContentLoaded', initApp);

mariamyoussefwiliam commented 2 years ago

function initApp() { // Install built-in polyfills to patch browser incompatibilities.

shaka.polyfill.installAll(); console.log('111');

// Check to see if the browser supports the basic APIs Shaka needs. if (shaka.Player.isBrowserSupported()) { // Everything looks good! console.log('11111'); initPlayer("Videos/1.mpd"); } else { console.log('11111111'); // This browser does not have the minimum set of APIs we need. console.error('Browser not supported!'); } }

async function initPlayer(manifestUri) { console.log(manifestUri); // Create a Player instance. const video = document.getElementById('video');

if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); }

const player = new shaka.Player(video); console.log('2'); // Attach player to the window to make it easy to access in the JS console. window.player = player; console.log('3'); // Listen for error events. player.addEventListener('error', onErrorEvent);

// Try to load a manifest. // This is an asynchronous process. console.log('Start'); try { console.log('Omar');

await player.load(manifestUri);
// This runs if the asynchronous load is successful.

console.log('The video has now been loaded!');
console.log('The video has now been loaded!');

} catch (e) { console.log('Hi'); // onError is executed if the asynchronous load fails. onError(e); } }

function onErrorEvent(event) { // Extract the shaka.util.Error object from the event. onError(event.detail); }

function onError(error) { // Log the error. console.error('Error code', error.code, 'object', error); }

document.addEventListener('DOMContentLoaded', initApp);

mariamyoussefwiliam commented 2 years ago

packager in=1.mp4,stream=video,out=video1.mp4 \ in=1.mp4,stream=audio,out=audio1.mp4 --mpd_output 1.mpd

mariamyoussefwiliam commented 2 years ago

Screenshot from 2022-02-28 19-48-11

mariamyoussefwiliam commented 2 years ago

@youssefelgebaly how can we do this ? this is omar okasha from Github Mariam

mariamyoussefwiliam commented 2 years ago

Contributors

This project exists thanks to all the people who contribute. [Contribute].

mariamyoussefwiliam commented 2 years ago

### Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/serialport/node-serialport/graphs/contributors"><img src="https://opencollective.com/serialport/contributors.svg?width=890&button=false" /></a>

omarokasha1 / TheFirstProject

Omar Okasha - Video Streaming #29

Contributors