HTML5中的websocket实现直播
1、 videojs-contrib-hls 直播功能
github:https://github.com/videojs/videojs-contrib-hls
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
android、IOS下需m3u8格式直播地址
webkit等PC浏览器下需videojs-flash支持播放trmp
2.
https://blog.csdn.net/qq_39364032/article/details/79744309
做视频直播这一块,前期研究了很多方案,包括websocket,因为各种原因最后没有采取这个方案,但还是想记录一下学习的心得。
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。
做的过程中,主要的思维是:在录像页面利用setTimeout()每隔固定的时间通过canvas将视频转化为一帧一帧的图像,然后用websocket的socket.send()将图片数据发送给服务器。在直播页面就是先创建一个<img>的结构,通过websocket的socket.onmessage()获取到图像数据,并展示<img>标签上,形成直播。
附上代码
录像页面HTML结构
-
<video autoplay id="sourcevid" style="width:1600;height:900px"></video>
-
<canvas id="output" style="display:none"></canvas>
录像页面js
-
<script type="text/javascript" charset="utf-8">
-
//创建一个+实例
-
var socket = new WebSocket("ws://"+document.domain+":8080");
-
var back = document.getElementById('output');
-
//返回一个用于在画布上绘图的环境。
-
var backcontext = back.getContext('2d');
-
var video = document.getElementsByTagName('video')[0];
-
var success = function(stream){
-
//获取视屏流,转换为url
-
video.src = window.URL.createObjectURL(stream);
-
}
-
//打开socket
-
socket.onopen = function(){
-
draw();
-
console.log("open success")
-
}
-
// 将视频帧绘制到Canvas对象上,Canvas每100ms切换帧,形成肉眼视频效果
-
var draw = function(){
-
try{
-
backcontext.drawImage(video,0,0, back.width, back.height);
-
}catch(e){
-
if (e.name == "NS_ERROR_NOT_AVAILABLE") {
-
return setTimeout(draw, 100);
-
} else {
-
throw e;
-
}
-
}
-
if(video.src){
-
// Canvas的内容转化成PNG data URI并发送到服务器,0.5为和压缩系数
-
socket.send(back.toDataURL("image/jpeg", 0.5));
-
}
-
setTimeout(draw, 100);
-
}
-
//调用设备的摄像头,并将资源放入video标签
-
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
-
navigator.mozGetUserMedia || navigator.msGetUserMedia;
-
navigator.getUserMedia({video:true, audio:false}, success, console.log);
-
</script>
直播页面HTML结构:
<img id="receiver" style="width:1600px;height:900px"/>
直播页面JS
-
<script type="text/javascript" charset="utf-8">
-
//创建一个socket实例
-
var receiver_socket = new WebSocket("ws://"+document.domain+":8008");
-
alert("ws://"+document.domain+":8008")
-
var image = document.getElementById('receiver');
-
// 监听消息
-
receiver_socket.onmessage = function(data)
-
{
-
image.src=data.data;
-
}
-
</script>