H5无插件播放rtsp视频流

基于WebSocket的HTML5 RTSP流媒体视频播放器

Streamedian能让浏览器免插件播放rtsp视频流

Streamedian管网: https://streamedian.com/

具体操作

1、安装Streamedian服务端

2、前端H5界面使用Video标签播放视频流


<link href="~/css/Index.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/h265.player.2.1.5.js"></script><div class="text-center"><div class="url"><span>rtsp流：</span><input id="stream_url" value="rtsp://nthhjk:nthh951753@58.221.140.162:20011/h264/ch1/main/av_stream"><button id="set_new_url">播放</button></div><div class="video" style="width:100%;height:100vh;"><video id="test_video" controls="controls" autoplay="autoplay"></video></div>
</div>
<script type="text/javascript">//jQuery(function ($) {//})if (window.Streamedian) {var errHandler = function (err) {console.log('err', err.message);};var infHandler = function (inf) {console.log('info', inf)};var playerOptions = {socket: "ws://localhost:8088/ws/",redirectNativeMediaErrors: true,bufferDuration: 30,errorHandler: errHandler,infoHandler: infHandler};var urlButton = document.getElementById("set_new_url");urlButton.onclick = () => {var stream_url = $("#stream_url").val();setPlayerSource(stream_url);};//播放function setPlayerSource(stream_url) {var html5Player = document.getElementById("test_video");html5Player.src = stream_url;var player = Streamedian.player('test_video', playerOptions);}window.onbeforeunload = function () {player && player.destroy();player = null;Request = null;}};
</script>

其他方案：https://blog.csdn.net/u011489205/article/details/79327275

H5无插件播放rtsp视频流相关推荐

Windows PC、 Linux、 Android、 iOS多平台支持H5无插件播放RTSP摄像机解决方案
Windows PC. Linux. Android. iOS多平台支持H5无插件播放RTSP摄像机解决方案需求分析视频流媒体监控行业已经进入互联网时代,浏览器承载了绝大多数的互联网访问流量,目前 ...
利用RTVS实现html5无插件播放rtsp、rtmp
引言最近经常有人咨询RTVS能否播摄像头的rtsp的流,RTVS暂只支持接入JT/T 1078协议,并不支持rtsp等格式. 但可以借助RTVSDev模拟器将rtsp.rtmp.hls或本地文件等视 ...
[转] web无插件播放RTSP摄像机方案，拒绝插件，拥抱H5！
需求问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估计也不会有: 问题:可以自己做浏览器插件播放RTSP吗? 答案:可以的,chrome做ppap ...
EasyNVR是如何做到无插件播放RTSP摄像机，完美将海康、大华、宇视等安防设备向互联网转化的
5G快来了,视频将会是跑在网络上流量最多的东西,短视频.长视频.电影.视频通话.视频监控,各种各样的,而在消费级领域,监控视频近些年也越来越受到关注和欢迎,从萤石摄像机的诞生.到一众互联网家用摄像机的 ...
使用vlc插件播放rtsp视频流遇到的问题
如何安装和使用,教程一大堆,这里不再赘余,贴一下我的代码 <object class="vlc" type="application/x-vlc-plugin&qu ...
RTSP数据的无插件播放与超图三维iClient3D的视频投射
从RTSP视频流到Web端再到超图三维一.转发 rtsp直播视频流到web页面播放 1.1 RTSP视频流数据 1.2 streamedian:将rtsp转为ws到web端播放 1.3 异机部署St ...
SkeyeVSS综合安防视频云服务H5无插件直播点播实现HEVC H265 300毫秒以内低延迟播放
SkeyeVSS综合安防视频云服务H5无插件直播点播实现HEVC/H265 300毫秒以内低延迟播放 SkeyeVSS视频云支持HEVC/H265编码格式的摄像机直接接入,同时不需要后台转码,直接在W ...
PHP如何调取vlc播放rtsp,H5+VLC播放RTSP视频流
最新项目涉及到摄像头,这篇文章记录一下在VUE中播放RTSP视频流. 这篇文章主要介绍使用VLC插件播放RTSP视频流,目前支持的浏览器有 360浏览器.2345浏览器,可用于一些对播放器要求不高的项 ...
基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
背景分析在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...

H5无插件播放rtsp视频流

H5无插件播放rtsp视频流相关推荐

最新文章

热门文章