在Safari上无法播放在Chrome上使用Record RTC录制的视频。

huangapple go评论83阅读模式
英文:

Videos recorded in Record RTC on Chrome do not play on Safari

问题

我理解,您需要将上面的英文代码段翻译成中文。以下是翻译后的内容:

var startCameraBtn = document.querySelector('#start-camera-btn');
var startRecordingBtn = document.querySelector('#start-recording-btn');
var stopRecordingBtn = document.querySelector('#stop-recording-btn');
var retakeRecordingBtn = document.querySelector('#retake-recording-btn');
var saveRecordingBtn = document.querySelector('#save-recording-btn');
var publishJobBtn = document.querySelector('#publish-job-btn');
var video = document.querySelector('video');

var recorder; // 全局可访问
var blob;
var mimeType;  // "video/webm;codecs=vp9";
var videoFormat; //webm

check_user_browser();

function captureCamera(callback) {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
        callback(camera);
        console.log("摄像头已启动");
    }).catch(function(error) {
        alert('无法捕获摄像头。请检查控制台日志。');
        console.error(error);
    });
}

function stopRecordingCallback() {
    video.src = video.srcObject = null;
    video.muted = false;
    video.volume = 1;
    blob = recorder.getBlob()
    video.src = URL.createObjectURL(blob);
    
    //recorder.camera.stop();
    //recorder.destroy();
    //recorder = null;
}

function startCamera(){
    this.style.display = "none";
    saveRecordingBtn.style.display = "none";
    startRecordingBtn.style.display = "block";
    
    captureCamera(function(camera) {
        video.muted = true;
        video.volume = 0;
        video.srcObject = camera;

        recorder = RecordRTC(camera, {
            type: 'video',

            // 音频/webm
            // 音频/webm;codecs=pcm
            // 视频/mp4
            // 视频/webm;codecs=vp9
            // 视频/webm;codecs=vp8
            // 视频/webm;codecs=h264
            // 视频/x-matroska;codecs=avc1
            // 视频/mpeg -- 任何浏览器均不支持
            // 音频/wav
            // 音频/ogg  -- 仅限Firefox
            // 演示: simple-demos/isTypeSupported.html
            mimeType: mimeType,

            // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
            // CanvasRecorder, GifRecorder, WhammyRecorder
            recorderType: MediaStreamRecorder,

            // 禁用日志
            disableLogs: true,

            // 获取基于时间间隔的数据块
            // 单位:毫秒
            timeSlice: 1000,

            // 需要上面的timeSlice
            // 通过回调函数返回blob
            ondataavailable: function(blob) {},

            // 如果摄像头停止,自动停止录制
            checkForInactiveTracks: false,

            // 需要上面的timeSlice
            onTimeStamp: function(timestamp) {},

            // 音频和视频轨道都适用
            bitsPerSecond: 128000,

            // 仅适用于音频轨道
            // 当codecs=pcm时被忽略
            audioBitsPerSecond: 128000,

            // 仅适用于视频轨道
            videoBitsPerSecond: 128000,

            // 由CanvasRecorder和WhammyRecorder使用
            // 这有点像“帧速率”
            frameInterval: 90,

            // 如果您正在将多个流录制到单个文件中
            // 这有助于查看正在录制的内容
            previewStream: function(stream) {},

            // 由CanvasRecorder和WhammyRecorder使用
            // 也可以传递{width:640, height: 480}
            video: HTMLVideoElement,

            // 由CanvasRecorder和WhammyRecorder使用
            canvas: {
                width: 640,
                height: 480
            },

            // 由StereoAudioRecorder使用
            // 范围从22050到96000。
            sampleRate: 96000,

            // 由StereoAudioRecorder使用
            // 范围从22050到96000。
            // 让我们强制16khz录制:
            desiredSampRate: 16000,

            // 由StereoAudioRecorder使用
            // 合法值为(256, 512, 1024, 2048, 4096, 8192, 16384)。
            bufferSize: 16384,

            // 由StereoAudioRecorder使用
            // 1或2
            numberOfAudioChannels: 2,

            // 由WebAssemblyRecorder使用
            frameRate: 30,

            // 由WebAssemblyRecorder使用
            bitrate: 128000,

            // 由MultiStreamRecorder使用 - 用于访问HTMLCanvasElement
            elementClass: 'multi-streams-mixer'

        });

      //  alert("video/webm;codecs=h264");

        // 在停止录制时释放摄像头
        recorder.camera = camera;
    });
}
function startRecording(){
    this.style.display = "none";
    stopRecordingBtn.style.display = "block";
    recorder.startRecording();
}
function stopRecording(){
    this.style.display = "none";
    retakeRecordingBtn.style.display = "block";
    saveRecordingBtn.style.display = "block";
    recorder.stopRecording(stopRecordingCallback);
}
function saveRecording(){
    this.innerHTML = '正在保存...';
     // 生成一个随机文件名
    var fileName = getFileName(videoFormat);

    // 我们需要上传“File” --- 不是“Blob”
    var fileObject = new File([blob], fileName, {
         type: 'video/' + videoFormat
    });
    uploadToPHPServer(fileObject, function(response, fileDownloadURL) {
        console.log(response);
    });
}
startCameraBtn.onclick = startCamera;
startRecordingBtn.onclick = startRecording;
stopRecordingBtn.onclick = stopRecording;
retakeRecordingBtn.onclick = startCamera;
saveRecordingBtn.onclick = saveRecording;


function uploadToPHPServer(blob, callback) {
    // 创建FormData
    var formData = new FormData();
    formData.append('video-filename', blob.name);
    formData.append('video-blob', blob);
    callback('上传录制文件到服务器。');

    var upload_url = 'upload_video.php';
    // var upload_url = 'RecordRTC-to-PHP/save.php';

    var upload_directory = upload_url;
    // var upload_directory = 'RecordRTC-to-PHP/uploads/';
                
    makeXMLHttpRequest(upload_url, formData, function(progress) {
        if (progress !== 'upload-ended') {
            callback(progress);
           

<details>
<summary>英文:</summary>

I&#39;m trying to record videos using the RecordRTC library but the issue is that videos recorded in Chrome Macbook do not play in 

-Safari Macbook+iPhone 
-Chrome iPhone

This is the source code using the [RecordRTC](https://github.com/muaz-khan/RecordRTC) and the serie of testings[enter image description here](https://i.stack.imgur.com/Gc5yk.png)


var startCameraBtn = document.querySelector('#start-camera-btn');
var startRecordingBtn = document.querySelector('#start-recording-btn');
var stopRecordingBtn = document.querySelector('#stop-recording-btn');
var retakeRecordingBtn = document.querySelector('#retake-recording-btn');
var saveRecordingBtn = document.querySelector('#save-recording-btn');
var publishJobBtn = document.querySelector('#publish-job-btn');
var video = document.querySelector('video');

var recorder; // globally accessible
var blob;
var mimeType; // "video/webm;codecs=vp9";
var videoFormat; //webm

check_user_browser();

function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
callback(camera);
console.log("Camera started");
}).catch(function(error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
}

function stopRecordingCallback() {
video.src = video.srcObject = null;
video.muted = false;
video.volume = 1;
blob = recorder.getBlob()
video.src = URL.createObjectURL(blob);

//recorder.camera.stop();
//recorder.destroy();
//recorder = null;

}

function startCamera(){
this.style.display = "none";
saveRecordingBtn.style.display = "none";
startRecordingBtn.style.display = "block";

captureCamera(function(camera) {
video.muted = true;
video.volume = 0;
video.srcObject = camera;
recorder = RecordRTC(camera, {
type: &#39;video&#39;,
// audio/webm
// audio/webm;codecs=pcm
// video/mp4
// video/webm;codecs=vp9
// video/webm;codecs=vp8
// video/webm;codecs=h264
// video/x-matroska;codecs=avc1
// video/mpeg -- NOT supported by any browser, yet
// audio/wav
// audio/ogg  -- ONLY Firefox
// demo: simple-demos/isTypeSupported.html
mimeType: mimeType,
// MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
// CanvasRecorder, GifRecorder, WhammyRecorder
recorderType: MediaStreamRecorder,
// disable logs
disableLogs: true,
// get intervals based blobs
// value in milliseconds
timeSlice: 1000,
// requires timeSlice above
// returns blob via callback function
ondataavailable: function(blob) {},
// auto stop recording if camera stops
checkForInactiveTracks: false,
// requires timeSlice above
onTimeStamp: function(timestamp) {},
// both for audio and video tracks
bitsPerSecond: 128000,
// only for audio track
// ignored when codecs=pcm
audioBitsPerSecond: 128000,
// only for video track
videoBitsPerSecond: 128000,
// used by CanvasRecorder and WhammyRecorder
// it is kind of a &quot;frameRate&quot;
frameInterval: 90,
// if you are recording multiple streams into single file
// this helps you see what is being recorded
previewStream: function(stream) {},
// used by CanvasRecorder and WhammyRecorder
// you can pass {width:640, height: 480} as well
video: HTMLVideoElement,
// used by CanvasRecorder and WhammyRecorder
canvas: {
width: 640,
height: 480
},
// used by StereoAudioRecorder
// the range 22050 to 96000.
sampleRate: 96000,
// used by StereoAudioRecorder
// the range 22050 to 96000.
// let us force 16khz recording:
desiredSampRate: 16000,
// used by StereoAudioRecorder
// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
bufferSize: 16384,
// used by StereoAudioRecorder
// 1 or 2
numberOfAudioChannels: 2,
// used by WebAssemblyRecorder
frameRate: 30,
// used by WebAssemblyRecorder
bitrate: 128000,
// used by MultiStreamRecorder - to access HTMLCanvasElement
elementClass: &#39;multi-streams-mixer&#39;
});
//  alert(&quot;video/webm;codecs=h264&quot;);
// release camera on stopRecording
recorder.camera = camera;
});

}
function startRecording(){
this.style.display = "none";
stopRecordingBtn.style.display = "block";
recorder.startRecording();
}
function stopRecording(){
this.style.display = "none";
retakeRecordingBtn.style.display = "block";
saveRecordingBtn.style.display = "block";
recorder.stopRecording(stopRecordingCallback);
}
function saveRecording(){
this.innerHTML = 'Saving...';
// generating a random file name
var fileName = getFileName(videoFormat);

// we need to upload &quot;File&quot; --- not &quot;Blob&quot;
var fileObject = new File([blob], fileName, {
type: &#39;video/&#39;.videoFormat
});
uploadToPHPServer(fileObject, function(response, fileDownloadURL) {
console.log(response);
});

}
startCameraBtn.onclick = startCamera;
startRecordingBtn.onclick = startRecording;
stopRecordingBtn.onclick = stopRecording;
retakeRecordingBtn.onclick = startCamera;
saveRecordingBtn.onclick = saveRecording;

function uploadToPHPServer(blob, callback) {
// create FormData
var formData = new FormData();
formData.append('video-filename', blob.name);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');

var upload_url = &#39;upload_video.php&#39;;
// var upload_url = &#39;RecordRTC-to-PHP/save.php&#39;;
var upload_directory = upload_url;
// var upload_directory = &#39;RecordRTC-to-PHP/uploads/&#39;;
makeXMLHttpRequest(upload_url, formData, function(progress) {
if (progress !== &#39;upload-ended&#39;) {
callback(progress);
return;
}
var initialURL = upload_directory + blob.name;
callback(&#39;ended&#39;, initialURL);
});

}

function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText === 'success') {
callback('upload-ended');
return;
}
saveRecordingBtn.innerHTML = request.responseText;
publishJobBtn.style.display = "block";
return;
}
};
request.upload.onloadstart = function() {
callback('PHP upload started...');
};
request.upload.onprogress = function(event) {
callback('PHP upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
};
request.upload.onload = function() {
callback('progress-about-to-end');
};
request.upload.onload = function() {
callback('PHP upload ended. Getting file URL.');
};
request.upload.onerror = function(error) {
callback('PHP upload failed.');
};
request.upload.onabort = function(error) {
callback('PHP upload aborted.');
};
request.open('POST', url);
request.send(data);
}

function check_user_browser(){
if (navigator.userAgent.indexOf('Chrome') !== -1 ) {
console.log("Chrome");
mimeType="video/webm;codecs=vp9";
videoFormat = "webm";
console.log("Video format: "+videoFormat+" mimeType: "+mimeType);
}else if(navigator.userAgent.indexOf('Safari') !== -1 ){
console.log("Safari");
mimeType="video/mp4;codecs=h264";
videoFormat = "mp4";
console.log("Video format: "+videoFormat+" mimeType: "+mimeType)
}else if(navigator.userAgent.indexOf('Firefox') !== -1 ){
console.log("Firefox");
mimeType="video/webm;codecs=vp9";
videoFormat = "webm";
console.log("Video format: "+videoFormat+" mimeType: "+mimeType)
}
}
// this function is used to generate random file name
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth();
var date = d.getUTCDate();
return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}

        function getRandomString() {
if (window.crypto &amp;&amp; window.crypto.getRandomValues &amp;&amp; navigator.userAgent.indexOf(&#39;Safari&#39;) === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = &#39;&#39;;
for (var i = 0, l = a.length; i &lt; l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, &#39;&#39;);
}
}

cross browser videos playing and recording
</details>
# 答案1
**得分**: 1
苹果对WebM的支持有限,我认为这些限制尚未在任何地方记录。我的(可能是错误的)理解是:
* VP8在WebRTC轨道上有相当好的支持,但在播放WebM文件时支持有限;
* VP9仅在某些版本的Safari上支持WebRTC轨道;
* WebM在桌面版Safari上受支持,至少支持VP8,也许在某些版本的Safari上也支持VP9;
* iOS版Safari根本不支持WebM,不管使用哪种编解码器。
因此,您有以下解决方案:
* 以H.264格式录制,这在各种设备上得到了良好支持,但可能会迫使您支付许可费用;
* 以带有VP8编解码器的WebM格式录制,并要求您的iOS用户安装第三方视频播放器(如VLC);
* 继续以带有VP9的WebM格式录制,并声明由于苹果对无专利编解码器的敌对立场,不支持Safari。
<details>
<summary>英文:</summary>
Apple&#39;s support for WebM is sketchy, and I don&#39;t think that the limitations have been documented anywhere.  My (possibly mistaken) understanding is that:
* VP8 is reasonably well supported, but only for WebRTC tracks, not for playing WebM files;
* VP9 is supported for WebRTC tracks on some versions of Safari only;
* WebM is supported on desktop Safari, at least with VP8, perhaps also with VP9 on some versions of Safari;
* iOS Safari does not support WebM at all, whatever the codec.
You therefore have the following solutions:
* record as H.264, which is well-supported across a variety of devices, but might force you to pay a licencing fee;
* record as WebM with the VP8 codec, and require your iOS users to install a third party video viewer (such as vlc);
* continue recording as WebM with VP9, and declare that Safari is not supported due to Apple&#39;s hostile stance against patent-free codecs.
</details>

huangapple
  • 本文由 发表于 2023年6月9日 02:39:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/76434825.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定