How to output RTMP using the Cloudinary Video Player?

Bruno Gonzales

October 21, 2022 08:29

I have been trying to make a simple webpage that can render a video signal that I'm sending from OBS. I followed this guide I tried the React, Vue and Nuxt modules but seem that they are more oriented to serve content that is already stored.

My manifest looks like this:

{
  "input_type": "rtmp",
  "targets": [{"kind": "hls"}],
  "idle_timeout_sec": 120,
  "max_runtime_sec": 32000
}

0

• Official comment

  

  Danny Valentine

  October 21, 2022 13:39

  Hi Bruno.

  Thanks for getting in touch.

  Once you upload the manifest file, you should get back a JSON response with a live_input_uri and a live_output_uri. It takes a while to come back so please do be patient. Taking the live_input_uri, The server part is everything up to and including your cloudname. e.g. rtmp://44.208.156.139:1935/<cloud_name>
  The stream key is the string after your cloudname. e.g. v3ybjuunps7shrwdkqux_7170cb0b8872f079fbdbdd92.

  Open up your OBS settings, input your Server and Stream Key and start streaming. The resulting video should then be available at the destination returned in the live_output_uri - for example https://res.cloudinary.com/dannyv/video/live/v3ybjuunps7shrwdkqux.m3u8. Make sure it works using something like VLC or use a browser extension that allows you to play back HLS streams such as Native HLS Playback for Chrome.

  Once it's working, you should be able to set up your video player source using the full live_output_uri, rather than just a public ID, and make sure you define sourceTypes: ['hls']. You can also optionally include a streaming profile if you wish. When you're done it should look something like this:

  // Initialize player
  var player = cloudinary.videoPlayer('example-player', { cloud_name: 'your_cloud' })
  
  // Modify player source and play hls adaptive streaming
  player.source('https://res.cloudinary.com/dannyv/video/live/v3ybjuunps7shrwdkqux.m3u8', { sourceTypes: ['hls'],
  transformation: { streaming_profile: 'full_hd' } }).play();

  I've put together a quick JSFiddle for you to demonstrate, which is available here: https://jsfiddle.net/dannyv_cloudinary/4dm6yz2q/

  I hope this helps. Please let me know if you have any further questions.

  Many thanks,
  -Danny

Post is closed for comments.