如何在IE浏览器播放RTSP或RTMP流
好多開發(fā)者一直苦惱于如何在IE瀏覽器環(huán)境下,構(gòu)建低延遲的RTSP或RTMP播放,對(duì)于RTSP流來說,好多公司通常的做法是把RTSP轉(zhuǎn)RTMP,然后分發(fā)到RTMP服務(wù)器,然后服務(wù)器轉(zhuǎn)http-flv出來,瀏覽器直接播放http-flv流,亦或通過flash控件直接播放RTMP流,還有就是,轉(zhuǎn)hls流出來,缺點(diǎn)是hls流延遲更大。
以上方案未嘗不可,如果對(duì)播放體驗(yàn)和延遲要求更高,最簡(jiǎn)單的做法是直接在IE瀏覽器下加載activex控件。
大牛直播SDK(Github:?https://github.com/daniulive/SmarterStreaming)在現(xiàn)有SDK的基礎(chǔ)上,擴(kuò)展了ocx控件,用于IE瀏覽器下的低延遲RTMP或RTSP播放,不謙虛的說,也可能是行業(yè)內(nèi)功能支持和延遲最好的RTMP和RTSP播放器(支持RTMP/RTSP H.265(hevc)播放)。
頁面展示
1. 功能齊全的單畫面RTMP流或RTSP流播放:
2. 同時(shí)播放4路RTMP流或RTSP流畫面:
本地播放和集成說明:
點(diǎn)我下載DEMO
本地播放
DEMO說明
運(yùn)行網(wǎng)頁播放端之前,請(qǐng)確保以管理員權(quán)限注冊(cè)ocx控件:regplayerocx.bat右鍵-->“以管理員身份運(yùn)行(A)”,同理,反注冊(cè)也是需要管理員身份。
注意:大牛直播RTSP/RTMP播放OCX控件只適用于微軟IE瀏覽器。
對(duì)應(yīng)封裝接口
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);設(shè)置LOG存放路徑:
ULONG CSmartPlayerActiveXCtrl::NT_SetLogPath(LPCTSTR log_path)
請(qǐng)于NT_Open() 之前調(diào)用,代碼示例:
var obj = document.getElementById("SmartPlayerActiveX");//如需記錄log文件,請(qǐng)確保log路徑存在, 如多級(jí)目錄, 可按照"D:\\Daniulive\\log"類似格式設(shè)定, 記錄文件名: smart_sdk.logobj.NT_SetLogPath("D:\\");接口說明:
? ?1.? ULONG NT_Open();
打開player實(shí)例;
? ? 2. ULONG NT_Close();
關(guān)閉player實(shí)例;
? ? 3. ULONG NT_StartPlay();
開始播放;
? ? 4. ULONG NT_StopPlay();
停止播放;
? ? 5. ULONG NT_SetMute(LONG is_mute);
設(shè)置實(shí)時(shí)靜音;
? ? 6. ULONG NT_SetURL(LPCTSTR url);
設(shè)置播放的RTMP或RTSP url;
? ? 7. ULONG NT_SetBuffer(LONG buffer);
設(shè)置buffer time,緩沖時(shí)間,單位:毫秒;
? ? 8. ULONG NT_SetRTSPTcpMode(LONG isUsingTCP);
設(shè)置RTSP TCP/UDP播放模式;
? ? 9. ULONG NT_SetRtspTimeout(LONG timeout);
設(shè)置RTSP超時(shí)時(shí)間;
? ? 10. ULONG NT_SetRtspAutoSwitchTcpUdp(LONG is_auto_switch_tcp_udp);
設(shè)置是否自動(dòng)切換TCP/UDP模式;
? ? 11. ULONG NT_SetFastStartup(LONG isFastStartup);
設(shè)置是否快速啟動(dòng);
? ? 12. ULONG NT_SetLowLatencyMode(LONG mode);
設(shè)置是否低延遲模式播放;
? ? 13. ULONG NT_SetFlipVertical(LONG is_flip);
設(shè)置垂直反轉(zhuǎn)模式圖像;
? ? 14. ULONG NT_SetFlipHorizontal(LONG is_flip);
設(shè)置水平反轉(zhuǎn)圖像;
? ? 15. ULONG NT_SetRotation(LONG degress);
設(shè)置旋轉(zhuǎn)圖像,可設(shè)定角度:0度 90度 180度 270度;
? ? 16. ULONG NT_SwitchURL(LPCTSTR url);
設(shè)置快速切換RTSP/RTMP url;
? ? 17. ULONG NT_SetCaptureImagePath(LPCTSTR path);
設(shè)置快照保存位置;
? ? 18. ULONG NT_CaptureImage();
設(shè)置實(shí)時(shí)快照功能;
? ? 19. ULONG NT_SetRecorderDirectory(LPCTSTR dir);
設(shè)置錄像保存位置;
? ? 20. ULONG NT_SetRecorderFileMaxSize(ULONG size);
設(shè)置單個(gè)錄像文件最大size,單位:兆;
? ? 21. ULONG NT_NT_SP_RecorderFileNameRuler(ULONG type, LPCTSTR file_name_prefix, LONG append_date, LONG append_time);
設(shè)置錄像文件命名規(guī)則:是否需要前綴、是否添加日期、是否添加時(shí)間;
? ? 22. ULONG NT_SetRecorderAudioTranscodeAAC(LONG is_transcode);
設(shè)置錄像音頻文件是否轉(zhuǎn)AAC后錄制,支持PCMA/PCMU/SPEEX轉(zhuǎn)AAC后錄制文件;
? ? 23. ULONG NT_SetRecorderVideo(LONG is_record_video);
設(shè)置是否錄制視頻;
? ? 24. ULONG NT_SetRecorderAudio(LONG is_record_audio);
設(shè)置是否錄制音頻;
? ? 25. ULONG NT_StartRecorder();
開始錄像;
? ? 26. ULONG NT_StopRecorder();
停止錄像;
? ? 27. ULONG NT_FullScreen();
全屏顯示窗口。
事件Event:? ??
1. void OnSDKEventReceived(ULONG event_id, ULONG param1);
回調(diào)網(wǎng)絡(luò)狀態(tài)、buffering狀態(tài)、下載速度等;
事件類型:
<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數(shù)據(jù)*/var NT_SP_E_EVENT_ID_RTSP_STATUS_CODE = NT_SP_E_EVENT_ID_BASE | 0xB; /*rtsp status code上報(bào), 目前只上報(bào)401, param1表示status code*//* 接下來請(qǐng)從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 表示百分比進(jìn)度*/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; /*播放結(jié)束, 直播流沒有這個(gè)事件,點(diǎn)播流才有*/var NT_SP_E_EVENT_ID_RECORDER_REACH_EOS = NT_SP_E_EVENT_ID_BASE | 0xa2; /*錄像結(jié)束, 直播流沒有這個(gè)事件, 點(diǎn)播流才有*/var NT_SP_E_EVENT_ID_PULLSTREAM_REACH_EOS = NT_SP_E_EVENT_ID_BASE | 0xa3; /*拉流結(jié)束, 直播流沒有這個(gè)事件,點(diǎn)播流才有*/var NT_SP_E_EVENT_ID_DURATION = NT_SP_E_EVENT_ID_BASE | 0xa8; /*視頻時(shí)長(zhǎng),如果是直播,則不上報(bào),如果是點(diǎn)播的話, 若能從視頻源獲取視頻時(shí)長(zhǎng)的話,則上報(bào), param1表示視頻時(shí)長(zhǎng),單位是毫秒(ms)*/ </script>調(diào)用展示:
<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 IE11var show_str = "";var connection_status = event_id;if (connection_status != 0){show_str += "鏈接狀態(tài): ";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 += "收不到數(shù)據(jù)";}}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 += "緩沖狀態(tài): ";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 += "結(jié)束緩沖";}}var EventMsgText = document.getElementById("EventMsg");EventMsgText.innerHTML = show_str;</script>
2. void OnVideoSizeReceived(ULONG width, ULONG height);
回調(diào)視頻寬高信息。
調(diào)用展示:
<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 IE11var VideoResolutionText = document.getElementById("VideoResolution");VideoResolutionText.innerHTML = width + "*" + height; </script>SDK接口調(diào)用實(shí)例:
播放和錄像調(diào)用示例:
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文件,請(qǐng)確保log路徑存在, 如多級(jí)目錄, 可按照"D:\\Daniulive\\log"類似格式設(shè)定, 記錄文件名: smart_sdk.logobj.NT_SetLogPath("D:\\");var ret = obj.NT_Open();if(ret == 0){ //設(shè)置TCP/UDP模式var rtsp_tcp_mode = document.getElementById("rtspTcpMode").checked ? 1 : 0;obj.NT_SetRTSPTcpMode(rtsp_tcp_mode);//設(shè)置RTSP超時(shí)時(shí)間var rtsp_timeout = document.getElementById("rtspTimeout").value;obj.NT_SetRtspTimeout(rtsp_timeout);//設(shè)置是否自動(dòng)切換TCP-UDP模式var rtsp_auto_switch_tcp_udp = document.getElementById("rtspAutoSwitchTcpUdp").checked ? 1 : 0;obj.NT_SetRtspAutoSwitchTcpUdp(rtsp_auto_switch_tcp_udp);//設(shè)置是否快速啟動(dòng)var fast_startup_mode = document.getElementById("fastStartupMode").checked ? 1 : 0;obj.NT_SetFastStartup(fast_startup_mode);//設(shè)置需要播放或錄像的RTSP/RTMP urlvar url = document.getElementById("playorReocordUrl").value;obj.NT_SetURL(url);//設(shè)置實(shí)時(shí)截圖路徑(可自行設(shè)置或選取系統(tǒng)存在的文件夾), 如多級(jí)目錄可按照"D:\\Daniulive\\image"類似格式設(shè)定//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瀏覽器,請(qǐng)用IE打開播放控件..");return;}if(!isActiveXInstalled()){alert("控件未加載,請(qǐng)先加載控件..");return;}if(is_playing){StopPlayback();}else{StartPlayback();} }//開始播放 function StartPlayback() {if(!is_playing && !is_recording){OpenPlayer();}var obj = document.getElementById("SmartPlayerActiveX");//設(shè)置是否啟用低延遲模式var low_latency_mode = document.getElementById("lowlatencyMode").checked ? 1 : 0;obj.NT_SetLowLatencyMode(low_latency_mode);//設(shè)置緩沖時(shí)間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瀏覽器,請(qǐng)用IE打開播放控件..");return;}if(!isActiveXInstalled()){alert("控件未加載,請(qǐng)先加載控件..");return;}if(is_recording){StopRecorder();}else{StartRecorder();} }//開始錄像 function StartRecorder() {if(!is_playing && !is_recording){OpenPlayer();}var obj = document.getElementById("SmartPlayerActiveX");//設(shè)置實(shí)時(shí)錄像存放路徑(可自行設(shè)置或選取系統(tǒng)存在的文件夾), 如多級(jí)目錄可按照"D:\\Daniulive\\rec"類似格式設(shè)定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調(diào)用示例:
//快速切換播放URL function SwitchUrl() {if(!is_playing){return;}var obj = document.getElementById("SmartPlayerActiveX");var switch_url = document.getElementById("playorReocordUrl").value;obj.NT_SwitchURL(switch_url); }實(shí)時(shí)靜音調(diào)用示例:
//實(shí)時(shí)靜音 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 = "實(shí)時(shí)靜音";} }視頻view垂直反轉(zhuǎn)、水平反轉(zhuǎn)、旋轉(zhuǎn)調(diào)用示例:
//垂直反轉(zhuǎn) 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 = "取消反轉(zhuǎn)";}else{is_flip_vertical = 1;flipVerticalText.innerHTML = "垂直反轉(zhuǎn)";} }//水平反轉(zhuǎn) 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 = "取消反轉(zhuǎn)";}else{is_flip_horizontal = 1;flipHorizontalText.innerHTML = "水平反轉(zhuǎn)";} }//視頻view旋轉(zhuǎn) 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 = "旋轉(zhuǎn)90度";}else if (90 == rotate_degrees_){rotateText.innerHTML = "旋轉(zhuǎn)180度";}else if (180 == rotate_degrees_){rotateText.innerHTML = "旋轉(zhuǎn)270度";}else if (270 == rotate_degrees_){rotateText.innerHTML = "不旋轉(zhuǎn)";} }實(shí)時(shí)截圖調(diào)用示例:
function CaptureImage() {var obj = document.getElementById("SmartPlayerActiveX");obj.NT_CaptureImage(); }全屏顯示窗口調(diào)用示例:
//全屏顯示窗口 function FullScreen() {var obj = document.getElementById("SmartPlayerActiveX");obj.NT_FullScreen(); }?
總結(jié)
以上是生活随笔為你收集整理的如何在IE浏览器播放RTSP或RTMP流的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: urllib2.URLError: ur
- 下一篇: 怎么将手机QQ浏览器里面的文章分享给QQ