美文网首页
webscoket+h5实现视频功能

webscoket+h5实现视频功能

作者: zero_93a5 | 来源:发表于2020-07-15 11:08 被阅读0次
    通过webscoket实现聊天室视频注意点,案例是个简单的小例子,参考了多人代码,如有疑问可以留言。本文不扯概念。

    源码代码参见:https://gitee.com/sunhui5415/IM

    1. 使用https方式本地环境先生成一个keystore,放到根目录下,其次从application.properties中配置对应的参数。

    2. webscoket 使用wss方式,ws只支持http协议

    var socket = new WebSocket("wss://172.16.150.148:443/v?video");
    

    3. index.html为用户端,video.html为主播区,注意修改ip和端口。

    4. 调用摄像头需要进行一些兼容性判断,具体见代码video.html

    // getUserMedia 被标准废除了,mediaDevices 正在取代中
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
    
        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
    
                // 首先,如果有getUserMedia的话,就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    
                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }
    
                // 否则,为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
    

    5. 有些浏览器测试时候打不开或者白屏,是因为https的证书不合法或者失效,请使用生产环境,域名+证书。 以测试chrome、360急速模式、Firefox、华为手机浏览器、QQ X5内核等浏览器

    相关文章

      网友评论

          本文标题:webscoket+h5实现视频功能

          本文链接:https://www.haomeiwen.com/subject/qlsmcktx.html