好多开发者一直苦恼于如何在IE浏览器环境下，构建低延迟的RTSP或RTMP播放，对于RTSP流来说，好多公司通常的做法是把RTSP转RTMP，然后分发到RTMP服务器，然后服务器转http-flv出来，浏览器直接播放http-flv流，亦或通过flash控件直接播放RTMP流，还有就是，转hls流出来，缺点是hls流延迟更大。

以上方案未尝不可，如果对播放体验和延迟要求更高，最简单的做法是直接在IE浏览器下加载activex控件。

大牛直播SDK（Github: https://github.com/daniulive/SmarterStreaming）在现有SDK的基础上，扩展了ocx控件，用于IE浏览器下的低延迟RTMP或RTSP播放，不谦虚的说，也可能是行业内功能支持和延迟最好的RTMP和RTSP播放器(支持RTMP/RTSP H.265(hevc)播放)。

页面展示

1. 功能齐全的单画面RTMP流或RTSP流播放：

2. 同时播放4路RTMP流或RTSP流画面：

本地播放和集成说明：

点我下载DEMO

本地播放

DEMO说明

1_player_ocx.html：单个窗口功能展示。
4_player_ocx.html：4窗口功能展示。
SmartPlayer.exe：cs架构播放器。

运行网页播放端之前，请确保以管理员权限注册ocx控件：regplayerocx.bat右键-->“以管理员身份运行(A)”，同理，反注册也是需要管理员身份。

注意：大牛直播RTSP/RTMP播放OCX控件只适用于微软IE浏览器。

对应封装接口

  ULONG NT_SetLogPath();
  ULONG NT_Open();
  ULONG NT_Close();
  ULONG NT_StartPlay();
  ULONG NT_StopPlay();
  ULONG NT_SetMute(LONG is_mute);
  ULONG NT_SetURL(LPCTSTR url);
  ULONG NT_SetBuffer(LONG buffer);
  ULONG NT_SetRTSPTcpMode(LONG isUsingTCP);
  ULONG NT_SetRtspTimeout(LONG timeout);
  ULONG NT_SetRtspAutoSwitchTcpUdp(LONG is_auto_switch_tcp_udp);
  ULONG NT_SetFastStartup(LONG isFastStartup);
  ULONG NT_SetLowLatencyMode(LONG mode);
  ULONG NT_SetFlipVertical(LONG is_flip);
  ULONG NT_SetFlipHorizontal(LONG is_flip);
  ULONG NT_SetRotation(LONG degress);
  ULONG NT_SwitchURL(LPCTSTR url);
  ULONG NT_SetCaptureImagePath(LPCTSTR path);
  ULONG NT_CaptureImage();
  ULONG NT_SetRecorderDirectory(LPCTSTR dir);
  ULONG NT_SetRecorderFileMaxSize(ULONG size);
  ULONG NT_NT_SP_RecorderFileNameRuler(ULONG type, LPCTSTR file_name_prefix, LONG append_date, LONG append_time);
  ULONG NT_SetRecorderAudioTranscodeAAC(LONG is_transcode);
  ULONG NT_SetRecorderVideo(LONG is_record_video);
  ULONG NT_SetRecorderAudio(LONG is_record_audio);
  ULONG NT_StartRecorder();
  ULONG NT_StopRecorder();
  ULONG NT_FullScreen();
  void OnSDKEventReceived(ULONG event_id, ULONG param1);
  void OnVideoSizeReceived(ULONG width, ULONG height);

设置LOG存放路径：

ULONG CSmartPlayerActiveXCtrl::NT_SetLogPath(LPCTSTR log_path)

请于NT_Open() 之前调用，代码示例：

var obj = document.getElementById("SmartPlayerActiveX");
//如需记录log文件，请确保log路径存在, 如多级目录, 可按照"D:\\Daniulive\\log"类似格式设定, 记录文件名: smart_sdk.log
obj.NT_SetLogPath("D:\\");

接口说明：

1. ULONG NT_Open();

打开player实例；

2. ULONG NT_Close();

关闭player实例；

3. ULONG NT_StartPlay();

开始播放；

4. ULONG NT_StopPlay();

停止播放；

5. ULONG NT_SetMute(LONG is_mute);

设置实时静音；

6. ULONG NT_SetURL(LPCTSTR url);

设置播放的RTMP或RTSP url；

7. ULONG NT_SetBuffer(LONG buffer);

设置buffer time，缓冲时间，单位：毫秒；

8. ULONG NT_SetRTSPTcpMode(LONG isUsingTCP);

设置RTSP TCP/UDP播放模式；

9. ULONG NT_SetRtspTimeout(LONG timeout);

设置RTSP超时时间；

10. ULONG NT_SetRtspAutoSwitchTcpUdp(LONG is_auto_switch_tcp_udp);

设置是否自动切换TCP/UDP模式；

11. ULONG NT_SetFastStartup(LONG isFastStartup);

设置是否快速启动；

12. ULONG NT_SetLowLatencyMode(LONG mode);

设置是否低延迟模式播放；

13. ULONG NT_SetFlipVertical(LONG is_flip);

设置垂直反转模式图像；

14. ULONG NT_SetFlipHorizontal(LONG is_flip);

设置水平反转图像；

15. ULONG NT_SetRotation(LONG degress);

设置旋转图像，可设定角度：0度 90度 180度 270度；

16. ULONG NT_SwitchURL(LPCTSTR url);

设置快速切换RTSP/RTMP url；

17. ULONG NT_SetCaptureImagePath(LPCTSTR path);

设置快照保存位置；

18. ULONG NT_CaptureImage();

设置实时快照功能；

19. ULONG NT_SetRecorderDirectory(LPCTSTR dir);

设置录像保存位置；

20. ULONG NT_SetRecorderFileMaxSize(ULONG size);

设置单个录像文件最大size，单位：兆；

21. ULONG NT_NT_SP_RecorderFileNameRuler(ULONG type, LPCTSTR file_name_prefix, LONG append_date, LONG append_time);

设置录像文件命名规则：是否需要前缀、是否添加日期、是否添加时间；

22. ULONG NT_SetRecorderAudioTranscodeAAC(LONG is_transcode);

设置录像音频文件是否转AAC后录制，支持PCMA/PCMU/SPEEX转AAC后录制文件；

23. ULONG NT_SetRecorderVideo(LONG is_record_video);

设置是否录制视频；

24. ULONG NT_SetRecorderAudio(LONG is_record_audio);

设置是否录制音频；

25. ULONG NT_StartRecorder();

开始录像；

26. ULONG NT_StopRecorder();

停止录像；

27. ULONG NT_FullScreen();

全屏显示窗口。

事件Event：

1. void OnSDKEventReceived(ULONG event_id, ULONG param1);

回调网络状态、buffering状态、下载速度等；

事件类型：

<script>
  var NT_EVENT_ID_SMART_PLAYER_SDK = 0x01000000;
  var NT_SP_E_EVENT_ID_BASE = NT_EVENT_ID_SMART_PLAYER_SDK;
  var NT_SP_E_EVENT_ID_CONNECTING       = NT_SP_E_EVENT_ID_BASE | 0x2;  /*连接中*/
  var NT_SP_E_EVENT_ID_CONNECTION_FAILED    = NT_SP_E_EVENT_ID_BASE | 0x3;  /*连接失败*/
  var NT_SP_E_EVENT_ID_CONNECTED        = NT_SP_E_EVENT_ID_BASE | 0x4;  /*已连接*/
  var NT_SP_E_EVENT_ID_DISCONNECTED     = NT_SP_E_EVENT_ID_BASE | 0x5;  /*断开连接*/
  var NT_SP_E_EVENT_ID_NO_MEDIADATA_RECEIVED  = NT_SP_E_EVENT_ID_BASE | 0x8;  /*收不到RTMP数据*/
  var NT_SP_E_EVENT_ID_RTSP_STATUS_CODE       = NT_SP_E_EVENT_ID_BASE | 0xB;  /*rtsp status code上报, 目前只上报401, param1表示status code*/
  /* 接下来请从0x81开始*/
  var NT_SP_E_EVENT_ID_START_BUFFERING = NT_SP_E_EVENT_ID_BASE | 0x81; /*开始缓冲*/
  var NT_SP_E_EVENT_ID_BUFFERING     = NT_SP_E_EVENT_ID_BASE | 0x82; /*缓冲中, param1 表示百分比进度*/
  var NT_SP_E_EVENT_ID_STOP_BUFFERING  = NT_SP_E_EVENT_ID_BASE | 0x83; /*停止缓冲*/
  var NT_SP_E_EVENT_ID_DOWNLOAD_SPEED  = NT_SP_E_EVENT_ID_BASE | 0x91; /*下载速度， param1表示下载速度，单位是(Byte/s)*/
  var NT_SP_E_EVENT_ID_PLAYBACK_REACH_EOS   = NT_SP_E_EVENT_ID_BASE | 0xa1; /*播放结束, 直播流没有这个事件，点播流才有*/
  var NT_SP_E_EVENT_ID_RECORDER_REACH_EOS   = NT_SP_E_EVENT_ID_BASE | 0xa2; /*录像结束, 直播流没有这个事件, 点播流才有*/
  var NT_SP_E_EVENT_ID_PULLSTREAM_REACH_EOS   = NT_SP_E_EVENT_ID_BASE | 0xa3; /*拉流结束, 直播流没有这个事件，点播流才有*/
  var NT_SP_E_EVENT_ID_DURATION = NT_SP_E_EVENT_ID_BASE | 0xa8; /*视频时长，如果是直播，则不上报，如果是点播的话, 若能从视频源获取视频时长的话，则上报， param1表示视频时长，单位是毫秒(ms)*/
</script>

调用展示：

<script language='javascript' for="SmartPlayerActiveX"  event="OnSDKEventReceived(event_id, param1)">
    // Test 1 - statically load the script (This is the basis for the hack)
    // Works on IE8, IE9, IE10 and IE11
    var show_str = "";
    var connection_status = event_id;
    if (connection_status != 0)
    {
      show_str += "链接状态: ";
      if (NT_SP_E_EVENT_ID_CONNECTING == connection_status)
      {
        show_str += "链接中";
      }
      else if (NT_SP_E_EVENT_ID_CONNECTION_FAILED == connection_status)
      {
        show_str += "链接失败";
      }
      else if (NT_SP_E_EVENT_ID_CONNECTED == connection_status)
      {
        show_str += "链接成功";
      }
      else if (NT_SP_E_EVENT_ID_DISCONNECTED == connection_status)
      {
        show_str += "链接断开";
      }
      else if (NT_SP_E_EVENT_ID_NO_MEDIADATA_RECEIVED == connection_status)
      {
        show_str += "收不到数据";
      }
    }
    var download_speed = -1;
    if (NT_SP_E_EVENT_ID_DOWNLOAD_SPEED == event_id)
    {
      download_speed = param1;
    }
    if (download_speed != -1)
    {
      show_str += "下载速度:" + (download_speed * 8 / 1000).toFixed(0) + "kbps " + (download_speed / 1024).toFixed(0) + "KB/s";
    }
    var buffer_status = 0;
    if (NT_SP_E_EVENT_ID_START_BUFFERING == event_id
    || NT_SP_E_EVENT_ID_BUFFERING == event_id
    || NT_SP_E_EVENT_ID_STOP_BUFFERING == event_id)
    {
      buffer_status = event_id;
    }
    if (buffer_status != 0)
    {
      show_str += "缓冲状态: ";
      if (NT_SP_E_EVENT_ID_START_BUFFERING == buffer_status)
      {
        show_str += "开始缓冲";
      }
      else if (NT_SP_E_EVENT_ID_BUFFERING == buffer_status)
      {
        show_str += "缓冲中" + param1 + "%";
      }
      else if (NT_SP_E_EVENT_ID_STOP_BUFFERING == buffer_status)
      {
        show_str += "结束缓冲";
      }
    }
    var EventMsgText = document.getElementById("EventMsg");
    EventMsgText.innerHTML = show_str;
  </script>

2. void OnVideoSizeReceived(ULONG width, ULONG height);

回调视频宽高信息。

调用展示：

<script language='javascript' for="SmartPlayerActiveX"  event="OnVideoSizeReceived(width, height)">
  // Test 1 - statically load the script (This is the basis for the hack)
  // Works on IE8, IE9, IE10 and IE11
  var VideoResolutionText = document.getElementById("VideoResolution");
  VideoResolutionText.innerHTML = width + "*" + height;
</script>

SDK接口调用实例：

播放和录像调用示例：

var is_player_opened = false;
var is_playing = false;
var is_recording = false;
function OpenPlayer()
{        
  if(is_player_opened)
  {
    return;
  }
  var obj = document.getElementById("SmartPlayerActiveX");
  //如需记录log文件，请确保log路径存在, 如多级目录, 可按照"D:\\Daniulive\\log"类似格式设定, 记录文件名: smart_sdk.log
  obj.NT_SetLogPath("D:\\");
  var ret = obj.NT_Open();
  if(ret == 0)
  {   
    //设置TCP/UDP模式
    var rtsp_tcp_mode = document.getElementById("rtspTcpMode").checked ? 1 : 0;
    obj.NT_SetRTSPTcpMode(rtsp_tcp_mode);
    //设置RTSP超时时间
    var rtsp_timeout = document.getElementById("rtspTimeout").value;
    obj.NT_SetRtspTimeout(rtsp_timeout);
    //设置是否自动切换TCP-UDP模式
    var rtsp_auto_switch_tcp_udp = document.getElementById("rtspAutoSwitchTcpUdp").checked ? 1 : 0;
    obj.NT_SetRtspAutoSwitchTcpUdp(rtsp_auto_switch_tcp_udp);
    //设置是否快速启动
    var fast_startup_mode = document.getElementById("fastStartupMode").checked ? 1 : 0;
    obj.NT_SetFastStartup(fast_startup_mode);
    //设置需要播放或录像的RTSP/RTMP url
    var url = document.getElementById("playorReocordUrl").value;
    obj.NT_SetURL(url);
    //设置实时截图路径(可自行设置或选取系统存在的文件夹), 如多级目录可按照"D:\\Daniulive\\image"类似格式设定
    //var image_path = "D:\\";
    obj.NT_SetCaptureImagePath(image_path);
    is_player_opened = true;
  }
}
function ClosePlayer()
{
  if(is_player_opened)
  {
    var obj = document.getElementById("SmartPlayerActiveX");
    obj.NT_Close();
    var EventMsgText = document.getElementById("EventMsg"); 
    EventMsgText.innerHTML = "";
    is_player_opened = false;
  }
}
function OnBnClickedPlay()
{
  if(!isIE())
  {
    alert("非IE浏览器，请用IE打开播放控件..");
    return;
  }
  if(!isActiveXInstalled())
  {
    alert("控件未加载，请先加载控件..");
    return;
  }
  if(is_playing)
  {
    StopPlayback();
  }
  else
  {
    StartPlayback();
  }
}
//开始播放
function StartPlayback() {
  if(!is_playing && !is_recording)
  {
    OpenPlayer();
  }
  var obj = document.getElementById("SmartPlayerActiveX");
  //设置是否启用低延迟模式
  var low_latency_mode = document.getElementById("lowlatencyMode").checked ? 1 : 0;
  obj.NT_SetLowLatencyMode(low_latency_mode);
  //设置缓冲时间
  var buffer_time = document.getElementById("bufferTime").value;
  obj.NT_SetBuffer(buffer_time);
  var ret = obj.NT_StartPlay();
  if(ret == 0)
  {
    is_playing = true;  
    var playBtnText = document.getElementById("playBtn");
    playBtnText.innerHTML = "停止播放";
  }   
}
//停止播放
function StopPlayback() {
  if(!is_playing)
  {
    return;
  }
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_StopPlay();
  is_playing = false;
  var playBtnText = document.getElementById("playBtn");
  playBtnText.innerHTML = "开始播放";
  if(!is_recording)
  {
    ClosePlayer();
  }
  var VideoResolutionText = document.getElementById("VideoResolution");
  VideoResolutionText.innerHTML = "";
}
function OnBnClickedRecord()
{
  if(!isIE())
  {
    alert("非IE浏览器，请用IE打开播放控件..");
    return;
  }
  if(!isActiveXInstalled())
  {
    alert("控件未加载，请先加载控件..");
    return;
  }
  if(is_recording)
  {
    StopRecorder();
  }
  else
  {
    StartRecorder();
  }
}
//开始录像
function StartRecorder() {
  if(!is_playing && !is_recording)
  {
    OpenPlayer();
  }
  var obj = document.getElementById("SmartPlayerActiveX");
  //设置实时录像存放路径(可自行设置或选取系统存在的文件夹), 如多级目录可按照"D:\\Daniulive\\rec"类似格式设定
  var rec_dir = "D:\\";
  obj.NT_SetRecorderDirectory(rec_dir);
  var rec_max_size = 200;
  obj.NT_SetRecorderFileMaxSize(rec_max_size);
  var type = 0;
  var file_name_prefix = "daniulive";
  var append_date = 1;
  var append_time = 1;
  obj.NT_NT_SP_RecorderFileNameRuler(type, file_name_prefix, append_date, append_time);
  var is_transcode = 1;
  obj.NT_SetRecorderAudioTranscodeAAC(is_transcode);
  var is_record_video = 1;
  obj.NT_SetRecorderVideo(is_record_video);
  var is_record_audio = 1;
  obj.NT_SetRecorderAudio(is_record_audio);
  var ret = obj.NT_StartRecorder();
  if(ret == 0)
  {
    is_recording = true;
    var recordBtnText = document.getElementById("recordBtn");
    recordBtnText.innerHTML = "停止录像";
  }
}
//停止录像
function StopRecorder() {
  if(!is_recording)
  {
    return;
  }
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_StopRecorder();
  is_recording = false;
  var recordBtnText = document.getElementById("recordBtn");
  recordBtnText.innerHTML = "开始录像";
  if(!is_playing)
  {
    ClosePlayer();
  }
}

快速切换URL调用示例：

//快速切换播放URL
function SwitchUrl() {
  if(!is_playing)
  {
    return;
  }
  var obj = document.getElementById("SmartPlayerActiveX");
  var switch_url = document.getElementById("playorReocordUrl").value;
  obj.NT_SwitchURL(switch_url);
}

实时静音调用示例：

//实时静音
var is_mute = 1;  
function SetMute() {
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_SetMute(is_mute);
  var muteText = document.getElementById("MuteBtn");
  if(is_mute == 1 )
  {
    is_mute = 0;
    muteText.innerHTML = "取消静音";
  }
  else
  {
    is_mute = 1;
    muteText.innerHTML  = "实时静音";
  }
}

视频view垂直反转、水平反转、旋转调用示例：

//垂直反转
var is_flip_vertical = 1;
function SetFlipVertical() {
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_SetFlipVertical(is_flip_vertical);
  var flipVerticalText = document.getElementById("FlipVerticalBtn");
  if(is_flip_vertical == 1 )
  {
    is_flip_vertical = 0;
    flipVerticalText.innerHTML = "取消反转";
  }
  else
  {
    is_flip_vertical = 1;
    flipVerticalText.innerHTML  = "垂直反转";
  }
}
//水平反转
var is_flip_horizontal = 1;
function SetFlipHorizontal() {
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_SetFlipHorizontal(is_flip_horizontal);
  var flipHorizontalText = document.getElementById("FlipHorizontalBtn");
  if(is_flip_horizontal == 1 )
  {
    is_flip_horizontal = 0;
    flipHorizontalText.innerHTML = "取消反转";
  }
  else
  {
    is_flip_horizontal = 1;
    flipHorizontalText.innerHTML  = "水平反转";
  }
}
//视频view旋转
var rotate_degrees_ = 0;
function SetRotation() {
  rotate_degrees_ += 90;
  rotate_degrees_ = rotate_degrees_ % 360;
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_SetRotation(rotate_degrees_);
  var rotateText = document.getElementById("RotateBtn");
  if (0 == rotate_degrees_)
  {
    rotateText.innerHTML = "旋转90度";
  }
  else if (90 == rotate_degrees_)
  {
    rotateText.innerHTML = "旋转180度";
  }
  else if (180 == rotate_degrees_)
  {
    rotateText.innerHTML = "旋转270度";
  }
  else if (270 == rotate_degrees_)
  {
    rotateText.innerHTML = "不旋转";
  }
}

实时截图调用示例：

function CaptureImage() {
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_CaptureImage();
}

全屏显示窗口调用示例：

//全屏显示窗口
function FullScreen() {
  var obj = document.getElementById("SmartPlayerActiveX");
  obj.NT_FullScreen();
}

如何在IE浏览器播放RTSP或RTMP流

页面展示

本地播放和集成说明：

本地播放

DEMO说明

对应封装接口

设置LOG存放路径：

接口说明：

事件Event：

事件类型：

调用展示：

SDK接口调用实例：

播放和录像调用示例：

快速切换URL调用示例：

实时静音调用示例：

视频view垂直反转、水平反转、旋转调用示例：

实时截图调用示例：

全屏显示窗口调用示例：

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

如何在IE浏览器播放RTSP或RTMP流

页面展示

本地播放和集成说明：

本地播放

DEMO说明

对应封装接口

设置LOG存放路径：

接口说明：

事件Event：

事件类型：

调用展示：

SDK接口调用实例：

播放和录像调用示例：

快速切换URL调用示例：

实时静音调用示例：

视频view垂直反转、水平反转、旋转调用示例：

实时截图调用示例：

全屏显示窗口调用示例：

热门文章

最新文章

相关电子书