H5播放webrtc视频

一、简介

WebRTC概念

WebRTC是由Google主导的，由一组标准、协议和JavaScript API组成，用于实现浏览器之间（端到端之间）的音频、视频及数据共享。WebRTC不需要安装任何插件，通过简单的JavaScript API就可以使得实时通信变成一种标准功能。

为什么使用webrtc

现在各大浏览器以及终已经逐渐加大对WebRTC技术的支持。下图是webrtc官网给出的现在已经提供支持了的浏览器和平台。

二、H5播放webrtc

webrtc播放经过不断探索，基本上没有现行的库来直接播放一个webrtc的url的库，很大一部分的思路是通过websocket+webrtc来实现数据传输和播放的，也有很多使用EMScript将c代码编解码库编译成js代码来使用。

不过庆幸的是，我找了一个库是支持srs的webrtc流的，它就是开源的jswebrtc，使用代码如下：

通过html播放

通过js播放

播放效果如下：

这里要说明的是srs虽然提供了webrtc协议转换，但是webrtc是基于udp的，可能是udp丢包过于严重，srs并没有处理好，所以画面如果有动画，基本上是动画的地方会有花屏！！不过实时性确实不错，可以与rtmp实时协议相差无几。

三、扩展

webrtc是一种标准协议，不像只支持IE的OCX（ActiveX）插件或普遍浏览器都支持的flash插件（重点是google的chrome浏览器在2020年12月份之后不再支持flash插件），所以后续的无插件实时视频播放的重点就落在了webrtc上，所以从长远来讲它的特点（无插件、标准通用协议）使得webrtc被广泛和长久使用。

既然webrtc如此重要，在安防或互联网直播领域就少不了视频采集或视频发布功能，所以就避免不了采集本地摄像头的音视频功能，如下就是我要讲的如何通过webrtc协议采集本地音视频，H5代码如下：

    

        

            WebRTC实例-媒体录制器
        
        
        
        

            打开摄像头
            开始录像
            播放
            下载
        
        

            
媒体流约束选项：
            

                消除回声: 
            
        
        

            
        
    
    
    

注意：HTTPS加密通信才能获取getUserMedia(),否则报错：
TypeError: Cannot read property 'getUserMedia' of undefined

我们可以将以上代码分离和简化成html和js文件，那么index.html的采集渲染代码如下：

main.js采集代码如下：

//判断是否支持调用设备api，因为浏览器不同所以判断方式不同哦  
function hasUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
    //alert("浏览器支持")  
    navigator.getUserMedia = navigator.getUserMedia
            || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
            || navigator.msGetUserMedia;
    navigator.getUserMedia({
        video : true,//开启视频  
        audio : false
    //先关闭音频，因为会有回响，以后两台电脑通信不会有响声  
    }, function(stream) {//将视频流交给video  
        var video = document.querySelector("video");
        //video.src=window.URL.createObjectURL(stream);     
        try {
            video.srcObject = stream;
        } catch (error) {
            video.src = window.URL.createObjectURL(stream);
        }
    }, function(err) {
        console.log("capturing", err)
    });
} else {
    alert("浏览器暂不支持")
}

通过以上代码，我们就可以采集本地的摄像头播放本地的采集的视频和音频了！

源码获取、合作、技术交流请获取如下联系方式：
QQ交流群：961179337

微信账号：lixiang6153
公众号：IT技术快餐
电子邮箱：[email protected]