前端使用jswebrtc实现视频流播放
JSWebrtc對瀏覽器的Webrtc做了簡單的封裝,支持SRS的RTC流的播放.
html代碼:
JSWeb播放器可以通過HTML創建,只需給指定元素添加CSS樣式 jswebrtc即可:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebRTCPlayer</title><style type="text/css">html, body {background-color: #111;text-align: center;}</style> </head> <body><div class="jswebrtc" data-url="webrtc://192.168.15.17/live/livestream"></div><script type="text/javascript" src="jswebrtc.min.js"></script> </body> </html>還有另一種寫法:
在JavaScript中調用,JSWebrtc.Player()構造方法來創建:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webrtc 視頻播放</title> </head> <body><video id="video_webrtc" controls></video><script type="text/javascript" src="./jswebrtc.min.js"></script><script type="text/javascript">var video = document.getElementById('video_webrtc');var url = 'webrtc://----';var option={ video: video, autoplay: true }var player = new JSWebrtc.Player(url,option);</script> </body> </html>gitee地址:https://toscode.gitee.com/kernelj/jswebrtc#%E7%94%A8%E6%B3%95
1.啟動srs?
? ? ? ? 命令: ./objs/srs -c conf/rtc.conf (要在srs/trunk路徑下執行)
? ? ? ? 在瀏覽器輸入:http://192.168.15.17:8080/players/rtc_player.html(前面的IP是你自己的ip)
????????正常的話應該是這樣的:
?這是還沒圖像;
2 打開推流工具obs
? ? ? ? (1)? ? 點開右下角的"設置"
? ? ? ? (2)? ? 點擊左側欄的"推流"
? ? ? ? (3) ???服務改成自定義
? ? ? ? ?????????服務器改成rtmp://192.168.15.17/live/(ip改成自己的)
? ? ? ? ? ? ? ? 串流密鑰改成 livestream
? ? ? ? (4) 點擊確定
?????????(5) 點擊底部欄中來源內的加號
? ? ? ? ?(6) 點擊視頻采集設備(沒有攝像頭可以點擊窗口采集)
? ? ? ? (7) 點擊確定(新建的步驟)
? ? ? ? (8) 然后可以選擇攝像頭,這里可以看出來我使用的是?？档脑O備
? ? ? ? ?(9) 再次點擊確定, 這時正常的話,應該有畫面顯示在上面了,例如這樣
? ? ? ? ?(10) 點擊右側的"開始推流"? 就可以了 如果下面顯示CPU的占用率等,就是可以了
現在回到我們的SRS頁面, 在URL地址欄中輸入以下:
webrtc://192.168.15.17/live/livestream
點擊"播放視頻", 就有畫面出來了
?測試沒問題,就把這個URL地址復制到html中
?畫面可以正常顯示,木的問題!就大功告成了!!!
經測試 延時大概在1秒鐘左右,實時性還是不錯的,與rtmp相比相差無幾.
經大神指點:? 這里要說明的是,srs雖然提供了webrtc協議轉換, 但是webrtc是基于udp的,可能udp丟包過于嚴重,srs并沒有處理好,所以畫面如果有動畫,基本上是動畫的地方都會有花屏!!
這里有個小坑,本來想使用ffmpeg推流,? 但是試了幾次沒有成功,有成功使用ffmpeg的大神, 歡迎指點一下啊, 哈哈哈!
總結
以上是生活随笔為你收集整理的前端使用jswebrtc实现视频流播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 21. 校验码
- 下一篇： web页面注册验证，实现从后端动态获取证