IP Cam (RTSP) Stream 使用 wowza 转码并嵌入网站

Question

我在配置以下案例时遇到问题：我的客户希望将他的监控摄像头嵌入网站。网页和直播应该可以通过任何设备和浏览器访问，无需使用插件。

我试过用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

我可以在 wowza 测试播放器中毫无问题地观看流。我看到他们正在用 flash 播放器观看。

我尝试在本地 xampp (apache) 上使用以下 html5 代码嵌入转码流：

<!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 可以在最新的 chrome 浏览器中使用。我可以将 wowza 转码配置为 mp4 supported format in html5 吗？实现我的目标的下一步是什么？

问候马蒂亚斯

Answer 1

HTML5 不支持所有浏览器和设备的 Wowza 输出格式。参见：Wowza Blog - A Note on HTML5

他们推荐使用为所有浏览器提供回退的 JWPlayer。请注意，桌面版 HLS 仅在高级播放器中可用。参见 JWPlayer - Using HLS Streaming

Wowza - How to use JWPlayer with the Wowza Streaming Engine 按照 support forum.

上的推荐

而您的 type 是错误的。例子：HLS有type="application/x-mpegURL"等

IP Cam (RTSP) Stream 使用 wowza 转码并嵌入网站

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

html

video

wowza

ip-camera