Search code examples
htmlvideowowzaip-camera

IP Cam (RTSP) Stream transcoded with wowza and embeded in a website

I am having problems configuring following case: My Customer would like to have his Surveillance Cameras embeded to a Website. The webpage and the livestreams should be accessible by any Device and Browser without using plugins.

I have tried following with wowza:

Incoming Stream is: rtsp://172.17.27.62/media/video1 (Sony Ipela CH140)
Transcoding: Transrate (Default)

source  mp4:${SourceStreamName}_source  
720p    mp4:${SourceStreamName}_720p    
360p    mp4:${SourceStreamName}_360p    
240p    mp4:${SourceStreamName}_240p    
160p    mp4:${SourceStreamName}_160p

I can watch the streams without problems in wowza test players. I see that they are being watched with flash player.

I try to embed the transcoded streams with following html5 code on my local xampp (apache):

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/manifest.f4m" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/playlist.m3u8" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/Manifest" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/manifest.mpd" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script> 
</body> 
</html>

none of them work in latest chrome browser. Can I configure the wowza transcoding in to mp4 supported format in html5? What would be the next steps to reach my goal?

Regards Mathias

Solution

  • The Wowza output formats are not supported in HTML5 across all browsers and devices. See: Wowza Blog - A Note on HTML5

    They recommend using JWPlayer which provides fall-backs for all browsers. Note that HLS on desktop is available only in the Premium player. See JWPlayer - Using HLS Streaming

    Wowza - How to use JWPlayer with the Wowza Streaming Engine as recommended on the support forum.

    And your type's are wrong. Example: HLS has type="application/x-mpegURL" and so on.